jQuery Mobile 的一个BUG: 当不采用 ajax 以及 他自己的 back 返回的时候,即: 点击浏览器后退按钮时,将会从缓存之中加载页面,此时,讨厌的 loading 动画出来了,而且一直不消失. 网上找了好多解决方法,搜索了好久都没有好用的,今天突然想起来个釜底抽薪,直接动jqeury-mobile 的类库. 用编辑器打开, 找到显示pageLoading的方法, showPageLoadingMsg 的定义处: 然后加上一句代码,if("".length<5)…
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大致流程如下: 1. 启动加载器,显示“加载中...”: 2. 进行ajax请求,请求完成后更新页面数据,刷新jQuery Mobile控件样式: 3. 关闭加载器. 下面就来讲解jQuery Mobile 1.2.0 和 1.1.0 中手动显示加载器的方法(很简单,几行代码就OK了!). 首先是jQ…
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/zht666/article/details/8563025 <script> //显示加载器 function showLoader() { //显示加载器.for jQuery Mobile 1.2.…
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应…
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序.想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式.先不妨在你的浏览器中查看该应用程序. 相关链接:http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2.使用媒体查询来锁定设备 你可能会问如何使用…
简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用.使用该框架可以节省大量的js代…
(原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   1.Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序.想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式.先不妨在你的浏览器中查看该应用程序. 相关链接:http://bennolan.com/2010/11/24/backbone-jquery-…
简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用.使用该框架可以节省大量的js代…
简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用.使用该框架可以节省大量的js代…
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 如果需要在页面加载时显示加载器,页面加载完成之后关闭加载器,请参考另一篇文章:jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较 先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/z…
对jquery mobile来说,使用data-icon属性配置,可以设置元素的图标.图标没有变成右箭头,而是如下图所示: //已经设置了图标 ,data-icon="home" data-iconpos="top"<div class="ui-block-a"><a href="#" data-icon="home" data-iconpos="top" data-t…
注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> <div data-role="header" > <h1>头部</h1> </div> <div role="main" > <a href="#pagetwo" data-tra…
在移动互联网时代,HTML5开发越来越收到欢迎. 于是各种HTML5的框架都出来了.因为对于jquery的熟悉,jquery mobile 为多数人选择学习的对象.我也是众多追求者之中的一个.近期一直在开发jQuery Mobile的相关应用. 并颇有心得.再这里和大家一起分享一下. 好了,我们之间上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea…
jquery mobile这货会自动用Ajax方式. 所以需要在表单form标签添加data-ajax="false"这个元素. <form method="post" data-ajax="false">...</form>…
点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); $( function() { //默认设置,一个小圈圈在转 $('#default').live( 'tap', function() { $.mobile.loadingMessageTextVisible = false; $.mobile.showPageLoadingMsg(); } ); //小…
     在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真正fixed,如果想将header和footer真正固定住,还是很麻烦的.起初是想通过监听body的click事件,覆盖jquerymobile默认的click让header和footer能够真正固定下来,不会因为点击body而出现隐藏和出现的问题,但是设想是美好的,结果是残酷的,我在电脑的chro…
先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应用程序开发框架推荐 最终选择的是 jQuery Mobile ,官方地址:http://jquerymobile.com jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架.能工作在现有主流的智能手机和平板电脑上,且构建于 jQuery 以及 jQuery UI类库之上,用极少的…
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 01.<!DOCTYPE h…
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者…
这里是本人学习jQuery Mobile的过程,主要用于记录,过程中有不对的地方或不严谨的地方,欢予以指出纠正,非常感谢! 1.首先是下载安装以下文件: [Opera Mobile Emulator] http://www.opera.com/zh-cn/developer/mobile-emulator.在PC机上模拟移动设备,但素后来发现Myeclipse2014貌似有带模拟器. [Myeclipse2014] http://pan.baidu.com/s/1gd4PE3D 密码:lv3v…
1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="width=device-width, initial-scale=1" 2 页面跳转后样式丢失js失效 问题描述: 用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 解决办法: 将当前页面需要用到的css以及js放在<page>div内.…
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <script src=…
JQuery Mobile 和 HTML5 的 3个优点 1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobile书籍,我完成了一个可以工作的app初步版本.在此之前我没有HTML5 / JQuery Mobile开发经验.与Android和iOS相比,使用JQuery Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多. 译注:原生系统:原装的操作系统,例如Android原生系统是Goo…
本人是软件开发的初学者,总结了一点点日常所学,记录在此,主要目的是鼓励自己坚持学习,怕有一天忘记了,还能复习曾经学过的知识点. 如有大神路过为我指点迷津,纠正改错更是感激不尽,但请不要喷我这个菜鸟!谢谢 jQuery Mobile的基本使用方法和简单的知识点 安装:  <link rel="stylesheet" href="下载到本地的文件目录.min.css" media="screen" title="no title&qu…
http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  http://blog.csdn.net/liang408015204/article/details/8487201 1.给page容器头部添加后退按钮,只需在page容器中添加data-add-back-btn属性,并将属性值设置为true.显示默认为back,可修改data-back-btn-t…
jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其更有吸引力更易用. 在 jQuery Mobile 中,您可以使用以下表单控件: 文本框 搜索框 单选框 复选框 选择菜单 滑动条 翻转切换开关 当您与 jQuery Mobile 表单打交道时,应该了解以下信息: <form> 元素必须设置 method 和 action 属性 每个表单元素必须…
jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: <ul data-role="listview">   <li><a href="#"><img src="chrome.png"></a></li> </ul> 请使用…
jQuery Mobile 工具栏 工具栏元素常被放置于页眉和页脚中 - 以实现"已访问"的导航: 标题栏 页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页.选项或搜索按钮). 您可以在页眉中向左侧或/以及右侧添加按钮. 下面的代码,将向页眉标题文本的左侧添加一个按钮,并向右侧添加一个按钮: 实例: <div data-role="header">   <a href="#" data-role="butt…
在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data-role="button" 的 <a> 元素 <button> <button>按钮</button> <input> <input type="button" value="按钮"&…
先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js:http://masonry.desandro.com/ 将其整合到项目中,在页面中引入. 初始化id变量,让页面每次加载时的id都不同,避免 Ajax 加载时id重复造成难以察觉的错误. var id = "gallerycontent" + Guid.NewGuid(); 采用HTML…