jQueryMobile十大常用技巧

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

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

在jQuery mobile中，如果列表或者按钮中文字的内容过长，jQuery Mobile会自动截断其超过长度的内容，但如果不希望这样的话，可以在CSS样式中增加如下设置即可，比如下面的是针对按钮的CSS样式设置：

 
 
 

  
  
  
　　.ui-btn-text { 
  
  
  
white-space: normal; 
  
  
  
}
 
 
 

下面的是针对列表的CSS样式设置

 
 
 

  
  
  
 .ui-li-desc { 
  
  
  
white-space: normal; 
  
  
  
} 
 
 
 

如果要恢复对文字的截断,则继续设置CSS为white-space: nowrap;

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

jQuery Mobile中,当需要实现页面加载时,可以有很多的页面加载事件可供使用。比如下面的CSS和JavaScript代码，可以实现页面加载时的随机页面背景过渡效果。

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到3之间的随机数 
  
  
  
　　　　　    $('.my-page').removeClass().addClass('bg' + randombg); 
  
  
  
}); 
 
 
 

3、禁用button

在有的情况下，可能会需要禁止按钮的加载事件，这个时候可以继续通过如下的设置实现：

 
 
 

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

如果要恢复可用，则设置为：

 
 
 

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

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

如果在加载页面时，不需要显示页面加载信息时，可以通过设置一个属性来取消显示加载提示信息，如下：　

 
 
 

  
  
  
　$.mobile.pageLoading(true);
 
 
 

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

 
 
 

  
  
  
　$.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. 最后，需要在页面中，应用新定义的主题样式，如下：