Zoomla!逐浪CMS官网

最新版本号[免费下载]
逐浪软件

jQuery Mobile几大常用技巧


作者:本站编辑 发布时间:2015-11-25 来源:本站原创 点击数:

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: transparent url(../images/bg.jpg) 0 0 no-repeat; }  

  2.        

  3.     .my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }  

  4.        

  5.     .my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }  

  6.        

  7.     .my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }  


  8.  Javascript代码:


  9.     $('.my-page').live("pagecreate", function() {  

  10.      var randombg = Math.floor(Math.random()*4); //获得0到3之间的随机数  

  11.          $('.my-page').removeClass().addClass('bg' + randombg);  

  12.     });  


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五种不同的主题,但可以自定义主题,步骤如下:

    从jQuery Mobile的任意一个定义主题的CSS文件中,复制其内容到自己定义的CSS文件中。
    给要自定义的CSS主题一个恰当的名称并且重新命名CSS文件,注意命名必须是(a-z)英文字母,比如你是从jQuery Mobile的主题c的样式文件中复制的,则可以将主题命名为Z,则复制过来的内容中,比如要将.ui-btn-up-c改为.ui-btn-up-z,.ui-body-c改为.ui-body-z,如此类推。
    改变新建立的自定义主题的颜色和CSS文件。
    最后,需要在页面中,应用新定义的主题样式,如下:

         <div data-role="page" data-theme="z"></div> 

6、使用自定义字体

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

7、创建一个没有文本只有图片的按钮

有时,可能想用一个没有文本内容仍具有按钮特性的一个按钮。如果要在按钮上隐藏文本,设置data-iconpos="notext",例如:

  1. <a href="../index.html" data-icon="grid" claa="ui-btn-right" data-iconpos="notext">Home</a>


8、打开一个无需使用Ajax页面过渡的超链接

如果不需要使用Ajax打开一个页面的链接,可以设置链接的rel属性,如下:

  1. <a href="../index.html" data-icon="grid" class="ui-btn-right" rel="external">Home</a>


9、移除项目列表中的箭头

默认情况下,jQuery Mobile框架会为每一个列表项添加一个箭头,想要禁用箭头显示,需要在想要移除列表项设置data-icon="false"。

  1.   <li data-icon="false"><a href="contact.html">Contact Us</a></li>  


10、设置页面的背景颜色

怎样在不修改jQuery Mobile样式下设置一个页面背景颜色的?听起来很简单,其实需要花几分钟时间才能解决。通常情况下,需要在body元素中设置背景颜色,但是用jQuery Mobile框架,需要设置在ui-page类中。

  1.     .ui-page{  

  2.          background:#eee;  

  3.     }



本文责任编辑:  加入会员收藏夹 点此参与评论>>
当前网址:
复制本网址-发给QQ/微信上的朋友
下一篇文章:jQuery Mobile设计思想

+什么是CMS

CMS(Content Management System)是网站内容管理系统简称, 互联网上每个网站(无论大小门户)其后台都由专业CMS系统支撑- Zoomla!逐浪CMS作为国内高端CMS与WEB应用典范,首创第3代CMS理念,专注底层核心技术研发,以云技术、创新精神构建行业新成就,提供从网站内核到电商、办公、移动一体化的开发体验!

7×24小时服务热线 021-50391046 技术支持:13177777714
©Copyright 2003- 逐浪软件z01.com版权所有 All rights reserved
经营许可证号:工商3601002021063 沪ICP备09077823号 沪公网安备31011502000316号
本网站基于®Zoomla!逐浪CMS内核开发

ISO9001国际认证企业 CSDN外包TOP资质 鉴赏MTV电广视告 7×24小时全天候贴心服务 社会征信网