jquery mobile小经验

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

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>
时间: 2024-08-05 04:22:31

jquery mobile小经验的相关文章

为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小

头部加入 <header> <metaname="viewport"content="width=device-width, initial-scale=1"> </header> 为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小,布布扣,bubuko.com

管理外借设备的小工具(简化界面和优化手机界面的功能jquery mobile)

前阵子写了个小工具,后来经过经理的审核后给了我几个改进的建议,第一是简化界面,这个工具将来会用手机来进行管理,所以界面上要尽量简化,省去不必要的组件,第二是使用jquery mobile来美化界面,第三是使用ajax post方式来提交数据,避免传统的post方法重载整个页面. 第一,我加上了检测客户端设备的页面为首页,这样就能在访问首页的时候根据设备来做重定向, 此代码参考了csdn里某大牛的文章,做了部分修改,原文出自这里:链接 index.php代码为:     <?php        

[jQuery Mobile]JQM的控件群组与小图示如何使用

摘要:[jQuery Mobile]JQM的控件群组与小图示如何使用 范例下载 想必很多人在一开始使用JQM的时候都被官方文档里面的一些展示所吸引,简单以上手的特性也让他的使用者越来越多 新手从官方下载的JQM zip文件能找到JS跟CSS外里面还有几个图档 ajax-loader.gif(异步时默认的Loading动画效果) icons-18-black.png icons-18-white.png icons-36-white.png(HD版本) icons-36-white.png(HD版

html5+jQuery Mobile开发移动端wap经验总结(二)- a / input样式重新定义

jQuery mobile中,很多样式都是写好的,虽然有主题,但是对于个性化的wap网站来说,还是很难驾驭的. 使用html5+jQuery Mobile做了几个页面之后,中间所遇到的问题,以及解决方法,现在加以总结,以便过后查阅. 问题: 1.a的颜色重新定义问题 2.input中button颜色问题. input输入框中,左边图标展示问题(文字缩进) 3.上文中的图标自定义问题[上文已经说明,通过ui-icon-XXX:after进行重新定义] 解决: 1-2.a / input的重新定义均

移动框架 jquery mobile 初探

年前给单位写了个小系统,主要用于年末各种评选工作,按照领导要求,需要在移动端进行开发,所以顺便就学习了移动 web开发.由于是初次接触,曲曲折折,最终完成,不过自己甚不满意,不够完美.在这里面走了不少弯路,积累了一些经验. 移动前端,使用的是几样技术的综合,主要的部分就是应用responsive布局,详细一点,用的技术有媒体查询,流体布局,自适应缩放,ajax,viewport属性,移动端屏幕DPI等等还有很多的细节方面. 最后为了节省时间,就选择了现在比较成熟的移动框架,Jquery Mobi

jQuery Mobile中表单的使用体会

jQuery Mobile是手机端(移动端)页面制作用的框架,包括CSS和JavaScript,此处简单总结一下表单的书写,主要涉及CSS部分.框架提供了表单的一些样式,但在实际使用的时候,我们可能会用自己的自定义样式,这种情况下,框架提供的样式可能就不能满足我们的要求.今天项目中写登录页面的静态网页,碰到了几个问题,在这里和大家交流一下. 1 利用data-role="none" 在使用表单的时候,如果想使用自定义样式,就可以表单元素上给data-role属性赋值none,意思就是不

jquery mobile 教程

简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用.使用该框架可以节省大量的js代

jQuery Mobile panel的相关属性

参考网站:http://www.lampweb.org/jquerymobile/19/64.html 面板 data-role="panel" 在一个 jQuery Mobile “page”中,面板与“header”.“footer”.“content”,必须是兄弟元素.可以在它们之前或之后添加面板的标记,但不在它们中间添加.注:此约束将在未来的版本中删除. <div data-role="page"> <div data-role="

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"