jquery mobile标 jQuery Mobile 标

jquery mobile标

jQuery Mobile是一个用于开发支持多种移动设备的网页应用程序的开源JavaScript库。它是基于jQuery和jQuery UI的，但是它有自己独特的HTML5和CSS3样式，使得它能够在不同的设备上运行。

jQuery Mobile标签可以帮助开发人员快速创建功能丰富、可访问性高、易于使用的移动Web应用程序。它提供了一套标准化的HTML标记，可以帮助开发人员快速创建具有相同外观和感觉的Web应用程序，而无需重新学习新语法或重新写代码。

<div data-role="page"> 
    <div data-role="header"> 
        <h1>Page Title</h1> 
    </div> 

    <div data-role="content"> 
        <p>Page content goes here.</p> 
    </div> 

    <div data-role="footer"> 
        <h4>Page Footer</h4> 
    </div> 
<
jQuery Mobile 图标
jQuery Mobile 图标 
我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标。



 
jQuery 图标
 
在 jQuery Mobile 中，如需为按钮添加图标，请使用 data-icon 属性：     
<a href="#anylink" data-role="button" data-icon="refresh">Refresh Page</a>
提示：在 <button> 或 <input> 元素中，您也可以使用 data-icon 属性。
下面我们列出了 jQuery Mobile 提供的所有可用图标：

    

        

            
属性值
            
描述
            
图标
            
实例
        
        

            
data-icon="arrow-l"
            
左箭头
            

            
尝试一下
            
        
        

            
data-icon="arrow-r"
            
右箭头
            

            
尝试一下
            
        
        

            
data-icon="arrow-u"
            
上箭头
            

            
尝试一下
            
        
        

            
data-icon="arrow-d"
            
下箭头
            

            
尝试一下
            
        
        

            
data-icon="plus"
            
加号
            

            
尝试一下
            
        
        

            
data-icon="minus"
            
减号
            

            
尝试一下
            
        
        

            
data-icon="delete"
            
删除
            

            
尝试一下
            
        
        

            
data-icon="check"
            
检查
            

            
尝试一下
            
        
        

            
data-icon="home"
            
首页
            

            
尝试一下
            
        
        

            
data-icon="info"
            
信息
            

            
尝试一下
            
        
        

            
data-icon="grid"
            
网格
            

            
尝试一下
            
        
        

            
data-icon="gear"
            
工具
            

            
尝试一下
            
        
        

            
data-icon="search"
            
搜索
            

            
尝试一下
            
        
        

            
data-icon="back"
            
后退
            

            
尝试一下
            
        
        

            
data-icon="forward"
            
前进
            

            
尝试一下
            
        
        

            
data-icon="refresh"
            
更新
            

            
尝试一下
            
        
        

            
data-icon="star"
            
星号
            

            
尝试一下
            
        
        

            
data-icon="alert"
            
警告
            

            
尝试一下