GBin1教程：使用jQuery Mobile快速开发一个手机网站
日期：2011/10/25 来源：GBin1.com
jQuery mobile已经慢慢进入了web开发人员的视野，随着jQuery mobile框架的发展，使用jQuery mobile开发手机端应用将会成为一个趋势，今天GBin1带给大家一个入门级的jQuery mobile开发，将讲解如何使用jQuery快速生成一个手机端的网站，你不需要写任何一行JS代码。
在线演示
手机版页面效果如下：
HTML代码
<html> <head> <title>GBin1中文互联</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script> </head> <body> ... </body> </html>
以上代码定义了jQuery Mobile需要倒入的类库。
这个例子我们将只使用一个jQuery Mobile页面来显示所有的网站内容。 页面定义如下：
<div data-role="page" data-theme="a"> <div data-role="header"> <h1>GBin1中文互联</h1> <div data-role="navbar" data-theme="b"> <ul> <li><a href="m.jsp?root=/" class="ui-btn-active" data-icon="grid">全部</a></li> <li><a href="m.jsp?root=/technology" class="ui-btn-active" data-icon="search">互联开发</a></li> <li><a href="m.jsp?root=/internet" class="ui-btn-active" data-icon="search">互联动态</a></li> <li><a href="m.jsp?root=/tools" class="ui-btn-active" data-icon="search">软件工具</a></li> </ul> </div><!-- /navbar --> </div> <div data-role="content"> <div data-role="collapsible-set" data-theme="g"> <div data-role="collapsible"> <h3> GBin1教程：使用jQuery Mobile快速开发一个手机网站 </h3> <p> jQuery mobile已经慢慢进入了web开发人员的视野，随着jQuery mobile框架的发展，使用jQuery mobile开发手机端应用将会成为一个趋势，今天GBin1带给大家一个入门级的jQuery mobile开发，将讲解如何使用jQuery快速生成一个手机端的网站，你不需要写任何一行JS代码。 <a rel="external" href="http://www.gbin1.com/technology/jquerymobile/20111025quickdevelopeamobilerappswithjquerymobile/"> 更多内容 </a> </p> </div> <div data-role="collapsible"> <h3> GBin1推荐：分享2011年8个最新的jQuery Mobile在线教程 </h3> <p> jQuery Mobile目前已经发布了RC1， 随着类库的完善，jQueryMobile必将成为移动端开发的利器之一，今天我们收集了2011年最新的8个jQuery移动开发教程，包含最简单的入门介绍，到高级的开发应用案例，希望大家喜欢！ <a rel="external" href="http://www.gbin1.com/technology/jquerymobile/20111018best8jquerymobiletutorialfor2011/index.html"> 更多内容 </a> </p> </div> </div> </div> <div data-role="footer"> <p> © Copywrite 2011 gbin1.com</p> </div> </div>
以上代码定义了一个页面中的头导航，中间内容，及其页脚内容。
在jQuery Mobile中，定义一个单独手机页面使用如下CSS定义：
<div data-role="page" data-theme="a">
这行代码中定义了数据角色为页面，数据使用的主题为a，在目前版本的jQuery中，框架自己提供了5种缺省的主题，分别使用不同颜色，如下：
如果你不指定theme，那么缺省会使用“c”主题。 接下来定义了一个导航条，同样可以定义主题，注意导航条可以定义在页首也可以定义在页脚，我们这个例子中定义在页首，如下：
<div data-role="header"> <h1>GBin1中文互联</h1> <div data-role="navbar" data-theme="b"> <ul> <li><a href="m.jsp?root=/" class="ui-btn-active" data-icon="grid">全部</a></li> <li><a href="m.jsp?root=/technology" class="ui-btn-active" data-icon="search">互联开发</a></li> <li><a href="m.jsp?root=/internet" class="ui-btn-active" data-icon="search">互联动态</a></li> <li><a href="m.jsp?root=/tools" class="ui-btn-active" data-icon="search">软件工具</a></li> </ul> </div><!-- /navbar --> </div>
导航条定义后，我们将定义具体显示内容，这里我们使用内容格式中的collapsible-set组件，它会给标题生成一个隐藏内容，点击将显示文章说明，及其具体链接地址，如下：
<div data-role="content">
<div data-role="collapsible-set" data-theme="g">
<div data-role="collapsible">
<h3>
GBin1教程：使用jQuery Mobile快速开发一个手机网站
</h3>
<p>
jQuery mobile已经慢慢进入了web开发人员的视野，随着jQuery mobile框架的发展，使用jQuery mobile开发手机端应用将会成为一个趋势，今天GBin1带给大家一个入门级的jQuery mobile开发，将讲解如何使用jQuery快速生成一个手机端的网站，你不需要写任何一行JS代码。
<a rel="external" href="http://www.gbin1.com/technology/jquerymobile/20111025quickdevelopeamobilerappswithjquerymobile/">
更多内容
</a>
</p>
</div>
更多需要显示的内容 ...
</div>
</div>
以上代码中，data-role="content"定义了页面内容， data-role="collapsibl-set"定义了一组可扩展单元，而data-role="collapsible"定义了具体的可以扩展的内容单元，如果大家使用PHP或者其它服务器端语言，可以动态生成以上内容，这里我使用纯HTML生成俩个样例文章。具体的组件使用，请大家参考jQuery mobile的文档，地址如下：
Content formatting: http://jquerymobile.com/demos/1.0rc2/#/demos/1.0rc2/docs/content/index.html
最后我们定义页角内容，非常简单，如下：
<div data-role="footer"> <p> © Copywrite 2011 gbin1.com</p> </div>
以上我们没有使用一行js代码，很快的就可以把一个文章类型的网站转换为一个手机阅读的网站，是不是很简单？ 当然，我们还可以扩展功能，比如，在手机中显示网站每一个页面的内容。这些我们将再以后的教程之中和大家分享。希望大家喜欢我们的文章。请留言支持我们！
原文来自：GBin1教程：使用jQuery Mobile快速开发一个手机网站