用JQuery Mobile开发移动网站的方法:
1、添加框架和样式,代码如下:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css
" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js
"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js
"></script>
2、创建html页面。在这个html页面中,特殊标记的div就是这个应用程序的“页面”。在它的基础表单中,这样的“应用程序页面”如下所示:
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
3、创建菜单,需要添加一个ul列表。如下所示:
<ul data-role="listview" data-inset="true" data-theme="a">
<li><a href="#twitter_page">Twitter example</a></li>
<li><a href="#map_page">Map example</a></li>
<li><a href="#search">Search example</a></li>
<li><a href="#about">About</a></li>
</ul>
ul标签的参数:
◆data-role="listview"— 表示这是一个你想要应用样式的列表。
◆data-inset="true" — 非全屏显示一个列表,如果你的目的刚好相反,可以把它设置成“false”。
◆data-theme="a"- 使用哪个配色方案。
4、完整主页如下:
<div data-role="page" id="main_page" data-theme="b">
<div data-role="header" >
<h1 id="twi_acc">Home page</h1>
<a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>
</div>
<div data-role="content" >
<ul data-role="listview" data-inset="true" data-theme="a">
<li><a href="#twitter_page">Twitter example</a></li>
<li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div data-role="footer">
</div>
</div>