现在网站上关于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. android:ViewPager动画总结

    设置动画的方案: 我们能够使用ViewPager的setPageTransformer方法,为ViewPager设置动画.下面是几种常见动画的演示及效果: 1.CubeInTransformer wa ...

  2. HDU4300-Clairewd’s message(KMP前缀匹配后缀)

    Clairewd's message Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  3. Android API之onLayout, onMeasure

    android.view.ViewGroup protected void onLayout(boolean changed, int l, int t, int r, int b) 执行layout ...

  4. pycharm 控制台字体背景颜色设定让你美到爆

    还在为你控制台字体颜色不入眼而发愁吗? 在某些特殊时刻想要改变下字体的颜色却无从下手而发愁吗? 那你就进来看一看,瞧一瞧,之需看2分钟,花2分钟理解,花3分钟练练手就能让你的控制能字体炫酷起来! 一. ...

  5. IntelliJ IDEA 学习(一):IntelliJ IDEA15 破解方法(已验证)

    新的破解方法: 1.进到文件夹中:C:\Windows\System32\drivers\etc ,找到hosts文件,用记事本编辑 2.如果没有找到hosts文件,可在查看设置中勾选“显示隐藏的项目 ...

  6. unity, mono断点

    在unity编辑器中点运行后,如果直接在mono中打断点是不起作用的,需要再点击mono的run按钮,此时弹出Attach to Process对话框,如图: 选中其中的Unity Editor (U ...

  7. CodeMirror与jquery UI-Tabs混合使用 注意事项

    第一步:.将代码高亮渲染 第二步:jquery Tab输出: 第三步:点击Tab切换时,将代码块刷新: 参考:http://jtmorris.net/2013/06/codemirror-editor ...

  8. Java运行Python脚本的几种方式

    由于在项目需要执行Python,找寻相关资料,总结出以下几种方式: 直接执行Python脚本代码 引用 org.python包 PythonInterpreter interpreter = new ...

  9. 安卓-启动下一个Activity

    Intent intent = new Intent(NotebookActivity.this, MessageActivity.class); startActivity(intent); 通过意 ...

  10. atitit.Windows Server 2003 2008 2012系统的新特性 attilax 总结

    atitit.Windows Server 2003  2008  2012系统的新特性 attilax 总结 1. Windows Server 2008 新特性也可以归纳为4个方面. 1 2. 相 ...