[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏

Written In The Font

“ Wirte less Do more”

学习内容:

页眉工具栏和页眉button

页眉是网页身体的头不一样.以下我们演示下在页面工具栏中加入两个连接,中间一个标题.

show the code:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>測试</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">

    <script src="js/jquery.js"></script>

    <script src="js/jquery.mobile-1.3.2.js"></script>

</head>

<body>

    <div data-role="page" id="subone">

        <div data-role="header" data-position="inline">

            <a href="#">返回</a>

            <h1> 主界面 </h1>

            <a href="#">很多其它</a>

        </div>

    </div>      

</body>

</html>

导航工具栏

导航工具栏是 jQuery Mobile 的小部件.像tab页,像navbar一样.以下演示下,音乐的一个网页的案例:

show the code:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Jeff Li</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">

    <script src="js/jquery.js"></script>

    <script src="js/jquery.mobile-1.3.2.js"></script>

</head>

<body>

    <div data-role="page" id="subone">

        <div data-role="header" data-position="inline">

            <a href="#">返回</a>

            <h1>音乐 </h1>

            <a href="#">很多其它</a>

            <div data-role="navbar" >

                <ul>

                    <li><a href="#">古典</a></li>

                    <li><a href="#">流行</a></li>

                    <li><a href="#">摇滚</a></li>

                </ul>

            </div>

        </div>

        <div data-role="content">

            <h3>I am a single collapsible element </h3>

            <p>I am the content inside of the single collapsible element</p>

        </div>

    </div>

</body>

</html>

页脚工具栏

页脚工具栏,以下实现button并排显示,两端button边角变为圆角:

(左图不是圆角,右图是圆角.代码就是相差个div)

                           

show the code:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Jeff Li</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">

    <script src="js/jquery.js"></script>

    <script src="js/jquery.mobile-1.3.2.js"></script>

</head>

<body>

    <div data-role="page" id="subone">

        <div data-role="header" data-position="inline">

            <a href="#">返回</a>

            <h1>音乐 </h1>

            <a href="#">很多其它</a>

            <div data-role="navbar" >

                <ul>

                    <li><a href="#">古典</a></li>

                    <li><a href="#">流行</a></li>

                    <li><a href="#">摇滚</a></li>

                </ul>

            </div>

        </div>

        <div data-role="content">

            <h3>I am a single collapsible element </h3>

            <p>I am the content inside of the single collapsible element</p>

        </div>

        <div data-role="footer" class="ui-bar" data-position="fixed">

           <div data-role="controlgroup" data-type="horizontal">

                <a href="#" data-role="button">千千静听</a>

                <a href="#" data-role="button">QQ音乐</a>

                <a href="#" data-role="button">酷我音乐</a>

           </div>

        </div>

    </div>

</body>

</html>

定位工具栏

定位工具栏,上面我们都用过了.定位工具栏是否已经在可视化范围内.要是工具栏使用固定位子,我们仅仅须要将该属性加入进去:

data-position="fixed".

也能够在page div中使用全屏定位.我们仅仅须要 <div data-role=”page” data-fullscreen=”true”>

Editor's Note

路漫漫其修远兮 我将上下而求索

版权声明：本文博客原创文章，博客，未经同意，不得转载。

[ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏的更多相关文章

  1. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布

    [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,或许我们正在阿谀逢迎自己懒惰的天 ...

  2. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局

    当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性. Written In The Font 为了app的手机端,我选择了 jQuery Mobile  ,学 ...

  3. 自定义jQuery Mobile工具栏按钮

    自定义jQuery Mobile工具栏按钮 1.实现效果

  4. jQuery Mobile 工具栏

    jQuery Mobile 工具栏 工具栏元素常被放置于页眉和页脚中 - 以实现"已访问"的导航: 标题栏 页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页.选项或搜索 ...

  5. jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

    程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...

  6. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  7. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  8. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  9. 皓轩的jquery mobile之路（二）

    jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 编写代码要注意最外层div需要添加data-role="page" ,标题需要添加dat ...

随机推荐

  1. counting objects in class

    參考文献:pgno=1">http://www.drdobbs.com/cpp/counting-objects-in-c/184403484? pgno=1

  2. POJ 2778 AC自己主动机+矩阵幂 不错的题

    http://poj.org/problem?id=2778 有空再又一次做下,对状态图的理解非常重要 题解: http://blog.csdn.net/morgan_xww/article/deta ...

  3. Android中&lt;meta-data&gt;的使用

    在AndroidManifest.xml中.<meta-data>元素能够作为子元素,被包括在<activity>.<application> .<servi ...

  4. 知识网之C++总结

    米老师常说的一句话:构造知识网. 立即要考试了.就让我们构造一下属于C++的知识网.首先从总体上了解C++: 从图中能够了解到,主要有五部分.而当我们和之前的知识联系的话,也就剩下模板和运算符重载以及 ...

  5. 201215-03-19---cocos2dx内存管理--具体解释

    因为cocos2dx我们的使用c++写的,所以内存管理就是一个绕只是去的坎,这个你不懂内存仅仅懂业务逻辑的话,还玩什么c++,今天看了半天这个东西,事实上本质上是理解的,可是就是有一个过不去的坎,最终 ...

  6. C++ 多态性分析

    编译 - 时间多态性--函数重载 编译后的中间代码(例如GCC产生.o文件.此时还不是汇编语言)函数名字有变化,看以下两个样例. void cc_show(const char*str)     -& ...

  7. LVS的调度算法分析

    LVS调度算法 一.静态调度算法 1.  rr(round robin)轮询调度,即调度器将客户端的请求依次的传递给内部的服务器,从1到N,算法简洁,无须记录状态,但是不考虑每台服务器的性能. 配置如 ...

  8. random_shuffle （stl算法）打乱顺序 - 飞不会的日志 - 网易博客

    random_shuffle (stl算法)打乱顺序 - 飞不会的日志 - 网易博客 random_shuffle (stl算法)打乱顺序 2012-03-31 10:39:11|  分类: 算法 | ...

  9. 黑马程序猿_ 利用oc的协议实现代理模式

    先说下代理模式是什么吧 定义: 为其它对象提供一种代理以控制对这个对象的訪问.在某些情况下,一个对象不适合或者不能直接引用还有一个对象 而代理对象能够在client和目标对象之间起到中介的作用. 在看 ...

  10. [Ext JS 4] 实战之 Picker 和 Picker Field

    前言 所谓的picker , 就是弹出一个选择框,让你选择一些信息.比如选择日期, 选择颜色等: 选择的结果总是要放在一个地方的,Picker Field 就是用来放置选择结果的一个文本框. 在Ext ...