jQuery Mobile移动开发
浏览数：18 /
时间：2015年06月11日
1.在<head>元素中包含JavaScript文件是传统的方法。然而，根据Yahoo！”80%的最终用户响应时间在前端上”的说法，这些事件大部分花在资产的下载上，例如样式表，图片，脚本等。减少这些资产的数量明显很重要，在HTML文件的最后包含JavaScript也变得更加常见。这是因为脚本阻止并行下载，也就是说其他资产在每个脚本单独下载完之前无法下载。为了确保脚本放在正确的位置，在</html>结束标记之前包含它。
2.注意：创建自定义 data- 属性的唯一限制是属性的自定义部分的长度至少为一个字符，不能包括大写字母。
3.jQuery Mobile框架一次只能显示其中一个页面，使用 data-title 属性动态改变页面标题。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=UTF-8"> <title>切换页面</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"> <script src="js/jquery-1.9.0.js"></script> <script src="js/jquery.mobile-1.4.4.js"></script> </head> <body class="container"> <!-- page 1 --> <div data-role="page" id="page-one" data-title="Page 1"> <div data-role="header"> <h1>Page 1</h1> </div> <div data-role="content"> <p>Body copy for page 1</p> <p><a href="#page-two">Link to page 2</a></p> </div> <div data-role="footer"> Copyright </div> </div> <!-- page 2 --> <div data-role="page" id="page-two" data-title="Page 2"> <div data-role="header"> <h1>Page 2</h1> </div> <div data-role="content"> <p>Body copy for page 2</p> <p><a href="#page-one">Link to page 1</a></p> </div> <div data-role="footer"> Copyright </div> </div> </body> </html>
4.用jQuery Mobile创建基本的对话框窗口很容易。只要在任何链接锚标记上使用data-rel属性，并将其值设置为dialog。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=UTF-8"> <title>对话框</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"> <script src="js/jquery-1.9.0.js"></script> <script src="js/jquery.mobile-1.4.4.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Dialog Test</h1> </div> <div data-role="content"> <p><a href="#multipage-dialog" data-rel="dialog">Open Muti-page Dialog</a></p> </div> <div data-role="footer"> Copyright </div> </div> <div data-role="page" id="multipage-dialog"> <div data-role="header"> <h1>Multi-page dialog window</h1> </div> <div data-role="content"> <p><a href="dialog.html" data-rel="back">OK</a></p> </div> </div> </body> </html>
5.许多输入元素类型被jQuery Mobile自动增强为按钮。这包括类型属性被设置为button，submit，reset或image的输入元素，它们的默认外观都相同。更改这种默认的增强的唯一手段是将data-role设置为none。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=UTF-8"> <title>编辑对话框</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"> <script src="js/jquery-1.9.0.js"></script> <script src="js/jquery.mobile-1.4.4.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>John Doe</h1> <a href="#options-dialog" data-icon="gear" class="ui-btn-right" data-rel="dialog">Edit Profile</a> </div> <div data-role="content"> <p>123 E Street</p> <p>Chicago, I1 60622</p> </div> <div data-role="footer"> Copyright </div> </div> <div data-role="page" id="options-dialog"> <div data-role="header"> <h1>Edit John Doe</h1> <a href="#" data-icon="check">Save</a> </div> <div data-role="content"> <label for="profile-image">Profile Image</label> <p><img src="images/boy.jpg"></p> <input type="file" id="profile-image" name="prfile-image"> <label for="street-address">Street Address</label> <input type="text" id="street-address" name="street-address" value="123 E Street"> <label for="city">City</label> <input type="text" id="city" name="city" value="Chicago"> <label for="state">State</label> <input type="text" id="state" name="state" value="I1"> <label for="zip-code">Zip Code</label> <input type="text" id="zip-code" name="zip-code" value="60622"> </div> </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=UTF-8">
<title>controlgroup</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.css">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.mobile-1.4.4.js"></script>
<style type="text/css">
.align-left{ float:left;}
.align-right{ float:right;}
</style>
</head>
<body class="container">
<div data-role="page" id="page-one">
<div data-role="header">
<div data-role="controlgroup" data-type="horizontal" class="align-left">
<a href="#" data-role="button" data-icon="home">Home</a>
<a href="#" data-role="button" data-icon="arrow-l">Back</a>
</div>
<div data-role="controlgroup" data-type="horizontal" class="align-right">
<a href="#" data-role="button" data-icon="delete">Delete</a>
<a href="#" data-role="button" data-icon="check">Save</a>
</div>
<h1>Page</h1>
</div>
<div data-role="content">
<p>Body</p>
</div>
<div data-role="footer">
Copyright
</div>
</div>
</body>
</html>
6.jQuery Mobile框架巧妙地根据按钮数量平均分割navbar的空间。唯一需要注意的是，如果它们包含超过5个超链接，就会开始卷绕到多行。这从某种程度上来说是一种局限，但是也是可取之处，因为移动设备没有足够的水平空间容纳这么多按钮。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=UTF-8"> <title>navbar</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"> <script src="js/jquery-1.9.0.js"></script> <script src="js/jquery.mobile-1.4.4.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-fullscreen="true" data-position="fixed"> <img alt="header" src="images/header.png"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home" data-iconpos="top">Home</a></li> <li><a href="#" data-icon="arrow-l" data-iconpos="top">Edit</a></li> <li><a href="#" data-icon="arrow-r" data-iconpos="top">Search</a></li> <li><a href="#" data-icon="arrow-u" data-iconpos="top">About</a></li> <li><a href="#" data-icon="arrow-d" data-iconpos="top">Help</a></li> </ul> </div> </div> <div data-role="content"> <p>Body</p> </div> <div data-role="footer"> Copyright </div> </div> </body> </html>
7.网格行--具有ui-block-a类的每个元素自动清除行，建立一个新行。查看jQuery Mobile框架中包含的用于ui-block-a类的实际CSS，你就会发现它清除了左浮动。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=UTF-8"> <title>ui-block</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"> <script src="js/jquery-1.9.0.js"></script> <script src="js/jquery.mobile-1.4.4.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Head</h1> </div> <div data-role="content"> <div class="ui-grid-c"> <div class="ui-block-a"> <div class="ui-bar ui-bar-b">A</div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-b">B</div> </div> <div class="ui-block-c"> <div class="ui-bar ui-bar-b">C</div> </div> <div class="ui-block-d"> <div class="ui-bar ui-bar-b">D</div> </div> <div class="ui-block-a"> <div class="ui-bar ui-bar-b">A</div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-b">B</div> </div> <div class="ui-block-c"> <div class="ui-bar ui-bar-b">C</div> </div> <div class="ui-block-d"> <div class="ui-bar ui-bar-b">D</div> </div> </div> </div> <div data-role="footer"> Copyright </div> </div> </body> </html>
8.为容器添加collapsible data-role，标题元素自动转换为一个按钮，可用来展开和收起段落。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=UTF-8"> <title>collapsible</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"> <script src="js/jquery-1.9.0.js"></script> <script src="js/jquery.mobile-1.4.4.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Head</h1> </div> <div data-role="content"> <div data-role="collapsible" data-collapsed="false"> <h3>Collapsible content header</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div data-role="collapsible"> <h3>Collapsible child #1</h3> <p>Lorem ipsum dolor sit amet.</p> </div> <div data-role="collapsible"> <h3>Collapsible child #2</h3> <p>Lorem ipsum dolor sit amet.</p> </div> </div> </div> <div data-role="footer"> Copyright </div> </div> </body> </html>
9.要定义可折叠面板，必须创建一个包含一组可折叠内容区域的容器元素。在这个容器元素上，data-role必须设置为collapsible-set值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=UTF-8"> <title>collapsible-set</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"> <script src="js/jquery-1.9.0.js"></script> <script src="js/jquery.mobile-1.4.4.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Head</h1> </div> <div data-role="content"> <div data-role="collapsible-set"> <div data-role="collapsible"> <h3>Collapsible child #1</h3> <p>Lorem ipsum dolor sit amet.</p> </div> <div data-role="collapsible"> <h3>Collapsible child #2</h3> <p>Lorem ipsum dolor sit amet.</p> </div> </div> </div> <div data-role="footer"> Copyright </div> </div> </body> </html>
10. jQuery Mobile在无序列表元素的开始标记中附加了一个值为listview的data-role属性，对这些列表元素进行增强。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=UTF-8"> <title>listview</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"> <script src="js/jquery-1.9.0.js"></script> <script src="js/jquery.mobile-1.4.4.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Head</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#">Home</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Books</a></li> <li><a href="#">More</a></li> </ul> </div> <div data-role="footer"> Copyright </div> </div> </body> </html>
11.jQuery Mobile框架使得在列表中添加一个搜索过滤栏非常容易：只要为列表添加一个data-filter属性，并将值设置为true即可，可以用附加属性data-filter-placeholder修改默认文本，该属性用于有序列表或者无序列表的开始元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=UTF-8"> <title>filter</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.css"> <script src="js/jquery-1.9.0.js"></script> <script src="js/jquery.mobile-1.4.4.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Head</h1> </div> <div data-role="content"> <ul data-role="listview" data-filter="true" data-filter-placeholder="Search the song list ..."> <li>Across The Universe</li> <li>Act Naturally</li> <li>Ain't She Sweet</li> <li>Baby It's You</li> <li>Bad Boy</li> <li>Because</li> </ul> </div> <div data-role="footer"> Copyright </div> </div> </body> </html>
12.为滚动条添加高亮显示 data-highlight="true"
<label for="my-slider">My slider</label> <input type="range" name="slider" id="my-slider" value="50" min="0" max="100" step="10" data-highlight="true">
13.切换开关 data-role="slider"
<label for="flip-switch">Do you like pizza?</label> <select name="flip-switch" id="flip-switch" data-role="slider" data-highlight="true"> <option value="yes">Yes</option> <option value="no">No</option> </select>
14.jQuery Mobile有一个主题系统，包含了由字母“a”到“e”定义的5个样本。样本可以在单个网页上混合和匹配，允许完全自定义，使用样本很简单，只要使用data-theme属性即可。
<a href="#" data-role="button" data-theme="a">Swatch A</a> <a href="#" data-role="button" data-theme="b">Swatch B</a> <a href="#" data-role="button" data-theme="c">Swatch C</a> <a href="#" data-role="button" data-theme="d">Swatch D</a> <a href="#" data-role="button" data-theme="e">Swatch E</a>
15.jQuery Mobile包含一个名为mobileinit的初始化事件，它在jQuery的document.ready事件之前加载。这使得你可以覆盖和扩展jQuery Mobile的默认全局选项，也是所有自定义的开始。为了扩展mobileinit事件，你必须正确排列JavaScript的顺序。你必须在jQuery Mobile加载之前，jQuery框架加载之后包含自定义JavaScript事件处理器。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
