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应 ...
随机推荐
- centOS下安装node4.x
在以前 Node 0.x 的时候,只需要通过 yum install -y nodejs 就可以把 Node 安装好了.但是 yum 安装的 Node 只能安装到 0.10.40 版的,并不能安装到 ...
- 合成模式(Composite)-结构型
原理 合成模式属于对象的结构模式,有时又叫做“部分——整体”模式.合成模式将对象组织到树结构中,可以用来描述整体与部分的关系.合成模式可以使客户端将单纯元素与复合元素同等看待. 有时候又叫做部分-整体 ...
- Windows自带Android模拟器启动失败
Windows自带Android模拟器启动失败 错误信息:[Critical] XDE Exit Code: InvalidArguments (3)XDE执行的第三个参数为设置内存值,形式为/mem ...
- 2016 Multi-University Training Contest 7
6/12 2016 Multi-University Training Contest 7 期望 B Balls and Boxes(BH) 题意: n个球放到m个盒子里,xi表示第i个盒子里的球的数 ...
- 游戏 tabpanel
using UnityEngine; using System.Collections; public class La : MonoBehaviour { private int select; p ...
- winform学习2-datagridview数据绑定
1.datagridview.clearSelection()清除默认的选中项 2.列数据显示,首先列必须是显示状态, 3.布局-单元格内文字内容居中显示,示例:外观-defaultCellStyle ...
- JavaScript事件大全3
//无模式的提示框 //屏蔽按键 <html> <head> <meta http-equiv="Content-Type" content=& ...
- Qt Examples Qt实例汇总
ActiveQt Examples Using ActiveX from Qt applications. Animation Framework Examples Doing animations ...
- System.getProperty
我们可以通过System.getProperty("user.home")读取JAVA系统的user.home属性的值.
- hdu 3348 coins
这道题算是一道很经典的题,很好的诠释了贪心和动态规划的不同功能.求最少钱的数量用贪心就够了,但是求最多钱的数量要用到动态规划的思想,每步都尽量保留最大 数量.具体看程序注解: #include&quo ...