jquery mobile 方法收集.
1、在列表项和按钮上禁用文本截断
如果你的列表项或者按钮上是一个很长的文本,它将会被jQuery Mobile自动截断,要禁用这个截断设置,需要在CSS选择器上添加属性"white-space:normal"。例如,在按钮禁止截断:
.ui-btn-text{
white-space:normal;
}
在列表项上禁止截断:
.ui-li-desc{
white-space:norma;
}
应用自动截断,在元素上面设置"white-space:normal:nowrap"。
2、在页面加载时随机显示背景
jQuery Mobile拥有一系列在页面加载时触发的初始化事件,下面是每次页面加载完成后随机显示一个背景。
CSS如下:
.my-page { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }
.my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }
.my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }
.my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }
JavaScript如下:
$('.my-page').live("pagecreate", function() {
var randombg = Math.floor(Math.random()*4); // 0 to 3
$('.my-page').removeClass().addClass('bg' + randombg);
});
3、禁用按钮
$('#home-button').button("disable");
设置按钮可用
$('#home-button').button("enable");
4、禁止加载时弹出信息
每次加载一个不同的页面时都会触发弹出消息,确实很烦人,要禁用这种情况的发生,添加如下代码
$.mobile.pageLoading(true);
默认情况下是可见的
$.mobile.pageLoading();
5、自定义主题
jQuery Mobile框架有5款主题,主题A,主题B,主题C,主题D和主题E。但你也可以轻松为你的web app
创建一个主题。步骤如下:
(1)从jQuery Mobile CSS文件中复制任何一个主题粘贴到你自己的CSS文件中。
(2)给你的主题和CSS选择器合理命名。例如,你复制了主题C,而你想命名你的主题为主题Z,重命名.ui-btn-up-c为.ui-btn-up-z等等。
(3)、修改自定义主题的颜色和样式
(4)、应用你的自定义主题到任一元素上,仅需设置data-theme属性为z,例如:
<div data-role="page" data-theme="z">
6、应用自定义字体
你当用jQuery Mobile构建一个web app时,想用一些特殊字体,你会发现用@font-face自定义字体是一个令人相当满意的方法。
7、创建一个没有文本只有图片的按钮
有时,你可能想用一个没有文本内容仍具有按钮特性的一个按钮。要在按钮上隐藏文本,设置data-iconpos="notext",例如:
<a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a>
8、打开一个无需使用Ajax页面过渡的超链接
<a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a>
9、移除项目列表中的箭头
默认情况下,jQuery Mobile框架会为每一个列表项添加一个箭头,想要禁用箭头显示,需要在你想要移除列表项设置data-icon="false"。
<li data-icon="false"><a href="contact.html">Contact Us</a></li>
10、设置页面的背景颜色
怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的?听起来很简单,其实需要花几分钟时间才能解决。通常情况下,你需要在body元素中设置背景颜色,但是用jQuery Mobil框架,你需要设置在ui-page类中。
.ui-page{
background:#eee;
}
jquery mobile 方法收集.的更多相关文章
- 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》勘误收集
此书由程学彬 (http://weibo.com/ironbin)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.co ...
- jquery mobile 请求数据方法执行时显示加载中提示框
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...
- jquery mobile切换页面的几种方法
jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...
- jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...
- jQuery Mobile的使用方法
安装: <link rel="stylesheet" href="下载到本地的文件目录.min.css" media="screen" ...
- jQuery Mobile中$.mobile.buttonMarkup方法使用具体解释
近期在群里遇到多数网友提到$.mobile.buttonMarkup()方法的使用. 我这里就列了一下api的使用说明,以后大家看博客就能解决这个问题.如有不对的地方,请留言指出! jQuery Mo ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- jquery.mobile手机网页简要
先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...
随机推荐
- ZooKeeper使用原理
ZooKeeper的基本原理 ZNode的基本概念 ZooKeeper数据模型的结构与Unix文件系统很类似,整体上可以看作是一棵树,每个节点称做一个ZNode.每个ZNode都可以通过其路径唯一标识 ...
- 简单几何(求凸包点数) POJ 1228 Grandpa's Estate
题目传送门 题意:判断一些点的凸包能否唯一确定 分析:如果凸包边上没有其他点,那么边想象成橡皮筋,可以往外拖动,这不是唯一确定的.还有求凸包的点数<=2的情况一定不能确定. /********* ...
- 模拟 POJ 2996 Help Me with the Game
题目地址:http://poj.org/problem?id=2996 /* 题意:给出白方和黑方的棋子和对应的坐标,输出该副棋盘的样子 模拟题 + 结构体排序:无算法,switch区分读入的字符,按 ...
- 神、上帝以及老天爷[HDU2048]
神.上帝以及老天爷 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- POJ 1155 (树形DP+背包+优化)
题目链接: http://poj.org/problem?id=1155 题目大意:电视台转播节目.对于每个根,其子结点可能是用户,也可能是中转站.但是用户肯定是叶子结点.传到中转站或是用户都要花钱, ...
- python 获取类的属性
如果不清楚一个对象是否拥有某个属性,可以使用内置函数hasattr 访问一个对象的属性的方法是通过特别属性__dict__,它是一个映射,将属性名称映射到属性值 为了调试方便,可以添加下面这个函数 d ...
- jsoncpp代码实例
最近开始使用 jsoncpp,以前一直在使用cJSON,但是使用cJSON的时候经常会忘记free掉json的内存,结果造成了内存泄露,程序跑着跑着就崩溃了.所以最近把json转移到了jsoncpp上 ...
- Lucene实战(第2版)》
<Lucene实战(第2版)>基于Apache的Lucene 3.0,从Lucene核心.Lucene应用.案例分析3个方面详细系统地介绍了Lucene,包括认识Lucene.建立索引.为 ...
- 启用域中对象的"防止意外删除"功能
Get-ADObject -Filter * -SearchBase “OU=VB-User,DC=abc,DC=cn” | Set-ADOobject -ProtectedFromAccidenta ...
- How to: Fix a network printer suddenly showing as offline in Windows Vista, 7 or 8 « Robin's Blog
This post has become quite popular – so I've updated it with a bit more detail, plus some people's e ...