jQuery Mobile 教程
jQuery Mobile技术文档
简介
jQuery Mobile是一款基于jQuery框架的移动应用程序开发框架。它提供了一组易于使用的HTML和CSS元素，可以用来在移动设备上构建用户界面和Web应用程序。
下载
jQuery Mobile可以从官方网站（https://jquerymobile.com/）进行下载。在下载页面选择需要的版本，包括预构建的CSS、JS和图像文件，或自定义下载，只选择所需组件。
同时jQuery Mobile也可以使用CDN引入，如：
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
使用
页面结构
jQuery Mobile使用HTML5语义化标签，页面结构包含以下几个主要标签：
- data-role: 定义元素的角色，如页面、header、content、footer、button等；
- data-theme: 定义元素的主题，如a、b、c、d等；
- data-transition: 定义页面间切换的过渡效果。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Header</h1>
</div>
<div data-role="content" data-theme="a">
<p>Content</p>
</div>
<div data-role="footer" data-theme="b">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
按钮
jQuery Mobile提供了多种按钮样式，包括普通按钮、图形按钮、分隔按钮等。按钮标签包括data-role为button。
<a href="#" data-role="button">Button</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="left">Home</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="right">Settings</a>
列表
jQuery Mobile可以快速创建列表，包括普通列表、可折叠列表、分隔列表等。
<ul data-role="listview">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
表单
jQuery Mobile提供了多种表单元素，包括输入框、单选框、复选框、滑动条等。
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" />
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose an option:</legend>
<input type="radio" name="options" id="option1" value="1" />
<label for="option1">Option 1</label>
<input type="radio" name="options" id="option2" value="2" />
<label for="option2">Option 2</label>
<input type="radio" name="options" id="option3" value="3" />
<label for="option3">Option 3</label>
</fieldset>
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
以上只是少部分jQuery Mobile的用法，更多的请前往官方文档查询。