JQuery Mobile 教程
一、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> |
亲自试一试 |
| data-rel="back" | 如需创建后退按钮，请使用 （会忽略 href 值） |
<a href="#" data-role="button" data-rel="back">后退</a> |
亲自试一试 |
| 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> |
亲自试一试 |
| <input type="button" value="按钮"> |
<input type="button" value="按钮"> |
亲自试一试 |
| <a href="#" data-role="button">按钮</a> |
<a href="#" data-role="button">按钮</a> |
亲自试一试 |
2、button 属性
| Button 可选属性 | |||
| 属性 | 说明 | 代码 | 效果 |
| inline="true" | 按钮宽度自适应文本 |
<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a> |
亲自试一试 |
|
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> |
亲自试一试 |
| data-corners="false" | 规定按钮是否有圆角，默认true |
<!-- 不带圆角的按钮 --> <a href="#" data-role="button" data-corners="false">按钮</a> |
亲自试一试 |
| data-mini="true" | 规定是否是小型按钮，默认false |
<!-- 迷你按钮 --> <a href="#" data-role="button" data-mini="true">按钮</a> |
亲自试一试 |
| data-shadow="false" | 规定按钮是否有阴影，默认true |
<!-- 不带阴影的按钮 --> <a href="#" data-role="button" data-shadow="false">按钮</a> |
亲自试一试 |
|
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> |
亲自试一试 |
| data-iconpos="notext" | 只显示图标 |
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a> |
亲自试一试 |
常用图标在最下面：
四、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> |
亲自试一试 | |
|
class="ui-btn-right"
|
标题栏右侧按钮 |
<div data-role="header"> <h1>欢迎访问我的主页</h1> <a href="#" data-role="button" class="ui-btn-right" data-icon="search">搜索</a> </div> |
亲自试一试 |
|
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> |
亲自试一试 |
|
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> |
亲自试一试 |
|
data-position="fixed" |
标题栏Fixed 定位 |
<div data-role="header" data-position="fixed"></div> <div data-role="footer" data-position="fixed"></div> |
亲自试一试 |
|
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> |
亲自试一试 |
五、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> |
亲自试一试 |
| class="ui-btn-active" :<li> | 按钮默认选中效果 |
<li><a href="#" class="ui-btn-active" data-icon="home">首页</a></li> |
亲自试一试 |
| class="ui-btn-active ui-state-persist" :<li> |
对于多个页面，为每个按钮设置“被选”外观， 以表示用户正在浏览该页面 |
<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li> |
亲自试一试 |
| 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> |
亲自试一试 |
| -- | 显示在内容中的导航栏 |
<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> |
亲自试一试 |
| -- | 页脚中的导航栏 |
<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> |
亲自试一试 |
| -- | 五个以上的导航栏按钮 |
<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> |
亲自试一试 |
六、可折叠块
|
属 性 |
说 明 | 代 码 | 效 果 |
| data-role="collapsible" :<div> | 创建：可折叠的内容块 |
<div data-role="content"> <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> </div> </div> |
亲自试一试 |
|
data-collapsed="false" :<div> |
默认展开 |
<div data-role="content"> <div data-role="collapsible" data-collapsed="false"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> </div> </div> |
亲自试一试 |
| 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> |
亲自试一试 |
| data-inset="false" | 无圆角 |
<div data-role="collapsible" data-inset="false"> <h1>这是没有圆角的可折叠内容块。</h1> <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉圆角。</p> </div> |
亲自试一试 |
| data-mini="true" | 迷你折叠集合 |
<div data-role="content"> <div data-role="collapsible" data-mini="true"> <h1>点击我 - 我是可折叠的！</h1> <p>我是可折叠的内容。</p> </div> </div> |
亲自试一试 |
|
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> |
亲自试一试 |
| -- | 嵌套可折叠内容块 |
<div data-role="content"> <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> <div data-role="collapsible"> <h1>点击我 - 我是嵌套的可折叠块！</h1> <p>我是嵌套的可折叠块中被展开的内容。</p> </div> </div> </div> |
亲自试一试 |
七、列表视图
| 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>
|
亲自试一试 |
| data-inset="true" :<ul> | 为列表添加圆角和外边距 |
<ul data-role="listview" data-inset="true">
|
亲自试一试 |
| 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>
|
亲自试一试 |
| 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>
|
亲自试一试 |
| data-filter="true" :<ul> |
<ul data-role="listview" data-filter="true"></ul>
|
亲自试一试 | |
| data-filter-placeholder="搜索" :<ul> | 搜索框默认文字 |
<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">
|
亲自试一试 |
| 列表图片 | 列表图片（<IMG>放在<li>的第一个<a>里面） |
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
|
亲自试一试 |
| 带有文字信息的列表 | 带有信息的列表 |
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>
|
亲自试一试 |
| class="ui-li-icon" :<IMG> | 列表图标 |
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
|
亲自试一试 |
| 右侧图标按钮 | 右侧拆分按钮（需要在 <li> 元素内放置两个链接<a>） |
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
|
亲自试一试 |
| 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>
|
亲自试一试 |
| data-icon="plus" :<li> | 修改默认列表图标 |
<li data-icon="plus"><a href="#">11</a></li>
|
亲自试一试 |
| 可折叠列表 | 可折叠列表，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>
|
亲自试一试 |
| class="ui-li-aside" :<li>下面的文字 | 列表文字贴边（右边） |
<p class="ui-li-aside">Re: Appointment</p> |
亲自试一试 |
八、表单元素
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> |
亲自试一试 |
| data-role="none" :<input> | 去除jQuery Mobile 自动加的样式 |
<label for="fname">First name:</label> <input type="text" name="fname" id="fname" data-role="none"> |
亲自试一试 |
| 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> |
亲自试一试 |
| 多行文本框<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> |
亲自试一试 |
| 搜索框<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> |
亲自试一试 |
| 单选按钮<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> |
亲自试一试 |
| 复选框<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> |
亲自试一试 |
| data-type="horizontal" | 对单选框或复选框进行水平分组 |
<fieldset data-role="controlgroup" data-type="horizontal"> |
亲自试一试 |
| <select>下拉选择菜单 | |||
| data-native-menu="false" | 自定义<select>选择菜单 |
<select name="day" id="day" data-native-menu="false"> |
亲自试一试 |
| multiple | <select> 元素中多选 |
<select name="day" id="day" multiple data-native-menu="false"> |
亲自试一试 |
| 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> |
亲自试一试 |
| 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> |
亲自试一试 |
| 滑块控件<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> |
亲自试一试 |
| data-hightlight="true" | 高亮显示划过的区域 |
<input type="range" data-hightlight="true"> |
亲自试一试 |
| 开关控件<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> |
亲自试一试 |
| selected | 选中状态 |
<option value="off" selected>Off</option> |
亲自试一试 |
四、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" | 提醒 |  |
测试 |
此博客已暂停维护，博主已搬家至 https://dukec.cn/
浙公网安备 33010602011771号