GBin1教程：使用jQuery Mobile快速开发一个手机阅读网站

日期：2011/10/25      来源：GBin1.com

jQuery mobile已经慢慢进入了web开发人员的视野，随着jQuery mobile框架的发展，使用jQuery mobile开发手机端应用将会成为一个趋势，今天GBin1带给大家一个入门级的jQuery mobile开发，将讲解如何使用jQuery快速生成一个手机端的网站，你不需要写任何一行JS代码。

GBin1教程：使用jQuery Mobile快速开发一个手机阅读网站

 

在线演示

 

手机版页面效果如下：

GBin1教程：使用jQuery Mobile快速开发一个手机网站

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>&nbsp; &copy; Copywrite 2011 gbin1.com</p>
        </div> 
    </div>

以上代码定义了一个页面中的头导航，中间内容，及其页脚内容。

在jQuery Mobile中，定义一个单独手机页面使用如下CSS定义：

<div data-role="page"  data-theme="a">

这行代码中定义了数据角色为页面，数据使用的主题为a，在目前版本的jQuery中，框架自己提供了5种缺省的主题，分别使用不同颜色，如下：

GBin1教程：使用jQuery Mobile快速开发一个手机网站

如果你不指定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>&nbsp; &copy; Copywrite 2011 gbin1.com</p>
        </div>

以上我们没有使用一行js代码，很快的就可以把一个文章类型的网站转换为一个手机阅读的网站，是不是很简单？ 当然，我们还可以扩展功能，比如，在手机中显示网站每一个页面的内容。这些我们将再以后的教程之中和大家分享。希望大家喜欢我们的文章。请留言支持我们！

原文来自：GBin1教程：使用jQuery Mobile快速开发一个手机网站

posted @   igeekbar  阅读(2953)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架

中文互联： GBin1.com | RSS订阅 | 邮件订阅 | 手机订阅

点击右上角即可分享
微信分享提示
SQL AI 助手