jQuery Mobile十大经常使用技巧

目前,在移Web开发领域中,除了使用如Android,iOS系统原生提供的API进行开发外,对于Web开发人员来讲,最方便快捷的方法莫过于使用好比jQuery Mobile,Sencha Touch这样基于HTML 5的Web框架进行开发了,由于只要熟悉CSS,JavaScript则能够很轻松地运用这些移动Web开发框架进行开发。 

AD：  

在本文中，将介绍使用jQuery Mobile开发的一些经常使用的技巧，阅读对象为已经使用过jQuery Mobile进行开发的移动Web开发者。 

一、禁止截断过长的列表和按钮内容 

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

二、实现页面加载时的随机页面背景过渡效果 

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.     

 

 

  wk_ad_begin({pid : 21});wk_ad_after(21, function(){$('.ad-hidden').hide();}, function(){$('.ad-hidden').show();});    

  

 

 

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

 Javascript代码： 

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

2.  var randombg = Math.floor(Math.random()*4); //得到0到3之间的随机数   3.      $('.my-page').removeClass().addClass('bg' + randombg);   4. });   

三、禁用button 

在有的状况下，可能会须要禁止按钮的加载事件，这个时候能够继续经过以下的设置实现： 

1. $('#home-button').button("disable");   

若是要恢复可用，则设置为： 

1.  $('#home-button').button("enable");   

四、去掉页面加载时的提示信息 

若是在加载页面时，不须要显示页面加载信息时，能够经过设置一个属性来取消显示加载提示信息，以下：  

1.  $.mobile.pageLoading(true);  

若是要继续保持显示页面加载信息，则为： 

1.  $.mobile.pageLoading();  

五、建立自定义主题 

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.  <div data-role="page" data-theme="z"></div>  

六、使用自定义字体 

在移动Web应用中，有的时候须要更换字体，这样的话，能够经过使用@font-face方法实现，而且性能是十分好的。具体关于@font-face的使用，请参考

http://www.sitepoint.com/the-fontface-jquery-plugin/这篇文章。 

七、建立一个没有文本只有图片的按钮 

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

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

data-iconpos="notext">Home</a>  

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

若是不须要使用Ajax打开一个页面的连接，能够设置连接的rel属性，以下： 

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

rel="external">Home</a>  

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

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

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

十、设置页面的背景颜色 

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

 .ui-page{   

      background:#eee;   }