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应 ...
随机推荐
- C# 方法调用的切换器 Update 2015.02.02
在编写应用程序时,我们经常要处理这样的一组对象,它们的类型都派生自同一个基类,但又需要为每个不同的子类型应用不同的处理方法. 通常的做法,最简单的就是用很多 if-else 去判断各自的类型,如下面的 ...
- Girls and Boys
Girls and Boys Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- bug 调试了一个下午外加半个晚上的bug
public void queryTaskResult2() throws Exception { HttpServletRequest request = ServletActionContext. ...
- CSS:权重和层叠规则决定了其优先级
首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...
- mergeSort
package POJ; public class Main { /** * * MergeSort * */ public static void main(String[] args) { Mai ...
- YUV YCbCr
一,介绍 YUV是一种颜色空间 其中“Y”表示明亮度(Luminance或Luma),也就是灰阶值: 而“U”和“V” 表示的则是色度(Chrominance或Chroma),作用是描述影像色彩及饱和 ...
- DELPHI的split函数的各种实现方法(转)
一.单字符 function split(s,s1:string):TStringList;beginResult:=TStringList.Create;while Pos(s1,s)>0 d ...
- ARC指南3 - @property
本章介绍引入ARC后@property的使用,跟ARC之前的还是很不一样的 一..h和.m文件的变化说明 1.对于.h头文件,主要是将属性定义由retain变为strong @property ( ...
- 用java简单的实现单链表的基本操作
package com.tyxh.link; //节点类 public class Node { protected Node next; //指针域 protected int data;//数据域 ...
- sqlserver ldf过大处理方法
第一步 DUMP TRANSACTION databasename WITH NO_LOG -- 第二步:截断事务日志 BACKUP LOG databasename WITH ...