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

  1. $(document).bind("mobileinit", function(){
  2. alert("jquery mobile");
  3. });

因为mobileinit事件是在加载后马上触发,所以你需要在Jquery Mobile加载之前绑定你的事件处理函数,所以我建议你如下安排你的js引用顺序

  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>

最好是按照这个顺序,因为我开始的时候,是这样写的:

  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

  1. function loaded(){ alert('javascript'); }
  2. document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 2000); }, false);

此外,还有一种页面跳转的方式,如果你想从第一个页面通过后台跳转到第二个页面的时候,弹框框,那么你可以用这种方式: 
第一个页面的链接:

  1. <a href="${pageContext.request.contextPath}/lcecodelog/listL_cecodelog.action class="ui-btn-active" data-ajax="false">跳转页面</a>

第二个页面:

  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"属性,这样才可以正常弹出框框,否则也是没反应的。

  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>

jquery mobile小经验的更多相关文章

  1. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  2. phoneGap+jquery mobile项目经验

        最近一个月,一直在用phoneGap+jquery mobile来开发一项目. 下面谈谈自己在开发过程中遇到的一些问题以及解决方法. 开始选择框架时,曾试过采用其他框架做UI,例如chocol ...

  3. JQM[jquery mobile] 实战经验汇总

    动态装载的子页面(data-role=”page”),完全不用page div之外的tag,也不会起作用.子页面的javascript脚本必须写在page的</div>之前. 切换按钮(a ...

  4. JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法

    JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...

  5. jQuery Mobile中文手册:开发入门

    jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流行的移动平台设计一个 ...

  6. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...

  7. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  8. Jquery mobile 新手问题总汇

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...

  9. 学jQuery Mobile后的感想

    jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球 ...

随机推荐

  1. nginx命令:启动,停止及命令参数详解

    nginx命令:启动nginx 在Windows上安装好nginx后,我们需要启动nginx服务,启动nginx服务的命令行操作主要有两种方式,即 1 C:/nginx-0.8.53>nginx ...

  2. http协议中content-length 以及chunked编码分析

    转载请注明出处 http://blog.csdn.net/yankai0219/article/details/8269922 0.序 1.http/1.1协议中与chunked编码的相关字段 1)E ...

  3. LoadRunner录制:脚本调试

    优化思路 1. 先录制 2. 然后进行清理.清理掉多余的cookie.lr_think_time等冗余脚本. 3. 调试脚本,让脚本可以跑通过. 4. 逐步优化添加 调试思路 1. 单用户单迭代 录制 ...

  4. vue的全家桶

    自定义指令 <div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('d ...

  5. OpenERP7.0中非admin帐号新增其它用户问题

    在OpenERP7.0中,通过admin新增了一个管理员帐号,然后登录管理员帐号,再新增其它用户时提示错误,系统提示对users没有create权限. 经测试了解,是因为安装了多公司模块后,在记录规则 ...

  6. 查看Buffer Pool使用情况--[转]

    ----源自:微软官方博客论坛 我的SQL Server buffer pool很大,有办法知道是哪些对象吃掉我的buffer Pool内存么?比方说,能否知道是哪个数据库,哪个表,哪个index占用 ...

  7. UML学习(一)-工具介绍

    这里用于学习UML的工具是StarUML,没有什么原因为什么要用它,或许仅仅是有人说好用和比较小. 首先介绍下这个工具,来张图. 1.菜单栏(最上面) 2.快捷工具栏(菜单栏下面) 3.工具项(Too ...

  8. 局域网Ubuntu与WinXP实现文件共享

    时间:2008-11-28 11:27:55   从新立得软件包管理器中安装Samba和Smbfs.Samba是在Unix系统中用于共享文件和打印机的应用软件.Smbfs is a filesyste ...

  9. CSS样式中标点符号的作用

    http://www.cnblogs.com/65876951/archive/2011/09/20/2182239.html

  10. memcached+Mysql(主从)

    昨天和守住看了下http://hi.baidu.com/156544632/blog/item/3b26527b68623ff00bd18746.html这篇文章,思路很好,但感觉就是太乱了,而且还出 ...