Getting Started with jQuery Mobile
HTML 代码:
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body>
<div data-role="page">
<div data-role="header"> <h1>My Title</h1> </div><!-- /header -->
<div data-role="content"> <p>Hello world</p> </div><!-- /content -->
</div><!-- /page -->
</body> </html>
Add your content
在content容器中，你可以加入你自己的标准的HTML元素 <h1>,<ul>,<p>等，你可以自己写样式来创建自定义的布局，但是注意要在jQuery Mobile的样式表之后加入自己的样式。
Make a listview
HTML 代码:
<ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul>
Add a slider
html 代码:
<form> <label for="slider-0">Input slider:</label> <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" /> </form>
Make a button
html 代码:
Play with theme swatches
