日期：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快速开发一个手机网站
分享到：
相关推荐
作者：Chris Spooner翻译：Terry li – GBin1.com英文： jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的，因为不同的浏览器及其操作系统对于...
今天我为大家讲解一个页面开发过程中的一个小技巧：如何处理裂图 也就是说如果这个图片没有加载成功了会怎么办？ 第一步：HTML页面里： 代码如下: <!DOCTYPE html> <html> <head> <title>gbin1...
HTML5 Boilerplate 是一个针对HTML5的框架， 如果你需要快速开发基于HTML5的网站，使用它是一个不错选择。 当然这里还有别的HTML5/CSS框架，你可以针对你具体需要使用 ，例如，wordpress上面的开发，参考这个文章： ...
1. 选择或者不选页面上全部复选框 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!...$('#XY').html("Gbin1 X Ax
Bin2c.exe是一个可将bmp格式图片转换为C代码数组的工具.RAR 无毒无害 可以放心使用~~
是一个python chatbot，此存储插件允许您将其与SQL数据库一起用作持久存储。 通过使用 ，它支持Firebird，Microsoft SQL Server，MySQL，Oracle，PostgreSQL，SQLite，Sybase，IBM DB2，Amazon Redshift，exasol，...
VELDT的主要功能组件是：： FNC 引脚类型银行差分对ICE40UP-5K-SG48 IOB_0a DPIO 2个TRUE_of_IOB_1b 46 IOB_2a DPIO 2个TRUE_of_IOB_3b 47 IOB_3b_G6 DPIO / GBIN 2个COMP_of_IOB_2a 44 IOB_4a DPIO 2个TRUE_of_IOB...
一个提供GContainerable和GChildable接口的小库，与GtkContainer和GtkWidget关系兼容。 提供了它们的基本实现（GContainer和GChild）和一个自定义实现（GBin），可用作基类和实现示例。
如果您有不一致之处，请尝试更早地同步和编译这2个依赖项。 安装 git checkout https://github.com/gbin/err-backend-tox.git pip install pytox 并添加： BACKEND = 'TOX' BOT_EXTRA_BACKEND_DIR = '/path_to/...
titanium-d1-kickstart.6.1.1.gbin 强大的思科模拟器