JQuery Mobile 教程

来源：互联网发布：网络网页优化方案编辑：程序博客网时间：2024/05/29 16:29

一、Jquery Mobile 页面的基本组成

1.通常情况移动设备以900px 的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同

<meta name="viewport" content="width=device-width" />

2.页面基本组成

data-role="page" :是显示在浏览器中的页面
data-role="header" :创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" :定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" :创建页面底部的工具栏

<!DOCTYPE html><html><head><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head><body><div data-role="page" id="pageone">  <div data-role="header">  <h1>欢迎访问我的主页</h1>  </div>  <div data-role="content">  <p>欢迎！</p>  </div>  <div data-role="footer">  <h1>页脚文本</h1>  </div></div> </body></html>

显示页面基本组成代码

二、jQuery Mobile 跳转页面

<a href="#page2" data-transition="slide"> // 通过id跳转<a href="dialog/index.html" data-role="button" data-ajax="false" >Cancel</a> // 通过文件跳转

页面跳转常用参数

<a> 页面跳转常用参数参数说明源码效果 data-role="button"将<a>转为按钮样式下面Button的创建有写到 data-ajax="true"

jquery mobile 是默认通过ajax 切换页面的，

当通过.html 跳转页面时，浏览器可能报错，

需要加上 data-ajax="false"

data-rel="dialog" 链接时创建一个对话框

<a href="#pagetwo" data-rel="dialog">转到页面二</a>

View Code

亲自试一试 data-rel="back" 如需创建后退按钮，请使用（会忽略 href 值）

<a href="#" data-role="button" data-rel="back">后退</a>

View Code

亲自试一试 data-theme="c" 主题（可选a、b、c、d、e） ---- data-transition="slide" 页面切换过渡效果(几种过渡效果见下表) 无见下表

data-transition 属性：页面切换过渡效果

data-transition 属性页面切换效果过渡描述效果

fade

默认。淡入淡出到下一页。亲自试一试

flip

从后向前翻动到下一页。亲自试一试flow

抛出当前页面，引入下一页。

亲自试一试

pop

像弹出窗口那样转到下一页。

亲自试一试

slide

从右向左滑动到下一页。

亲自试一试

slidefade

从右向左滑动并淡入到下一页。

亲自试一试

slideup

从下到上滑动到下一页。

亲自试一试

slidedown

从上到下滑动到下一页。

亲自试一试

turn

转向下一页。

亲自试一试

none

无过渡效果。

亲自试一试

提示：在 jQuery Mobile 中，淡入淡出效果在所有链接上都是默认的（如果浏览器支持）。

提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为 "reverse" 的 data-direction 属性。在后退按钮上是默认的。

三、在 jQuery Mobile 中创建按钮

1、button 的创建

创建按钮的三种方式创建方式代码效果 <button>按钮</button>

<button>按钮</button>

View Code

亲自试一试 <input type="button" value="按钮">

<input type="button" value="按钮">

View Code

亲自试一试 <a href="#" data-role="button">按钮</a>

<a href="#" data-role="button">按钮</a>

View Code

亲自试一试

2、button 属性

Button 可选属性属性说明代码效果inline="true"按钮宽度自适应文本

<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>

View Code

亲自试一试

data-role="controlgroup"

data-type="horizontal | vertical"

组合按钮

水平/垂直组合

  <div data-role="content">    <div data-role="controlgroup" data-type="horizontal">    <p>水平分组：</p>    <a href="#" data-role="button">按钮 1</a>    <a href="#" data-role="button">按钮 2</a>    <a href="#" data-role="button">按钮 3</a>    </div><br>        <div data-role="controlgroup" data-type="vertical">    <p>垂直分组（默认）：</p>    <a href="#" data-role="button">按钮 1</a>    <a href="#" data-role="button">按钮 2</a>    <a href="#" data-role="button">按钮 3</a>    </div>  </div>

View Code

亲自试一试data-corners="false"规定按钮是否有圆角，默认true

<!-- 不带圆角的按钮 --><a href="#" data-role="button" data-corners="false">按钮</a>

View Code

亲自试一试data-mini="true"规定是否是小型按钮，默认false

<!-- 迷你按钮 --><a href="#" data-role="button" data-mini="true">按钮</a>

View Code

亲自试一试data-shadow="false"规定按钮是否有阴影，默认true

<!-- 不带阴影的按钮 --><a href="#" data-role="button" data-shadow="false">按钮</a>

View Code

亲自试一试

data-icon="search"

data-iconpos="top | bottom | right | left"

图标类型：（常用图标见文章末尾）

图标位置：（上、下、左、右）

  <div data-role="content">    <p>定位图标：</p>    <a href="#link" data-role="button" data-icon="search" data-iconpos="top">Top</a>    <a href="#link" data-role="button" data-icon="search" data-iconpos="right">Right</a>    <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">Bottom</a>    <a href="#link" data-role="button" data-icon="search" data-iconpos="left">Left</a>  </div>

View Code

亲自试一试data-iconpos="notext"只显示图标

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>

View Code

亲自试一试

常用图标在最下面：

四、jQuery Mobile 工具栏

工具栏按钮属性说明代码效果标题栏两侧按钮

<div data-role="header">    <a href="#" data-role="button" data-icon="home">首页</a>    <h1>欢迎访问我的主页</h1>    <a href="#" data-role="button" data-icon="search">搜索</a> </div>

View Code

亲自试一试

class="ui-btn-right"

标题栏右侧按钮

<div data-role="header">    <h1>欢迎访问我的主页</h1>    <a href="#" data-role="button" class="ui-btn-right" data-icon="search">搜索</a></div>

View Code

亲自试一试

class="ui-btn"

标题栏按钮居中

  <div data-role="footer" class="ui-btn">    <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>    <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>    <a href="#" data-role="button" data-icon="plus">转播到QQ空间</a>  </div>

View Code

亲自试一试

data-role="controlgroup"

data-type="horizontal"

标题栏按钮组合

  <div data-role="footer" class="ui-btn">    <div data-role="controlgroup" data-type="horizontal">      <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>      <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>      <a href="#" data-role="button" data-icon="plus">转播到QQ空间</a>    </div>  </div>

View Code

亲自试一试

data-position="fixed"

标题栏Fixed 定位

<div data-role="header" data-position="fixed"></div><div data-role="footer" data-position="fixed"></div>

View Code

亲自试一试

data-position="fixed"

data-tap-toggle="false"

启用全面定位，使用 data-position="fixed"，

并向该元素添加 data-tap-toggle 属性

<div data-role="header" data-position="fixed" data-fullscreen="true"></div><div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

View Code

亲自试一试

五、jQuery Mobile导航栏

jQueryMobile 导航栏属性说明代码效果 data-role="navbar" :<div>创建导航栏

<div data-role="header">  <div data-role="navbar">    <ul>      <li><a href="#anylink">首页</a></li>      <li><a href="#anylink">页面二</a></li>      <li><a href="#anylink">搜索</a></li>    </ul>  </div></div>

View Code

亲自试一试class="ui-btn-active" :<li>按钮默认选中效果

<li><a href="#" class="ui-btn-active" data-icon="home">首页</a></li>

View Code

亲自试一试class="ui-btn-active ui-state-persist" :<li>

对于多个页面，为每个按钮设置“被选”外观，

以表示用户正在浏览该页面

<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>

View Code

亲自试一试data-iconpos="left" :<div>在导航栏中放置图标

  <div data-role="footer">    <div data-role="navbar" data-iconpos="left">      <ul>        <li><a href="#" data-icon="plus">更多</a></li>        <li><a href="#" data-icon="minus">更少</a></li>        <li><a href="#" data-icon="delete">删除</a></li>        <li><a href="#" data-icon="check">喜爱</a></li>        <li><a href="#" data-icon="info">信息</a></li>      </ul>    </div>  </div>

View Code

亲自试一试
--显示在内容中的导航栏

  <div data-role="content">    <div data-role="navbar">      <ul>        <li><a href="#" data-icon="plus">更多</a></li>        <li><a href="#" data-icon="minus">更少</a></li>        <li><a href="#" data-icon="delete">删除</a></li>        <li><a href="#" data-icon="check">喜爱</a></li>        <li><a href="#" data-icon="info">信息</a></li>      </ul>    </div>  </div>

View Code

亲自试一试--页脚中的导航栏

  <div data-role="footer">    <div data-role="navbar">      <ul>        <li><a href="#" data-icon="plus">更多</a></li>        <li><a href="#" data-icon="minus">更少</a></li>        <li><a href="#" data-icon="delete">删除</a></li>        <li><a href="#" data-icon="check">喜爱</a></li>        <li><a href="#" data-icon="info">信息</a></li>      </ul>    </div>  </div>

View Code

亲自试一试--五个以上的导航栏按钮

  <div data-role="content">    <div data-role="navbar">      <ul>        <li><a href="#" data-icon="plus">更多</a></li>        <li><a href="#" data-icon="minus">更少</a></li>        <li><a href="#" data-icon="delete">删除</a></li>        <li><a href="#" data-icon="check">喜爱</a></li>        <li><a href="#" data-icon="info">信息</a></li>        <li><a href="#" data-icon="forward">向前</a></li>        <li><a href="#" data-icon="back">向后</a></li>        <li><a href="#" data-icon="star">星形</a></li>        <li><a href="#" data-icon="gear">选项</a></li>        <li><a href="#" data-icon="search">搜索</a></li>      </ul>    </div>  </div>

View Code

亲自试一试

六、可折叠块

属性

说明代码效果 data-role="collapsible" :<div>创建：可折叠的内容块

  <div data-role="content">    <div data-role="collapsible">      <h1>点击我 - 我可以折叠！</h1>      <p>我是可折叠的内容。</p>    </div>  </div>

View Code

亲自试一试

data-collapsed="false" :<div>

默认展开

  <div data-role="content">    <div data-role="collapsible" data-collapsed="false">      <h1>点击我 - 我可以折叠！</h1>      <p>我是可折叠的内容。</p>    </div>  </div>

View Code

亲自试一试data-role="collapsible-set" :<div>可折叠集合

  <div data-role="content">    <div data-role="collapsible-set">      <div data-role="collapsible">        <h3>点击我 - 我可以折叠！</h3>          <p>我是可折叠的内容。</p>      </div>      <div data-role="collapsible">        <h3>点击我 - 我可以折叠！</h3>        <p>我是可折叠的内容。</p>      </div>      <div data-role="collapsible">        <h3>点击我 - 我可以折叠！</h3>        <p>我是可折叠的内容。</p>      </div>      <div data-role="collapsible">        <h3>点击我 - 我可以折叠！</h3>        <p>我是可折叠的内容。</p>      </div>    </div>  </div>

View Code

亲自试一试data-inset="false"无圆角

    <div data-role="collapsible" data-inset="false">      <h1>这是没有圆角的可折叠内容块。</h1>      <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉圆角。</p>    </div>

View Code

亲自试一试data-mini="true" 迷你折叠集合

  <div data-role="content">    <div data-role="collapsible" data-mini="true">      <h1>点击我 - 我是可折叠的！</h1>      <p>我是可折叠的内容。</p>    </div>  </div>

View Code

亲自试一试

data-collapsed-icon="arrow-d"

data-expanded-icon="arrow-u"

内容展开时图标

内容折叠时图标

  <div data-role="content">    <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">      <h1>data-collapsed-icon 规定按钮的图标。</h1>      <p>data-expanded-icon 规定内容被展开时按钮的图标。</p>    </div>  </div>

View Code

亲自试一试 --嵌套可折叠内容块

  <div data-role="content">    <div data-role="collapsible">      <h1>点击我 - 我可以折叠！</h1>      <p>我是可折叠的内容。</p>      <div data-role="collapsible">        <h1>点击我 - 我是嵌套的可折叠块！</h1>        <p>我是嵌套的可折叠块中被展开的内容。</p>      </div>    </div>  </div>

View Code

亲自试一试

七、列表视图

jQuery Mobile 列表视图属性
说明代码效果 data-role="listview" :<ul> 有序列表 (<ol>) 和无序列表 (<ul>)

<ol data-role="listview">  <li><a href="#">列表项</a></li></ol><ul data-role="listview">  <li><a href="#">列表项</a></li></ul>

View Code

亲自试一试 data-inset="true" :<ul> 为列表添加圆角和外边距

<ul data-role="listview" data-inset="true">

View Code

亲自试一试 data-role="list-divider" :<li> 列表分隔符

<ul data-role="listview"> <li data-role="list-divider">欧洲</li>  <li><a href="#">法国</a></li>  <li><a href="#">德国</a></li></ul>

View Code

亲自试一试 data-autodividers="true" :<ul> 按字母顺序排列，自动添加分隔符

<div data-role="content">  <ul data-role="listview" data-autodividers="true" data-inset="true">    <li><a href="#">Adele</a></li>    <li><a href="#">Agnes</a></li>    <li><a href="#">Albert</a></li>    <li><a href="#">Billy</a></li>    <li><a href="#">Bob</a></li>    <li><a href="#">Calvin</a></li>    <li><a href="#">Cameron</a></li>    <li><a href="#">Chloe</a></li>    <li><a href="#">Christina</a></li>    <li><a href="#">Diana</a></li>    <li><a href="#">Gabriel</a></li>    <li><a href="#">Glen</a></li>    <li><a href="#">Ralph</a></li>    <li><a href="#">Valarie</a></li>  </ul></div>

View Code

亲自试一试 data-filter="true" :<ul>

<ul data-role="listview" data-filter="true"></ul>

View Code

亲自试一试 data-filter-placeholder="搜索" :<ul> 搜索框默认文字

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">

View Code

亲自试一试列表图片列表图片（<IMG>放在<li>的第一个<a>里面）

<ul data-role="listview">  <li><a href="#"><img src="chrome.png"></a></li></ul>

View Code

亲自试一试带有文字信息的列表带有信息的列表

<ul data-role="listview">  <li>    <a href="#">    <img src="chrome.png">    <h2>Google Chrome</h2>    <p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>    </a>  </li></ul>

View Code

亲自试一试 class="ui-li-icon" :<IMG> 列表图标

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

View Code

亲自试一试右侧图标按钮右侧拆分按钮（需要在 <li> 元素内放置两个链接<a>）

<ul data-role="listview">  <li>    <a href="#"><img src="chrome.png"></a>    <a href="#">Some Text</a>  </li></ul>

View Code

亲自试一试 class="ui-li-count" :<li><a><span>

计数泡沫，使用行内元素，比如 <span>

设置 class "ui-li-count" 属性并添加数字

<ul data-role="listview">  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li></ul>

View Code

亲自试一试 data-icon="plus" :<li> 修改默认列表图标

<li data-icon="plus"><a href="#">11</a></li>

View Code

亲自试一试可折叠列表可折叠列表，collapsible 套用 listview

  <div data-role="content">    <div data-role="collapsible">    <h4>A</h4>    <ul data-role="listview">      <li><a href="#">Adam</a></li>      <li><a href="#">Angela</a></li>    </ul>  </div>    <div data-role="collapsible">    <h4>B</h4>    <ul data-role="listview">       <li><a href="#">Bill</a></li>       <li><a href="#">Bob</a></li>    </ul>    </div>    <div data-role="collapsible">    <h4>C</h4>    <ul data-role="listview">      <li><a href="#">Calvin</a></li>      <li><a href="#">Cameron</a></li>      <li><a href="#">Christina</a></li>    </ul>    </div>  </div>

View Code

亲自试一试 class="ui-li-aside" :<li>下面的文字列表文字贴边（右边）

<p class="ui-li-aside">Re: Appointment</p>

View Code

亲自试一试

八、表单元素

1、当您与 jQuery Mobile 表单打交道时，应该了解以下信息：

<form> 元素必须设置 method 和 action 属性
每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。
每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id。

<form method="post" action="demoform.asp">  <label for="fname">First name:</label>  <input type="text" name="fname" id="fname"></form>

属性说明代码效果文本框<input type = "text">class="ui-hidden-accessible" :<lable>隐藏 label

<form method="post" action="demoform.asp">  <label for="fname" class="ui-hidden-accessible">姓名：</label>  <input type="text" name="fname" id="fname" placeholder="姓名..."></form>

View Code

亲自试一试data-role="none" :<input>去除jQuery Mobile 自动加的样式

<label for="fname">First name:</label><input type="text" name="fname" id="fname" data-role="none">

View Code

亲自试一试placeholder="sometext" :<input><input type = "text">默认显示文字

<form method="post" action="demoform.asp">  <div data-role="fieldcontain">    <label for="fullname">全名：</label>    <input type="text" name="fullname" id="fullname">    <label for="bday">生日：</label>    <input type="date" name="bday" id="bday">    <label for="email">电邮：</label>    <input type="email" name="email" id="email" placeholder="您的邮件地址..">  </div></form>

View Code

亲自试一试多行文本框<textarea> <textarea>多行文本框：<textarea>

<form method="post" action="demoform.asp">  <div data-role="fieldcontain">    <label for="info">Additional Information:</label>    <textarea name="addinfo" id="info"></textarea>  </div></form>

View Code

亲自试一试搜索框<input type="search"> type="search"搜索框，search是 HTML5 中的新类型

<form method="post" action="demoform.asp">  <div data-role="fieldcontain">    <label for="search">Search:</label>    <input type="search" name="search" id="search">  </div></form>

View Code

亲自试一试单选按钮<input type="radio"> type="radio"

单选按钮，在 <fieldset> 元素中包装单选按钮。

通过<legend> 元素来定义 <fieldset> 的标题

<form method="post" action="demoform.asp">  <fieldset data-role="controlgroup">    <legend>Choose your gender:</legend>      <label for="male">Male</label>      <input type="radio" name="gender" id="male" value="male">      <label for="female">Female</label>      <input type="radio" name="gender" id="female" value="female">   </fieldset></form>

View Code

亲自试一试复选框<input type="checkbox"> type="checkbox"复选框

<form method="post" action="demoform.asp">  <fieldset data-role="controlgroup">    <legend>Choose as many favorite colors as you'd like:</legend>      <label for="red">Red</label>      <input type="checkbox" name="favcolor" id="red" value="red">      <label for="green">Green</label>      <input type="checkbox" name="favcolor" id="green" value="green">      <label for="blue">Blue</label>      <input type="checkbox" name="favcolor" id="blue" value="blue">   </fieldset></form>

View Code

亲自试一试 data-type="horizontal"对单选框或复选框进行水平分组

<fieldset data-role="controlgroup" data-type="horizontal">

View Code

亲自试一试<select>下拉选择菜单 data-native-menu="false" 自定义<select>选择菜单

<select name="day" id="day" data-native-menu="false">

View Code

亲自试一试 multiple <select> 元素中多选

<select name="day" id="day" multiple data-native-menu="false">

View Code

亲自试一试 data-role="controlgroup" 选择菜单组

<!DOCTYPE html><html><head><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head><body><div data-role="page">  <div data-role="header">  <h1>选择菜单</h1>  </div>  <div data-role="content">    <form method="post" action="demoform.asp">      <div data-role="fieldcontain">        <fieldset data-role="controlgroup">          <legend>安排会议：</legend>            <label for="day">选择日期：</label>            <select name="day" id="day">              <option value="mon">Monday</option>              <option value="tue">Tuesday</option>              <option value="wed">Wednesday</option>              <option value="thu">Thursday</option>              <option value="fri">Friday</option>              <option value="sat">Saturday</option>              <option value="sun">Sunday</option>            </select>            <label for="time">选择时间：</label>            <select name="time" id="time">              <option value="08">08:00</option>              <option value="09">09:00</option>              <option value="10">10:00</option>              <option value="11">11:00</option>              <option value="12">12:00</option>              <option value="13">13:00</option>              <option value="14">14:00</option>              <option value="15">15:00</option>              <option value="16">16:00</option>            </select>        </fieldset>      </div>      <input type="submit" data-inline="true" value="提交">    </form>  </div></div></body></html>

View Code

亲自试一试 data-type="horizontal" 水平选择菜单组

<!DOCTYPE html><html><head><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head><body><div data-role="page">  <div data-role="header">  <h1>选择菜单</h1>  </div>  <div data-role="content">    <form method="post" action="demoform.asp">      <div data-role="fieldcontain">        <fieldset data-role="controlgroup" data-type="horizontal">          <legend>安排会议：</legend>            <label for="day">选择日期：</label>            <select name="day" id="day">              <option value="mon">Monday</option>              <option value="tue">Tuesday</option>              <option value="wed">Wednesday</option>              <option value="thu">Thursday</option>              <option value="fri">Friday</option>              <option value="sat">Saturday</option>              <option value="sun">Sunday</option>            </select>            <label for="time">选择时间：</label>            <select name="time" id="time">              <option value="08">08:00</option>              <option value="09">09:00</option>              <option value="10">10:00</option>              <option value="11">11:00</option>              <option value="12">12:00</option>              <option value="13">13:00</option>              <option value="14">14:00</option>              <option value="15">15:00</option>              <option value="16">16:00</option>            </select>        </fieldset>      </div>      <input type="submit" data-inline="true" value="提交">    </form>  </div></div></body></html>

View Code

亲自试一试滑块控件<input type="range"> type="range" 创建滑块

<form method="post" action="demoform.asp">  <div data-role="fieldcontain">    <label for="points">Points:</label>    <input type="range" name="points" id="points" value="50" min="0" max="100">  </div></form>

View Code

亲自试一试 data-hightlight="true" 高亮显示划过的区域

<input type="range" data-hightlight="true">

View Code

亲自试一试开关控件<select data-role="slider">
data-role="slider"

使用 data-role="slider" 的 <select> 元素

添加两个 <option> 元素

<form method="post" action="demoform.asp">  <div data-role="fieldcontain">    <label for="switch">Toggle Switch:</label>    <select name="switch" id="switch" data-role="slider">      <option value="on">On</option>      <option value="off">Off</option>    </select>  </div></form>

View Code

亲自试一试 selected 选中状态

<option value="off" selected>Off</option>

View Code

亲自试一试

四、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"提醒

测试

0 0