`

jquery mobile小经验

 
阅读更多
[size=medium]现在网站上关于jquery mobile的demo和帖子可真少啊,我刚开始接触,遇到了一些问题,都找不到人请教。
这是我的个人经验总结,或多或少会对刚入门的童鞋有点帮助吧。
如果想一开始进入页面的时候就弹出来一个警告框,目前我知道的有三种办法可以解决:
1.利用jqm因为jqm的加载远早于document.ready事件发生时,当Jquery Mobile开始执行时,他就会在document对象上触发mobileinit 事件,所以你可以绑定别的行为来覆盖默认配置
$(document).bind("mobileinit", function(){
 alert("jquery mobile");
});

因为mobileinit事件是在加载后马上触发,所以你需要在Jquery Mobile加载之前绑定你的事件处理函数,所以我建议你如下安排你的js引用顺序
<script src="Jquery.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
 alert("jquery mobile");
}); 
</script>
<script src="Jquery-mobile.js"></script>

最好是按照这个顺序,因为我开始的时候,是这样写的:
<script src="Jquery.js"></script>
<script src="Jquery-mobile.js"></script> 
<script type="text/javascript">
$(document).bind("mobileinit", function(){
 alert("jquery mobile");
}); 
</script> 

但是根本就没有任何反应,也不报错,所以顺序很重要哈!

2.利用jquery$(function(){
alert("jquery");
})
3.利用javascript
function loaded(){ alert('javascript'); }
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 2000); }, false);

此外,还有一种页面跳转的方式,如果你想从第一个页面通过后台跳转到第二个页面的时候,弹框框,那么你可以用这种方式:
第一个页面的链接:
<a href="${pageContext.request.contextPath}/lcecodelog/listL_cecodelog.action class="ui-btn-active" data-ajax="false">跳转页面</a>

第二个页面:
<script src="Jquery.js"></script>
<script src="Jquery-mobile.js"></script> 
<script type="text/javascript">
$(function(){
 alert("第二个页面");
}); 
</script> 
或者
<script src="Jquery.js"></script>
<script src="Jquery-mobile.js"></script> 
<script type="text/javascript">
$(document).bind("mobileinit", function(){
 alert("第二个页面");
}); 
</script>

因为jqm默认的提交方式是ajax,但是我在这里不是用ajax提交的,所以需要设置data-ajax="false"属性,这样才可以正常弹出框框,否则也是没反应的。[/size]



<script type="text/javascript">
$(document).bind("mobileinit", function(){ 
   $("#jiangjie").bind("click", function() {  
 //如果使用的$("#jiangjie").click(function(){});那么就需要写在$(function(){})里面,不支持click事件吗?还是绑定事件吧
    alert("产品讲解");
		});   
}); 
</script>
分享到:
评论
3 楼 516758517 2012-11-15  
516758517 写道
   

2 楼 516758517 2012-11-15  
        
1 楼 516758517 2012-11-15  
   

相关推荐

    jQuery Mobile 所需要的部署文件

    jQuery Mobile 是一个轻量级的、基于 jQuery 库的框架,专为移动设备上的网页应用设计,它提供了丰富的用户界面(UI)组件和交互效果,让开发者能够快速构建响应式和触控友好的Web应用程序。这个资源包以“Hello ...

    jquerymobile经验小结

    ### jQuery Mobile 经验小结 #### 一、概述 jQuery Mobile 是一款基于 HTML5 的移动设备框架,它为开发者提供了构建响应式网站、应用程序的能力。通过使用 jQuery Mobile,可以轻松地创建适用于不同屏幕尺寸的网页...

    Jquery mobile 从设计到开发

    书籍《jQuery Mobile Develop and Design》的作者Krish Hadlock,拥有丰富的开发经验,他在书中提供了一个全面的入门指南,帮助读者通过一步步的指导学会编写代码,以创建移动网站。这本书覆盖了jQuery Mobile框架的...

    jquerymobile应用小实例

    《jQuery Mobile 应用小实例:自定义样式与提示弹窗》 在Web开发领域,jQuery Mobile是一款强大的框架,专为移动设备设计,提供了一套完整的用户界面组件和交互效果,使得开发者能够轻松构建响应式、触控友好的网页...

    jQuery mobile相册的一种样式

    在IT行业中,jQuery Mobile是一种广泛使用的前端框架,它专门用于构建响应式和触屏友好的移动Web应用。jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,...

    jquerymobile设计完整例子

    **jQuery Mobile 设计详解** jQuery Mobile 是一个轻量级、响应式的前端框架,专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程,提供了丰富的组件和交互效果,使得开发者可以快速构建...

    jQueryMobile-HTML5模板

    1. **统一的触控体验**:jQuery Mobile提供了一套跨平台的触控事件处理机制,确保在各种设备上的滑动、点击等操作有统一的反馈。 2. **自动页面导航**:通过数据-URL(data-url)属性和页面容器,jQuery Mobile可以...

    jQuery mobile相册

    jQuery Mobile是jQuery库的一个分支,专为触摸设备优化,提供了一套完整的UI小部件和交互效果,使得开发者能够轻松创建响应式、触摸友好的移动应用程序。 在"jQuery mobile相册"这一主题中,我们主要关注的是如何...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    Jquery Mobile 帮助手册

    jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

    jQuery Mobile参考手册

    1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 ...

    jquery mobile 1.4.1版

    总的来说,jQuery Mobile 1.4.1版为移动开发提供了一套完整的解决方案,无论是新手还是经验丰富的开发者,都能从中受益,快速构建高质量的移动应用。其强大的功能和易用性使其在移动开发领域占据一席之地。结合这些...

    jquery mobile datepicker 手机端日期选择器

    《jQuery Mobile Datepicker:手机端日期选择器深度解析》 在移动应用开发中,日期选择器是一个不可或缺的组件,它提供了用户友好的界面,让用户能够方便地选择日期。jQuery Mobile Datepicker 是一个专为手机端...

    jQuery Mobile API文档

    jQuery Mobile API文档。jQuery Mobile是jQuery框架的一个组件(而非jquery的移动版本)。jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。...

    jquery mobile官方git资源

    总结,jQuery Mobile官方Git资源为开发者提供了全面的学习材料和实战案例,无论是初学者还是经验丰富的开发者,都能从中受益。通过深入理解和掌握这些知识点,我们可以更加高效地构建高质量的移动Web应用,满足不同...

    jQuery Mobile实战源码

    《jQuery Mobile实战》源码分析 jQuery Mobile 是一个流行的前端框架,专为移动设备设计,旨在简化移动Web应用的开发。这个源码包提供了一手的学习资料,让我们深入理解jQuery Mobile的工作原理及其在实际项目中的...

    jQuery mobile滑动式的标题导航

    jQuery Mobile 是一个轻量级、触控优化的前端框架,专为移动设备设计,它提供了一整套构建移动Web应用程序的组件。在这个“jQuery mobile滑动式的标题导航”主题中,我们将深入探讨如何利用jQuery Mobile创建动态且...

    jQuery Mobile快速入门.pdf

    ### jQuery Mobile 快速入门知识点概述 #### 一、jQuery Mobile 概述 - **定义与背景**:jQuery Mobile 是一款流行的开源 JavaScript 库,它主要用于构建响应式的 Web 应用程序,支持触摸操作,兼容多种移动设备。...

    jQuery Mobile快速入门完整版.pdf + 所有源码

    作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...

    jQuery mobile图片截图

    jQuery Mobile 是一个轻量级、触控优化的 JavaScript 框架,专为移动设备上的 Web 应用程序设计。它构建在 jQuery 和 jQuery UI 的基础之上,提供了一套完整的组件和接口,用于创建响应式、触摸友好的移动界面。在 ...

Global site tag (gtag.js) - Google Analytics