Web前端开发学习之路——JQuery Mobile UI组件

套用UI组件

jQuery Mobile各种可视化组件的语法大多数与HTML5标记大同小异，这里不再阐述，仅列出这些常用的组件。由于按钮（Button）和列表（List View）功能变化比较大，后面将对其进行详细介绍。

文本框（Text Input）

input type="text" name="uname" id="uid" value="">

范围滑块（Range Slider）

单选按钮（Radio Button）

    
最喜欢的水果：
    
    苹果
    
    香蕉
    
    柠檬

复选框（Check Box）

/*第一种写法*/
我同意
/*第二种写法*/

我不同意

选择菜单（Select Menu）

每天上网的时长：

    少于1小时
    1小时
    2小时
    3小时
    3小时以上

按钮(Button)

链接按钮(link button)

在前面的范例种曾经利用标记产生文字超链接，让页面能够进行切换，如果要让超链接通过按钮显示，就要使用data-role="button"属性，语法如下：

第二页

data-mini="true"属性可以让按钮及字体小一号显示

表单按钮（form button）

也可以使用data-icon属性再加入小图标，语法如下：

删除

图标参数及说明

图标参数	说明
data-icon="delete"	删除
data-icon="arrow-l"	向左箭头
data-icon="arrow-r"	向右箭头
data-icon="arrow-u"	向上箭头
data-icon="arrow-d"	向下箭头
data-icon="plus"	加号
data-icon="minus"	减号
data-icon="check"	复选
data-icon="gear"	齿轮
data-icon="refresh"	重新整理
data-icon="forward"	前进
data-icon="back"	后退
data-icon="star"	星号
data-icon="grid"	表格
data-icon="alert"	警告
data-icon="info"	信息
data-icon="home"	首页
data-icon="search"	搜索

小图片默认会显示在按钮的左侧，如果想更换图标的位置，只要用data-iconpos属性指定上（top）、下（bottom）、右（right）位置即可，语法如下

警告
主页

如果不想出现文字，将data-iconpos的属性值指定为notext，就只会显示按钮而没有文字了。你会发现制作完成的按钮会以屏幕宽度为自身的宽度，如果想要制作紧凑的按钮，可以加上data-inline="true"属性。

星号
重新调整
搜索

组按键

有时候想把按钮排在一起，例如导航栏一整排的按钮，可以先用data-role="contrlgroup"属性定义为组，再将按钮放在这个

里面，代码如下：

    首页
    运动
    电影

显示的按钮默认为垂直排列，用data-type="horizontal"属性指定为水平即可，如下表达式：

列表

List View是移动设备最常见的组件，因为手机的屏幕小，所以数据适合以列表方式显示，例如商品列表、购物车、新闻等都很适合利用List View组件来产生。再jQuery Mobile中要操作这样的UI非常简单，只要用编号列表（ordered list）

标记加上
1. 标记，或是项目列表(unordered list)
   标记加上
   • 标记，并在
     标记或
     标记中加上data-role="listview"属性即可。下面以
     标记为例进行说明，代码如下：

     
         
     语文 
         
     数学 
         
     英语 
     

     执行结果如下：

     

     我们还可以将data-insert属性设为true，让listview不要与屏幕同宽并加上圆角，代码如下：

     

     加入图片和说明

     
         
         
     语文
         
     时间：星期一 人数：15人
         
     

     执行结果如下，这就跟我们之前学过的在HTML文件中加入图片和文字一样简单：

     

     拆分按钮列表(Split button list)

     如果要将列表与按钮分开，也就是单击列表时连接到某个网页，而按钮又可链接到另一个网页，这就可以使用拆分按钮列表，程序很简单，只需要在

     1. 标记内加入两组标记，jQuery Mobile就会自动按照data-icon属性设置的样式将用户界面处理好，代码如下：

        
                
                
        数学
                
        时间：星期一 人数：20人
            
                
            

        执行结果如下：

        

        计数泡泡(Count bubble)

        计数泡泡在列表中显示数字时使用，只要在

     2. 标记中加入如下标记即可：

        
                
                
        英语
                
        时间：星期一 人数：18人
                18
            
                
        

        执行结果如下：