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快速开发一个手机网站

欢迎访问GBin1.com
posted @ 2011-10-25 14:57  igeekbar  阅读(2874)  评论(0编辑  收藏  举报

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