10个你必须知道的jQueryMobile代码片段

原创文章，转载请注明： 转载自http://www.yiiyaa.net/

本文链接地址： http://www.yiiyaa.net/1426

0、jQuery Mobile生命周期函数必须在 jQuery Mobile脚本加载之前声明，否则会完全不起作用！

拿“mobileinit”来说，我一开始的时候这样写，坑爹的是jqm根本没有任何反应！

<script src="Jquery.js"></script>

<script src="Jquery-mobile.js"></script> 

<script type="text/javascript">

$(document).bind("mobileinit", function(){

 alert("jquery mobile");

}); 

</script> 

正确的写法：

<script src="Jquery.js"></script>

<script type="text/javascript">

$(document).bind("mobileinit", function(){

 alert("jquery mobile");

}); 

</script>

<script src="Jquery-mobile.js"></script>

 

 

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;
}

 

<!-- Begin anyShare -->