jquery mobile小经验

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

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

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

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

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

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

第二个页面: 
Java代码   收藏代码
  1. <script src="Jquery.js"></script>  
  2. <script src="Jquery-mobile.js"></script>   
  3. <script type="text/javascript">  
  4. $(function(){  
  5.  alert("第二个页面");  
  6. });   
  7. </script>   
  8. 或者  
  9. <script src="Jquery.js"></script>  
  10. <script src="Jquery-mobile.js"></script>   
  11. <script type="text/javascript">  
  12. $(document).bind("mobileinit", function(){  
  13.  alert("第二个页面");  
  14. });   
  15. </script>  

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



Java代码   收藏代码
  1. <script type="text/javascript">  
  2. $(document).bind("mobileinit", function(){   
  3.    $("#jiangjie").bind("click", function() {    
  4.  //如果使用的$("#jiangjie").click(function(){});那么就需要写在$(function(){})里面,不支持click事件吗?还是绑定事件吧  
  5.     alert("产品讲解");  
  6.         });     
  7. });   
  8. </script>  
目录
相关文章
|
JavaScript 前端开发 开发者
一篇文章带你用jquery mobile设计颜色拾取器
一篇文章带你用jquery mobile设计颜色拾取器
153 0
一篇文章带你用jquery mobile设计颜色拾取器
|
JavaScript 前端开发 CDN
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
127 0
手把手教你用jQuery Mobile做相册
|
Web App开发 JavaScript 前端开发
15款优秀的jQuery-Mobile插件
移动互联网迅速发展,PC端的网页并不能完全适应移动端页面需求,响应式设计体验产生并成为潮流。由此也促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架,继承了jQuery的“write less,do more”精髓,具有良好的扩展性和可定制性,全面兼容各种平台设备,对于不支持的手机类型,也会降级到基础样式。
361 0
15款优秀的jQuery-Mobile插件
|
JavaScript 前端开发 开发者
一篇文章带你用jquery mobile设计颜色拾取器
一篇文章带你用jquery mobile设计颜色拾取器
463 0
|
数据采集 JavaScript 前端开发
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
795 0
|
JSON JavaScript 前端开发
使用jQuery Mobile和JSON创建移动应用程序
  近来移动应用开发迅速受到很多公司的关注,他们寻求为现存的产品和应用程序添加移动展现或者“触点”。即便不是所有,大部分移动应用开发框架也都会适应某种现存的“桌面”开发平台。基于Web的框架则不同。业界当前采用jQuery来创建移动web应用程序(上个月发布了jQuery Mobile Alpha 3)。
990 0
|
JavaScript 前端开发 测试技术