??xml version="1.0" encoding="utf-8" standalone="yes"?>国产污污在线观看,一个人免费观看视频www在线播放,伊人av免费在线观看http://www.aygfsteel.com/qileilove/category/54371.html不想做屌丝的码农Q不是好目l理Q屌丝生涯从此开始！zh-cnTue, 27 May 2014 06:08:50 GMTTue, 27 May 2014 06:08:50 GMT60jQuery Mobile 表单 - 滑块http://www.aygfsteel.com/qileilove/articles/414138.html其自然EVO其自然EVOMon, 26 May 2014 15:09:00 GMThttp://www.aygfsteel.com/qileilove/articles/414138.htmlhttp://www.aygfsteel.com/qileilove/comments/414138.htmlhttp://www.aygfsteel.com/qileilove/articles/414138.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/414138.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/414138.html

jQuery Mobile 滑块控g

滑块允许您从一定范围内的数字中选取|

如需创徏滑块Q请使用 <input type="range">Q?/p>

实例

<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>

亲自试一?/a>

使用下列属性来规定限定Q?/p>

提示Q?/span>如果您希望突出显C截止滑块值的q段轨道Q请d data-highlight="true"Q?/p>

实例

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

亲自试一?/a>

切换开?/h2>

切换开兛_用于开/x?错按钮：

如需创徏切换Q请使用 data-role="slider" ?<select> 元素Qƈd两个 <option> 元素Q?/p>

实例

<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>

亲自试一?/a>

提示Q?/span>请?"selected" 属性来把选项之一讄为预选（H出昄Q：

实例

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

亲自试一?/a>



其自然EVO 2014-05-26 23:09 发表评论
]]>jQuery Mobile 表单选择菜单http://www.aygfsteel.com/qileilove/articles/414136.html其自然EVO其自然EVOMon, 26 May 2014 14:31:00 GMThttp://www.aygfsteel.com/qileilove/articles/414136.htmlhttp://www.aygfsteel.com/qileilove/comments/414136.htmlhttp://www.aygfsteel.com/qileilove/articles/414136.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/414136.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/414136.html

jQuery Mobile 选择菜单

iPhone 上的选择菜单Q?/p>

Android 讑֤上的选择菜单Q?/p>

<select> 元素创徏带有若干选项的下拉菜单?/p>

<select> 元素中的 <option> 元素定义列表中的可用选项Q?/p>

实例

<form method="post" action="demoform.asp">   <fieldset data-role="fieldcontain">     <label for="day">选择日期</label>     <select name="day" id="day">       <option value="mon">星期一</option>       <option value="tue">星期?lt;/option>       <option value="wed">星期?lt;/option>     </select>   </fieldset> </form>

亲自试一?/a>

提示Q?/span>如果列表中包含了一长列相关的选项Q请?<select> 中?<optgroup> 元素Q?/p>

实例

<select name="day" id="day">    <optgroup label="Weekdays">     <option value="mon">Monday</option>     <option value="tue">Tuesday</option>     <option value="wed">Wednesday</option>    </optgroup>    <optgroup label="Weekends">     <option value="sat">Saturday</option>     <option value="sun">Sunday</option>    </optgroup> </select>

亲自试一?/a>

自定义选择菜单

本页上方的图片，展示了移动^台显C选择菜单的独Ҏ式?/p>

如果您希望在所有移动设备上昄一致外观的选择菜单Q请使用 jQuery 的自定义选择菜单Qdata-native-menu="false" 属性：

实例

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

亲自试一?/a>

Multiple Selections

如需在选择菜单中选取多个选项Q请?<select> 元素中?multiple 属性：

实例

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

亲自试一?/a>

更多实例

使用 data-role="controlgroup"
如何l合一个或多个选择菜单?/dd>
使用 data-type="horizontal"
如何水^地组合选择菜单?/dd>
预选选项
如何预选择一个选项?/dd>
可折叠表?/a>
如何创徏可折叠表单?/dd>


其自然EVO 2014-05-26 22:31 发表评论
]]>jQuery Mobile 表单输入元素http://www.aygfsteel.com/qileilove/articles/414037.html其自然EVO其自然EVOFri, 23 May 2014 11:07:00 GMThttp://www.aygfsteel.com/qileilove/articles/414037.htmlhttp://www.aygfsteel.com/qileilove/comments/414037.htmlhttp://www.aygfsteel.com/qileilove/articles/414037.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/414037.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/414037.html

jQuery Mobile 文本输入

输入字段是通过标准?HTML 元素~写的，jQuery Mobile 会ؓ它们讄专门针对Ud讑֤的美观易用的样式。您q可以用新?HTML5 <input> cdQ?/p>

实例

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

亲自试一?/a>

提示Q?/span>请?placeholder 来规定简短的提示Q以描述输入字段的预期|

<input placeholder="sometext">

文本?/h2>

请?<textarea> 来实现多行文本输入?/p>

注释Q?/span>文本框会自动扩大Q以适应您输入的文本行?/p>

实例

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

亲自试一?/a>

搜烦?/h2>

输入cd type="search" ?HTML5 中的新类型，用于定义供输入搜索词的文本字D：

实例

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

亲自试一?/a>

单选按?/h2>

当用户只选择有限数量选项中的一个时Q会用到单选按钮?/p>

如需创徏一套单选按钮，h?type="radio" ?input 元素以及相应?label。在 <fieldset> 元素中包装单选按钮。您也可以增加一?<legend> 元素来定?<fieldset> 的标题?/p>

提示Q?/span>L data-role="controlgroup" 属性来l合q些按钮Q?/p>

实例

<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>

亲自试一?/a>

复选框

当用户选择有限数量选项中的一个或多个选项Ӟ会用到复选框Q?/p>

实例

<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>

亲自试一?/a>

更多实例

如需对单选框或复选框q行水^分组Q请使用 data-type="horizontal" 属性：

实例

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

亲自试一?/a>

您也可以使用域容器来包装 <fieldset>Q?/p>

实例

<div data-role="fieldcontain">   <fieldset data-role="controlgroup">     <legend>Choose your gender:</legend>   </fieldset> </div>

亲自试一?/a>

如果您希?#8220;预?#8221;其中一个按钮，请?HTML <input> 标签?checked 属性：

实例

<input type="radio" checked> <input type="checkbox" checked>

亲自试一?/a>



其自然EVO 2014-05-23 19:07 发表评论
]]>jQuery Mobile 表单http://www.aygfsteel.com/qileilove/articles/413939.html其自然EVO其自然EVOWed, 21 May 2014 10:24:00 GMThttp://www.aygfsteel.com/qileilove/articles/413939.htmlhttp://www.aygfsteel.com/qileilove/comments/413939.htmlhttp://www.aygfsteel.com/qileilove/articles/413939.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/413939.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/413939.html

jQuery Mobile 会自动ؓ HTML 表单d优异的便于触控的外观?/p>

jQuery Mobile 表单l构

jQuery Mobile 使用 CSS 来设|?HTML 表单元素的样式，以其更有吸引力更易用?/p>

?jQuery Mobile 中，您可以用以下表单控Ӟ

  • 文本?/li>
  • 搜烦?/li>
  • 单选框
  • 复选框
  • 选择菜单
  • 滑动?/li>
  • {切换开?/li>

当您?jQuery Mobile 表单打交道时Q应该了解以下信息：

  • <form> 元素必须讄 method ?action 属?/li>
  • 每个表单元素必须讄唯一?"id" 属性。该 id 在站点的面中必L唯一的。这是因?jQuery Mobile 的单面D模型允许许多不同?#8220;面”同时呈现?/li>
  • 每个表单元素必须有一个标讎ͼlabelQ。请讄 label ?for 属性来匚w元素?id?/li>

实例

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

亲自试一?/a>

如需隐藏 labelQ请使用c?ui-hidden-accessible。这很常用，当您需要元素的 placeholder 属性充?label Ӟ

实例

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

亲自试一?/a>

域容?/h2>

如果需?label 和表单元素在宽屏q上昄正常Q请用带?data-role="fieldcontain" 属性的 <div> ?<fieldset> 元素来包?label 或表单元素：

实例

<form method="post" action="demoform.asp">   <div data-role="fieldcontain">     <label for="fname">First name:</label>     <input type="text" name="fname" id="fname">     <label for="lname">Last name:</label>     <input type="text" name="lname" id="lname">   </div> </form>

亲自试一?/a>

提示Q?/span>fieldcontain 属性基于页面宽度来讄 label 和表单控件的样式。当面宽度大于 480px Ӟ它会自动?label 与表单控件放|于同一行。当于 480px Ӟlabel 会被攄于表单元素之上?/p>

提示Q?/span>如需避免 jQuery Mobile 自动为可点击元素讄样式Q请使用 data-role="none" 属性：

实例

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

亲自试一?/a>

?jQuery Mobile 中提交表?/h3>

提示Q?/span>jQuery Mobile 会自动通过 AJAX q行表单提交Qƈ会尝试将服务器响应整合入应用E序?DOM 中?/p>



其自然EVO 2014-05-21 18:24 发表评论
]]>jQuery Mobile 列表~略?/title><link>http://www.aygfsteel.com/qileilove/articles/413890.html</link><dc:creator>其自然EVO</dc:creator><author>其自然EVO</author><pubDate>Tue, 20 May 2014 10:40:00 GMT</pubDate><guid>http://www.aygfsteel.com/qileilove/articles/413890.html</guid><wfw:comment>http://www.aygfsteel.com/qileilove/comments/413890.html</wfw:comment><comments>http://www.aygfsteel.com/qileilove/articles/413890.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/qileilove/comments/commentRss/413890.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/qileilove/services/trackbacks/413890.html</trackback:ping><description><![CDATA[<div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 11.818181991577148px; line-height: normal; background-color: #f9f9f9;"><h2>jQuery Mobile 列表~略?/h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">对于大于 16x16px 的图像，请在链接中添?<img> 元素?/p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">jQuery Mobile 自动把囑փ调整?80x80pxQ?/p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><ul data-role="listview"> <li><a href="#"><code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;"><img src="chrome.png"></code></a></li> </ul> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">请用标?HTML 来填充带有信息的列表Q?/p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><ul data-role="listview"> <li> <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;"><a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 免费的开?web 览器。发布于 2008 q?lt;/p> </a></code> </li> </ul> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p></div><div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 11.818181991577148px; line-height: normal; background-color: #f9f9f9;"><h2>jQuery Mobile 列表图标</h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">如需向您的列表添?16x16px 的图标，请向 <img> 元素d class="ui-li-icon" 属性：</p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><li><a href="#"><img src="us.png" alt="USA" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">class="ui-li-icon"</code>>USA</a></li></pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p></div><div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 11.818181991577148px; line-height: normal; background-color: #f9f9f9;"><h2>拆分按钮</h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">如需创徏带有垂直分隔栏的拆分列表Q请?<li> 元素内放|两个链接?/p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">jQuery Mobile 会自动ؓW二个链接添加蓝色箭头图标的样式Q链接中的文本（如有Q将在用户划q该图标时显C：</p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><ul data-role="listview"> <li> <a href="#"><img src="chrome.png"></a> <a href="#">Some Text</a> </li> </ul> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">通过d面和对话框Q可佉K接的功能更强Q?/p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><ul data-role="listview"> <li> <a href="#"><img src="chrome.png"></a> <a href="#download" data-rel="dialog">下蝲览?lt;/a> </li> </ul> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p></div><div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 11.818181991577148px; line-height: normal; background-color: #f9f9f9;"><h2>计数泡沫</h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">计数泡沫用于昄与列表项相关的数目，例如邮箱中的消息Q?/p><iframe src="http://www.w3school.com.cn/jquerymobile/tjm_count_bubbles.html" scrolling="no" frameborder="0" width="95%" height="190px" style="margin: 0px; padding: 0px; border-width: 0px;"></iframe><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">如需d计数泡沫Q请使用行内元素Q比?<span>Q设|?class "ui-li-count" 属性ƈd数字Q?/p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><ul data-role="listview"> <li><a href="#">Inbox<code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;"><span class="ui-li-count">335</span></code></a></li> <li><a href="#">Sent<code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;"><span class="ui-li-count">123</span></code></a></li> <li><a href="#">Trash<code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;"><span class="ui-li-count">7</span></code></a></li> </ul> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">注释Q?/span>如需在计数泡中昄正确的数字，必进行程序化更新。我们将在下一章种讲解?/p></div><div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 11.818181991577148px; line-height: normal; background-color: #f9f9f9;"><h2>更多实例</h2><dl style="margin: 10px 0px 0px; padding: 0px; border: 0px;"><dt style="margin: 15px 0px 5px; padding: 0px; border: 0px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">更改列表的默认链接图标</a></dt><dd style="margin: 0px; padding: 0px; border: 0px;">如何为列表项讄不同的链接图标（右箭头是默认的）?/dd><dt style="margin: 15px 0px 5px; padding: 0px; border: 0px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">可折叠列?/a></dt><dd style="margin: 0px; padding: 0px; border: 0px;">如何创徏隐藏和显C内容的列表?/dd><dt style="margin: 15px 0px 5px; padding: 0px; border: 0px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">更多内容格式</a></dt><dd style="margin: 0px; padding: 0px; border: 0px;">如何制作日历?/dd></dl></div><div class="wmqeeuq" id="bpn" style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; height: 29px; width: 710px; background-color: #ffffff; font-family: Verdana, Arial, 宋体; font-size: 11.818181991577148px; line-height: normal;"><ul style="margin: 0px; padding: 0px; border: 0px; height: 29px; width: 230px; background-image: url(http://www.w3school.com.cn/ui/bg.gif); background-color: transparent; position: relative; background-position: 0px -570px; background-repeat: no-repeat no-repeat;"><li style="margin: 0px; padding: 0px; border: 0px; left: 0px; width: 105px; display: block; height: 29px; list-style: none; position: absolute; top: 0px; overflow: hidden;"></li></ul></div><img src ="http://www.aygfsteel.com/qileilove/aggbug/413890.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/qileilove/" target="_blank">其自然EVO</a> 2014-05-20 18:40 <a href="http://www.aygfsteel.com/qileilove/articles/413890.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>jQuery Mobile 列表视图http://www.aygfsteel.com/qileilove/articles/413889.html其自然EVO其自然EVOTue, 20 May 2014 10:30:00 GMThttp://www.aygfsteel.com/qileilove/articles/413889.htmlhttp://www.aygfsteel.com/qileilove/comments/413889.htmlhttp://www.aygfsteel.com/qileilove/articles/413889.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/413889.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/413889.html

jQuery Mobile 列表视图

jQuery Mobile 中的列表视图是标准的 HTML 列表Q有序列?(<ol>) 和无序列?(<ul>)?/p>

如需创徏列表Q请?<ol> ?<ul> 元素d data-role="listview"。如需使这些项目可点击Q请在每个列表项Q?lt;li>Q中规定链接Q?/p>

实例

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

亲自试一?/a>

如需为列表添加圆角和外边距，请?data-inset="true" 属性：

实例

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

亲自试一?/a>

提示Q?/span>默认圎ͼ列表中的列表会自动转换为按钮（无需 data-role="button"Q?/p>

列表分隔W?/h2>

列表分隔W（List DividersQ用于把目l织和组合ؓ分类/节?/p>

如需规定列表分隔W，请向 <li> 元素d data-role="list-divider" 属性：

实例

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

亲自试一?/a>

如果您的列表是字母顺序的Q比如通讯录）QjQuery Mobile 自动d恰当的分隔符Q通过?<ol> ?<ul> 元素上设|?data-autodividers="true" 属性：

实例

<ul data-role="listview" data-autodividers="true">   <li><a href="#">Adam</a></li>   <li><a href="#">Angela</a></li>   <li><a href="#">Bill</a></li>   <li><a href="#">Calvin</a></li>   ... </ul>

亲自试一?/a>

提示Q?/span>data-autodividers="true" 属性通过对列表项文本的首字母q行大写来创建分隔符?/p>

搜烦qo?/h2>

如需在列表中d搜烦框，请?data-filter="true" 属性：

实例

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

亲自试一?/a>

默认圎ͼ搜烦框中的文本是 "Filter items..."?/p>

如需修改默认文本Q请使用 data-filter-placeholder 属性：

实例

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

亲自试一?/a>

更多实例

只读列表
如何创徏没有链接的列表（不是按钮Q不可点击）?/dd>


其自然EVO 2014-05-20 18:30 发表评论
]]>jQuery Mobile D?/title><link>http://www.aygfsteel.com/qileilove/articles/413860.html</link><dc:creator>其自然EVO</dc:creator><author>其自然EVO</author><pubDate>Mon, 19 May 2014 15:00:00 GMT</pubDate><guid>http://www.aygfsteel.com/qileilove/articles/413860.html</guid><wfw:comment>http://www.aygfsteel.com/qileilove/comments/413860.html</wfw:comment><comments>http://www.aygfsteel.com/qileilove/articles/413860.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/qileilove/comments/commentRss/413860.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/qileilove/services/trackbacks/413860.html</trackback:ping><description><![CDATA[<div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: #f9f9f9;"><h2>jQuery Mobile D?/h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">D栏由一l水qx列的链接构成Q通常位于늜或页脚内部?/p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">默认圎ͼD栏中的链接会自动转换为按钮（无需 data-role="button"Q?/p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">请?data-role="navbar" 属性来定义D栏：</p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="header"> <div <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">data-role="navbar"</code>> <ul> <li><a href="#anylink">首页</a></li> <li><a href="#anylink">面?lt;/a></li> <li><a href="#anylink">搜烦</a></li> </ul> </div> </div> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold; color: #ff9955;">提示Q?/span>按钮的宽度，默认圎ͼ与其内容一致。用无序列表来均等地划分按钮：一个按钮占?100% 的宽度，两个按钮各分?50% 的宽度，三个按钮 33.3%Q以此类推。不q，如果您在D栏中规定了五个以上的按钮Q那么它会弯折ؓ多行Q参加页面底部的“更多实例”Q?/p></div><div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: #f9f9f9;"><h2>zd按钮</h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">当导航栏中的链接被敲LQ会获得选取外观Q按下）?/p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">如需在不敲击链接时实现此外观Q请使用 class="ui-btn-active"Q?/p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><li><a href="#anylink" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">class="ui-btn-active"</code>>首页</a></li></pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">对于多个面Q您也许需要ؓ每个按钮讄“被?#8221;外观Q以表示用户正在览该页面。如果要q么做，请向链接d "ui-state-persist" c，以及 "ui-btn-active" c：</p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><li><a href="#anylink" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">class="ui-btn-active ui-state-persist"</code>>首页</a></li></pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p></div><div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: #f9f9f9;"><h2>更多实例</h2><dl style="margin: 10px 0px 0px; padding: 0px; border: 0px;"><dt style="margin: 15px 0px 5px; padding: 0px; border: 0px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">内容中的D?/a></dt><dd style="margin: 0px; padding: 0px; border: 0px;">如何?data-role="content" 中添加导航栏?/dd><dt style="margin: 15px 0px 5px; padding: 0px; border: 0px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">脚中的D?/a></dt><dd style="margin: 0px; padding: 0px; border: 0px;">如何在页脚中dD栏?/dd><dt style="margin: 15px 0px 5px; padding: 0px; border: 0px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">在导航栏中定位图?/a></dt><dd style="margin: 0px; padding: 0px; border: 0px;">如何在页脚内部的D栏中攄图标?/dd><dt style="margin: 15px 0px 5px; padding: 0px; border: 0px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">五个以上的按?/a></dt><dd style="margin: 0px; padding: 0px; border: 0px;">演示在导航栏中的十个按钮?/dd></dl></div><img src ="http://www.aygfsteel.com/qileilove/aggbug/413860.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/qileilove/" target="_blank">其自然EVO</a> 2014-05-19 23:00 <a href="http://www.aygfsteel.com/qileilove/articles/413860.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>jQuery Mobile 工具?/title><link>http://www.aygfsteel.com/qileilove/articles/413859.html</link><dc:creator>其自然EVO</dc:creator><author>其自然EVO</author><pubDate>Mon, 19 May 2014 14:28:00 GMT</pubDate><guid>http://www.aygfsteel.com/qileilove/articles/413859.html</guid><wfw:comment>http://www.aygfsteel.com/qileilove/comments/413859.html</wfw:comment><comments>http://www.aygfsteel.com/qileilove/articles/413859.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/qileilove/comments/commentRss/413859.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/qileilove/services/trackbacks/413859.html</trackback:ping><description><![CDATA[<div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: #f9f9f9;"><h2>jQuery Mobile 工具?/h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">工具栏元素常被放|于늜和页脚中 - 以实?#8220;已访?#8221;的导航：</p><iframe src="http://www.w3school.com.cn/jquerymobile/tjm_toolbars.html" scrolling="no" frameborder="0" width="100%" height="183px" style="margin: 15px 0px 0px; padding: 0px; border-width: 0px;"></iframe></div><div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: #f9f9f9;"><h2>标题?/h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">늜通常会包含页眉标?LOGO 或一C个按钮（通常是首c选项或搜索按钮）?/p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">您可以在늜中向左侧?以及右侧d按钮?/p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">下面的代码，向늜标题文本的左侧添加一个按钮，q向右侧d一个按钮：</p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="header"> <a href="#" data-role="button">首页</a> <h1>Ƣ迎来到我的主页</h1> <a href="#" data-role="button">搜烦</a> </div> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">下面的代码将向页眉标题的左侧d一个按钮：</p><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="header"> <a href="#" data-role="button">首页</a> <h1>Ƣ迎来到我的主页</h1> </div> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">不过Q如果您?<h1> 元素之后攄按钮链接Q那么它不会昄在文本右侧。如需向页眉标题的右侧d按钮Q请规定cd "ui-btn-right"Q?/p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="header"> <h1>Ƣ迎来到我的主页</h1> <a href="#" data-role="button" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">class="ui-btn-right"</code>>搜烦</a> </div> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold; color: #ff9955;">提示Q?/span>늜可包含一个或两个按钮Q然而页脚没有限制?/p></div><div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: #f9f9f9;"><h2>脚?/h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">与页眉相比，脚更具伸羃?- 它们更实用且多变Q所以能够包含所需数量的按钮：</p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="footer"> <a href="#" data-role="button">转播到新微?lt;/a> <a href="#" data-role="button">转播到腾讯微?lt;/a> <a href="#" data-role="button">转播?QQ I间</a> </div> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">注释Q?/span>脚与页眉的样式不同Q它会减M些内边距和空白，q且按钮不会居中Q。如果要修正该问题，请在脚讄cd "ui-btn"Q?/p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="footer" class="ui-btn"></pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">您也能够选择在页脚中水^q是垂直地组合按钮：</p><h3>实例</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="footer" class="ui-btn"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="plus">转播到新微?lt;/a> <a href="#" data-role="button" data-icon="plus">转播到腾讯微?lt;/a> <a href="#" data-role="button" data-icon="plus">转播?QQ I间</a> </div> </div> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p></div><div style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; width: 710px; font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal; background-color: #f9f9f9;"><h2>定位늜和页?/h2><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">攄늜和页脚的方式有三U：</p><ul style="margin: 10px 0px 0px 35px; padding: 0px; border: 0px;"><li style="margin: 3px 0px 0px; padding: 0px; border: 0px;">Inline - 默认。页眉和脚与页面内容位于行内?/li><li style="margin: 3px 0px 0px; padding: 0px; border: 0px;">Fixed - 面和页脚会留在面剙和底部?/li><li style="margin: 3px 0px 0px; padding: 0px; border: 0px;">Fullscreen - ?fixed cM;面和页脚会留在面剙和底部，but also over the page content. It is also slightly see-through</li></ul><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">请?data-position 属性来定位늜和页脚：</p><h3>Inline 定位Q默认）</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="header" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">data-position="inline"</code>></div> <div data-role="footer" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">data-position="inline"</code>></div> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><h3>Fixed 定位</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="header" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">data-position="fixed"</code>></div> <div data-role="footer" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">data-position="fixed"</code>></div> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">如果需要启用全面定位，请?data-position="fixed"Qƈ向该元素d data-fullscreen 属性：</p><h3>Fullscreen 定位</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted #778855; font-family: 'Courier New', Courier, monospace; width: 685px; background-color: #f5f5f5;"><div data-role="header" data-position="fixed" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">data-fullscreen="true"</code>></div> <div data-role="footer" data-position="fixed" <code style="margin: 0px; padding: 0px; border: 0px; font-family: 'Courier New', Courier, monospace; color: #0000dd;">data-fullscreen="true"</code>></div> </pre><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><a target="_blank" style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">亲自试一?/a></p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold; color: #ff9955;">提示Q?/span>fullscreen 对于照片、图像和视频非常理想?/p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;"><span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold; color: #ff9955;">提示Q?/span>对于 fixed ?fullscreen 定位Q触摸屏q将隐藏和显C页眉及脚?/p></div><div class="wmqeeuq" id="bpn" style="margin: 0px 0px 0px 15px; padding-top: 20px; padding-bottom: 20px; border-width: 1px 0px; border-top-style: solid; border-bottom-style: solid; border-top-color: #aaaaaa; border-bottom-color: #aaaaaa; height: 29px; width: 710px; background-color: #ffffff; font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: normal;"><ul style="margin: 0px; padding: 0px; border: 0px; height: 29px; width: 230px; background-image: url(http://www.w3school.com.cn/ui/bg.gif); background-color: transparent; position: relative; background-position: 0px -570px; background-repeat: no-repeat no-repeat;"><li style="margin: 0px; padding: 0px; border: 0px; left: 0px; width: 105px; display: block; height: 29px; list-style: none; position: absolute; top: 0px; overflow: hidden;"></li></ul></div><img src ="http://www.aygfsteel.com/qileilove/aggbug/413859.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/qileilove/" target="_blank">其自然EVO</a> 2014-05-19 22:28 <a href="http://www.aygfsteel.com/qileilove/articles/413859.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>jQuery Mobile 按钮图标http://www.aygfsteel.com/qileilove/articles/413858.html其自然EVO其自然EVOMon, 19 May 2014 14:17:00 GMThttp://www.aygfsteel.com/qileilove/articles/413858.htmlhttp://www.aygfsteel.com/qileilove/comments/413858.htmlhttp://www.aygfsteel.com/qileilove/articles/413858.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/413858.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/413858.html

jQuery Mobile 提供的一套图标可令您的按钮更具吸引力?/p>

?jQuery Mobile 按钮d图标

如需向您的按钮添加图标，请?data-icon 属性：

<a href="#anylink" data-role="button" data-icon="search">搜烦</a>

提示Q?/span>您也可以?<button> ?<input> 元素中?data-icon 属性?/p>

下面我们列出?jQuery Mobile 提供的一些可用图标：

属性?/th>描述图标实例
data-icon="arrow-l"左箭?/td>试
data-icon="arrow-r"右箭?/td>试
data-icon="delete"删除试
data-icon="info"信息试
data-icon="home"首页试
data-icon="back"q回试
data-icon="search"搜烦试
data-icon="grid"|格试

如需关于 jQuery Mobile 按钮图标的完整信息，误问我们的 jQuery Mobile 图标参考手?/a>?/p>

定位图标

您也能够规定图标被放|的位置Q上、右、下或左?/p>

请?data-iconpos 属性来规定位置Q?/p>

图标位置Q?/h3>
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">?lt;/a> <a href="#link" data-role="button" data-icon="search" data-iconpos="right">?lt;/a> <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">?lt;/a> <a href="#link" data-role="button" data-icon="search" data-iconpos="left">?lt;/a>

亲自试一?/a>

提示Q?/span>默认圎ͼ所有按钮中的图标靠左放|?/p>

只显C图?/h2>

如果只需昄图标Q请?data-iconpos 讄?"notext"Q?/p>

Back:

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

亲自试一?/a>



其自然EVO 2014-05-19 22:17 发表评论
]]>jQuery Mobile 按钮http://www.aygfsteel.com/qileilove/articles/413857.html其自然EVO其自然EVOMon, 19 May 2014 14:04:00 GMThttp://www.aygfsteel.com/qileilove/articles/413857.htmlhttp://www.aygfsteel.com/qileilove/comments/413857.htmlhttp://www.aygfsteel.com/qileilove/articles/413857.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/413857.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/413857.html

Ud应用E序构徏于触控操作的便利性之上?/p>

?jQuery Mobile 中创建按?/h2>

jQuery Mobile 中的按钮可通过三种Ҏ创徏Q?/p>

  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用 data-role="button" ?<a> 元素

<button>

<button>按钮</button>

亲自试一?/a>

<input>

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

亲自试一?/a>

<a>

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

亲自试一?/a>

提示Q?/span>jQuery Mobile 中的按钮会自动获得样式，q增Z他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" ?<a> 元素来创建页面之间的链接Q?<input> ?<button> 元素用于表单提交?/p>

D按钮

如需通过按钮来链接页面，请?data-role="button" ?<a> 元素Q?/p>

实例

<a href="#pagetwo" data-role="button">转到面?lt;/a>

亲自试一?/a>

行内按钮

默认情况下，按钮会占据屏q的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮q排昄Q请d data-inline="true"Q?/p>

实例

<a href="#pagetwo" data-role="button" data-inline="true">转到面?lt;/a>

亲自试一?/a>

l合按钮

jQuery Mobile 提供了对按钮q行l合的简单方法?/p>

请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同用，以规定水qx垂直地组合按钮：

实例

<div data-role="controlgroup" data-type="horizontal">   <a href="#anylink" data-role="button">按钮 1</a>   <a href="#anylink" data-role="button">按钮 2</a>   <a href="#anylink" data-role="button">按钮 3</a> </div>

亲自试一?/a>

提示Q?/span>默认情况下，l合按钮是垂直分l的Q彼此间没有外边距和I白。ƈ且只有第一个和最后一个按钮拥有圆角，在组合后创造出了漂亮的外观?/p>

后退按钮

如需创徏后退按钮Q请使用 data-rel="back" 属性（会忽略锚?href |Q?/p>

实例

<a href="#" data-role="button" data-rel="back">q回</a>

亲自试一?/a>

更多用于按钮?data-* 属?/h2>
属?/th>?/th>描述实例
data-cornerstrue | false规定按钮是否有圆角?/td>试
data-minitrue | false规定是否是小型按钮?/td>试
data-shadowtrue | false规定按钮是否有阴影?/td>试

如需有关 jQuery Mobile data-* 属性的完整信息Q请讉K我们?nbsp;jQuery Mobile Data 属性参考手?/a>?/p>

下一节演C如何ؓ按钮d图标?/p>



其自然EVO 2014-05-19 22:04 发表评论
]]>jQuery Mobile q渡http://www.aygfsteel.com/qileilove/articles/413856.html其自然EVO其自然EVOMon, 19 May 2014 13:41:00 GMThttp://www.aygfsteel.com/qileilove/articles/413856.htmlhttp://www.aygfsteel.com/qileilove/comments/413856.htmlhttp://www.aygfsteel.com/qileilove/articles/413856.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/413856.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/413856.html

jQuery Mobile 包含了允许您选择面打开方式?CSS 效果?/p>

jQuery Mobile q渡效果

jQuery Mobile 拥有一pd关于如何从一过渡到下一늚效果?/p>

注释Q?/span>如需实现q渡效果Q浏览器必须支持 CSS3 3D 转换Q?/p>

览器支?/h2>
  • Internet Explorer 10 支持 3D 转换Q更早的版本不支持）
  • Opera 仍然不支?3D 转换

q渡效果可应用于L链接或通过使用 data-transition 属性进行的表单提交Q?/p>

<a href="#anylink" data-transition="slide">滑动到页面二</a>

下面的表格展CZ可与 data-transition 属性一同用的可用q渡Q?/p>
q渡描述试
fade默认。E入E出到下一c?/td>试
flip从后向前dC一c?/td>试
flow抛出当前面Q引入下一c?/td>试
pop像弹出窗口那栯{C一c?/td>试
slide从右向左滑动C一c?/td>试
slidefade从右向左滑动qE入到下一c?/td>试
slideup从下C滑动C一c?/td>试
slidedown从上C滑动C一c?/td>试
turn转向下一c?/td>试
none无过渡效果?/td>试

提示Q?/span>?jQuery Mobile 中，淡入淡出效果在所有链接上都是默认的（如果览器支持）?/p>

提示Q?/span>以上所有效果同时支持反向动作，例如Q如果您希望面从左向右滑动Q而不是从叛_左，请用gؓ "reverse" ?data-direction 属性。在后退按钮上是默认的?/p>

实例

<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>

亲自试一?/a>



其自然EVO 2014-05-19 21:41 发表评论
]]>jQuery Mobile 面http://www.aygfsteel.com/qileilove/articles/413855.html其自然EVO其自然EVOMon, 19 May 2014 13:33:00 GMThttp://www.aygfsteel.com/qileilove/articles/413855.htmlhttp://www.aygfsteel.com/qileilove/comments/413855.htmlhttp://www.aygfsteel.com/qileilove/articles/413855.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/413855.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/413855.html

使用 jQuery Mobile 入门

提示Q?/span>管 jQuery Mobile 适用于所有移动设备，它在台式计算Z仍然可能存在兼容性问题（׃有限?CSS3 支持Q?/p>

因此在本教程中，我们推荐您用谷歌的 Chrome 览器，以获得最好的阅读体验?/p>

实例

<body> <div data-role="page">    <div data-role="header">     <h1>Ƣ迎讉K我的主页</h1>   </div>    <div data-role="content">     <p>我是一名移动开发者！</p>   </div>    <div data-role="footer">     <h1>脚文本</h1>   </div>  </div> </body>

亲自试一?/a>

例子解释Q?/h3>
  • data-role="page" 是显C在览器中的页?/li>
  • data-role="header" 创徏面上方的工hQ常用于标题和搜索按钮）
  • data-role="content" 定义面的内容，比如文本、图像、表单和按钮Q等{?/li>
  • data-role="footer" 创徏面底部的工h

在这些容器中Q您可以dL HTML 元素 - D落、图像、标题、列表等{?/p>

提示Q?/span>HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创?#8220;对触控友好的”交互外观?/p>



其自然EVO 2014-05-19 21:33 发表评论
]]>jQuery Mobile 安装http://www.aygfsteel.com/qileilove/articles/413854.html其自然EVO其自然EVOMon, 19 May 2014 13:31:00 GMThttp://www.aygfsteel.com/qileilove/articles/413854.htmlhttp://www.aygfsteel.com/qileilove/comments/413854.htmlhttp://www.aygfsteel.com/qileilove/articles/413854.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/413854.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/413854.html

向您的网|?jQuery Mobile

有多个办法可供您在网站上开始?jQuery Mobile。您可以Q?/p>

  • ?CDN 引用 jQuery MobileQ推荐）
  • ?jQuerymobile.com 下蝲 jQuery Mobile ?/li>

?CDN 引用 jQuery Mobile

提示Q?/span>CDN (Content Delivery Network) 用于通过 web 来分发常用的文gQ以此加快用L下蝲速度?/p>

?jQuery cMQ无需在您的计机上安装Q何程序；您只需直接?HTML 面中引用以下样式表?JavaScript 库，q样 jQuery Mobile 可以工作了Q?/p>

jQuery Mobile CDN:

<head> <link rel="stylesheet" > <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>

亲自试一?/a>

下蝲 jQuery Mobile

如果您希望在服务器上存放 jQuery MobileQ您可以?nbsp;jQuerymobile.com 下蝲文g?/p>

<head> <link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js></script> <script src=jquery.mobile-1.3.2.js></script> </head>

提示Q?/span>请将下蝲的文件放到您希望使用的文件夹中?/p>

提示Q?/span>您是不是奇怪ؓ什?<script> 标签中没?type="text/javascript" 属性？

?HTML5 中该属性不是必需的。JavaScript ?HTML5 以及所有现代浏览器中的默认脚本语言Q?/p>



其自然EVO 2014-05-19 21:31 发表评论
]]>jQuery Mobilehttp://www.aygfsteel.com/qileilove/articles/413852.html其自然EVO其自然EVOMon, 19 May 2014 13:20:00 GMThttp://www.aygfsteel.com/qileilove/articles/413852.htmlhttp://www.aygfsteel.com/qileilove/comments/413852.htmlhttp://www.aygfsteel.com/qileilove/articles/413852.html#Feedback0http://www.aygfsteel.com/qileilove/comments/commentRss/413852.htmlhttp://www.aygfsteel.com/qileilove/services/trackbacks/413852.html

jQuery Mobile

jQuery Mobile 是创建移?web 应用E序的框架?/p>

jQuery Mobile 适用于所有流行的手机和^板电脑?/p>

jQuery Mobile 使用 HTML5 ?CSS3 通过可能少的脚本对面q行布局?/p>

每章中的 TIY 实例

通过我们的在U编辑器Q您能够~辑代码Q然后点L交按钮来查看l果?/p>

实例

<div data-role="page" id="pageone">   <div data-role="header">     <h1>在此处写入标?lt;/h1>   </div>    <div data-role="content">     <p>在此处写入正?lt;/p>   </div>    <div data-role="footer">     <h1>在此处写入页脚文?lt;/h1>   </div> </div>

亲自试一?/a>

L?#8220;亲自试一?#8221;按钮来查看结果?/p>

jQuery Mobile 参考手?/h2>

?W3SchoolQ您找到包含所?jQuery Mobile 属性的完整参考手册?/p>

jQuery Mobile 数据参考手?/a>



其自然EVO 2014-05-19 21:20 发表评论
]]> վ֩ģ壺 ﴨ| Ϳ| ʹ| Ǩ| | | | | Դ| ;| | ƽ| | ָ| ɼ| ɽ| | | ʳ| ٷ| غ| ͨ| Ϫ| | | | | | ͬ| | Ϸ| ֥| Դ| ϻ| | | ƺ| | ˮ| | |