jqueryMobile使用示例分享

jQuery Mobile是客户端代码，但其基于ajax技术与服务器端交互。因此拥有一个Web Service，才能更好的体验jQuery Mobile的功能。这里不打算介绍Web Service的搭建过程，朋友们可以根据自己的实际需要自行搭建。

示例一：

 
 
   
   
   
   
   
 
 
   

 
 图标
 

 
  
定位图标:
  顶部
  右侧
  底部
  左侧
 

 
 底部文本
 
 
 
 

 演示图：

示例二：

    
    




 
  可折叠块
 

 
  
   点击我 - 我可以折叠！
   
我是可折叠的内容。
  
 

 
  页脚文本
 
 

演示图

示例三：

  
  




 
  可折叠集合
 

 
  
   
    点击我 - 我可以折叠！
     
我是可折叠的内容。
   
   
    点击我 - 我可以折叠！
    
我是可折叠的内容。
   
   
    点击我 - 我可以折叠！
    
我是可折叠的内容。
   
   
    点击我 - 我可以折叠！
    
我是可折叠的内容。
   
  
 

 
  在此插入底部文本
 
 

演示图：

示例四：

.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}





 
 自定义的列
 

 
  
三列样式布局：
  
   第一个列
   第二个列
   第三个列
  
 
 

演示图

示例五：

 
  有序列表：
  

   
列表项
   
列表项
   
列表项
  
  无序列表：
  

   
列表项
   
列表项
   
列表项
  
 
 

演示图

在介绍过程中有不对的地方或不严谨的地方，欢予以纠正。感谢大家！

与其他教程不同的是，本教程都是通一个个实例进行展示。关键性介绍都会在代码中穿插。