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

Written In The Font

“ Wirte less Do more”

学习内容:

页眉工具栏和页眉button

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

show the code:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>測试</title>
  6.  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.     <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
  10.  
  11.     <script src="js/jquery.js"></script>
  12.     <script src="js/jquery.mobile-1.3.2.js"></script>
  13.  
  14. </head>
  15. <body>
  16.  
  17.     <div data-role="page" id="subone">
  18.         <div data-role="header" data-position="inline">
  19.             <a href="#">返回</a>
  20.             <h1> 主界面 </h1>
  21.             <a href="#">很多其它</a>
  22.         </div>
  23.     </div>      
  24.  
  25. </body>
  26. </html>

导航工具栏

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

show the code:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Jeff Li</title>
  6.  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.     <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
  10.  
  11.     <script src="js/jquery.js"></script>
  12.     <script src="js/jquery.mobile-1.3.2.js"></script>
  13.  
  14. </head>
  15. <body>
  16.  
  17.     <div data-role="page" id="subone">
  18.         <div data-role="header" data-position="inline">
  19.             <a href="#">返回</a>
  20.             <h1>音乐 </h1>
  21.             <a href="#">很多其它</a>
  22.             <div data-role="navbar" >
  23.                 <ul>
  24.                     <li><a href="#">古典</a></li>
  25.                     <li><a href="#">流行</a></li>
  26.                     <li><a href="#">摇滚</a></li>
  27.                 </ul>
  28.             </div>
  29.         </div>
  30.  
  31.         <div data-role="content">
  32.             <h3>I am a single collapsible element </h3>
  33.             <p>I am the content inside of the single collapsible element</p>
  34.         </div>
  35.  
  36.     </div>
  37. </body>
  38. </html>

页脚工具栏

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

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

                           

show the code:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Jeff Li</title>
  6.  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.     <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
  10.  
  11.     <script src="js/jquery.js"></script>
  12.     <script src="js/jquery.mobile-1.3.2.js"></script>
  13.  
  14. </head>
  15. <body>
  16.  
  17.     <div data-role="page" id="subone">
  18.         <div data-role="header" data-position="inline">
  19.             <a href="#">返回</a>
  20.             <h1>音乐 </h1>
  21.             <a href="#">很多其它</a>
  22.             <div data-role="navbar" >
  23.                 <ul>
  24.                     <li><a href="#">古典</a></li>
  25.                     <li><a href="#">流行</a></li>
  26.                     <li><a href="#">摇滚</a></li>
  27.                 </ul>
  28.             </div>
  29.         </div>
  30.  
  31.         <div data-role="content">
  32.             <h3>I am a single collapsible element </h3>
  33.             <p>I am the content inside of the single collapsible element</p>
  34.         </div>
  35.  
  36.         <div data-role="footer" class="ui-bar" data-position="fixed">
  37.            <div data-role="controlgroup" data-type="horizontal">
  38.                 <a href="#" data-role="button">千千静听</a>
  39.                 <a href="#" data-role="button">QQ音乐</a>
  40.                 <a href="#" data-role="button">酷我音乐</a>
  41.            </div>
  42.         </div>
  43.     </div>
  44. </body>
  45. </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. Android中关于JNI 的学习（六）JNI中注冊方法的实现

    在前面的样例中,我们会发现,当在Java类中定义一个方法的时候,例如以下: public class ParamTransferTest { public static int testval = 1 ...

  2. 基于TFTP协议的远程升级设计

    说明:因为CSDN博客编辑器对word格式近乎不支持.因此对表格使用了图片方式(最后一个表格未使用图片格式.大家能够看看效果),CSDN博客编辑器上传图片十分不人性化(直接复制图片是不显示的),因此本 ...

  3. linux下动态连接变为静态打包，使用statifier_S展翅飞_新浪博客

    linux下动态连接变为静态打包,使用statifier_S展翅飞_新浪博客 linux下动态连接变为静态打包,使用statifier (2013-04-27 14:38:19) 转载▼

  4. 《Pro Android Graphics》读书笔记之第三节

    Android Frame Animation: XML, Concepts and Optimization Frame Animation Concepts: Cels, Framerate, a ...

  5. 重温委托(delegate)和事件(event)

    1.delegate是什么 某种意义上来讲,你可以把delegate理解成C语言中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能够调用这个方法m,说白了就是可以把方法当作 ...

  6. Xtext什么

    在Xtext官方网站是这么说的 "Building your own domain-specific languages has never been so easy. Just put y ...

  7. H3C S5120交换机ACL应用的问题

    下午在S5120上ACL的时候发现不起作用,ACL如下: acl number 3001 name deny-wan-to-lan-vpn rule 0 deny ip source 10.3.0.0 ...

  8. ESXI主机打开shell后主机警告处理

    昨天为了配置snmp监控,将几台ESXI 5.5主机的shell 在控制台上从disable状态修改为enable状态后,登陆vcenter后,发现所有的主机都有警告. 处理过程如下: 选中有警告标志 ...

  9. unity中的MonoBehaviour.OnMouseDown()

    在官网的api文档中仅说明了 Description OnMouseDown is called when the user has pressed the mouse button while ov ...

  10. shell命令批量杀死MySQL连接进程

    (1)将全部的MySQL连接进程杀掉 for i in `mysql -uroot -pzhangyun -Bse "show processlist" | grep -v &qu ...