jQuery Mobile十大常用技巧

1、禁止宀窜褓沙截断过长的列表和按钮内容在jQuery mobile中，如果列表或者按钮中文字的内容过长，jQuery Mobile会自动截断其超过长度的内容，但剧安颌儿如果不希望这样的话，可以在CSS样式中增加如下设置即可，比如下面的是针对按钮的CSS样式设置：1..ui-btn-text{ 2.white-space:normal; 3.}下面的是针对列表的CSS样式设置1..ui-li-desc{ 2.white-space:normal; 3.} 如果要恢复对文字的截断,则继续设置CSS为white-space: nowrap;

2、实现页面加载时的随机页面背景过渡效果jQuery Mobile中,当需要实现页面加载时,可以有很多的页面加载事件可供使用。比如下面的CSS和JavaScript代码，可以实现页面加载时的随机页面背景过渡效果。CSS代码：1.my-page{background:transparenturl(../images/bg.jpg)00no-repeat;} 2. 3..my-page.bg1{background:transparenturl(../images/bg-1.jpg)00no-repeat;} 4. 5..my-page.bg2{background:transparenturl(../images/bg-2.jpg)00no-repeat;} 6. 7..my-page.bg3{background:transparenturl(../images/bg-3.jpg)00no-repeat;} 　Javascript代码：1.$('.my-page').live("pagecreate",function(){ 2.　varrandombg=Math.floor(Math.random()*4);//获得0到3之间的随机数3.　$('.my-page').removeClass().addClass('bg'+randombg); 4.});

3、禁用button在有的情况下，可能会需要禁止按钮的加载事件，这个时候可以继续通过如下的设置实现：1.$('#home-button').button("disable"); 如果要恢复可用，则设置为：1.　$('#home-button').button("enable");

4、去掉页面加载时的提示信息如果在加载页面时，不需要显示页面加载信息时，可以通过设置一个属性来取消显示加载提示信息，如下：　1.　$.mobile.pageLoading(true);如果要继续保持显示页面加载信息，则为：1.　$.mobile.pageLoading();

5、创建自定义主题jQuery Mobile本身提供了A-E五种不同的主题，但可以自定义主题，步骤如下：1.从jQuery Mobile的任意一个定义主题的CSS文件中，复制其内容到自己定义的CSS文件中。2.给要自定义的CSS主题一个恰当的名称并且重新命名CSS文件，注意命名必须是(a-z)英文字母，比如你是从jQuery Mobile的主题c的样式文件中复制的，则可以将主题命名为Z,则复制过来的内容中，比如要将.ui-btn-up-c改为.ui-btn-up- z,.ui-body-c改为.ui-body-z，如此类推。3.改变新建立的自定义主题的颜色和CSS文件。4.最后，需要在页面中，应用新定义的主题样式，如下：1.　<divdata-role="page"data-theme="z"></div>

6、使用自定义字体在移动Web应用中，有的时候需要更换字体，这样的话，可以通过使用@font-face方法实现，并且性能是十分好的。

7、创建一个没有文本只有图片的按钮有时，可能想用一个没有文本内容仍具有按钮特性的一个按钮。如果要在按钮上隐藏文本，设置data-iconpos="notext"，例如：1.<ahref="../index.html"data-icon="grid"claa="ui-btn-right"data-iconpos="notext">Home</a>

8、打开一个无需使用Ajax页面过渡的超链接如果不需要使用Ajax打开一个页面的链接，可以设置链接的rel属性，如下：1.<ahref="../index.html"data-icon="grid"class="ui-btn-right"rel="external">Home</a>

9、移除项目列表中的箭头默认情况下，jQuery Mobile框架会为每一个列表项添加一个箭头，想要禁用箭头显示，需要在想要移除列表项设置data-icon="false"。1.<lidata-icon="false"><ahref="contact.html">ContactUs</a></li>

10、设置页面的背景颜色怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的？听起来很简单，其实需要花几分钟时间才能解决。通常情况下，需要在body元素中设置背景颜色，但是用jQuery Mobile框架，需要设置在ui-page类中。1..ui-page{ 2.background:#eee; 3.}