自定义jQuery Mobile工具栏按钮

1、实现效果

aaarticlea/png;base64,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" alt="">

2、代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  7. <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  8. <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  9. <style type="text/css" media="screen">
  10.  
  11. <!-- 自定义CSS:工具栏自定义带文字按钮 -->
  12. .toolbar_btn {
  13. margin-left:5px;
  14. height:35px;
  15. overflow:hidden;
  16. }
  17. .header_btn div {
  18. float:left;
  19. height:100%;
  20. line-height:35px;
  21. }
  22. .header_btn div:last-child {
  23. text-decoration:none;
  24. font-size:14px;
  25. color:#FFF;
  26. font-family:Microsoft YaHei;
  27. overflow:hidden;
  28. white-space:nowrap;
  29. text-overflow:ellipsis;
  30. width:80px;
  31. }
  32. <!-- The End -->
  33.  
  34. </style>
  35. </head>
  36. <body>
  37.  
  38. <div data-role="page" id="pageone">
  39. <div data-role="header" data-position="fixed" data-tap-toggle="false">
  40. <h1>Contacts</h1>
  41. <a href="#pageHome" class="ui-btn-left" data-transition="slidefade" data-role="none">
  42. <div class="header_btn">
  43.        <!-- 使用<img> 的 width、height、padding、控制图片的大小和位置 -->
  44. <div><img src="data:images/btn_back.png" width="10" height="21" style="padding:6px"/></div>
  45. <div>我的信息</div>
  46. </div>
  47. </a>
  48. </div>
  49.  
  50. <div data-role="content">
  51. <p>在此处插入正文</p>
  52. </div>
  53.  
  54. <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="f">
  55. <h1>在此处插入页脚文本</h1>
  56. </div>
  57. </div>
  58.  
  59. </body>
  60. </html>

自定义jQuery Mobile工具栏按钮的更多相关文章

  1. jQuery Mobile 工具栏

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

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

    [ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏 Written In The Font " Wirte less Do more& ...

  3. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

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

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

  5. 点击jQuery Mobile的按钮改变颜色

    jquery-mobile-移动 我有这样的代码来改变点击一个按钮的颜色: $('.fav').live('click', function(e) { $(this).buttonMarkup({ t ...

  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. upc组队赛14 As rich as Crassus【扩展中国剩余定理】

    As rich as Crassus 题目链接 题目描述 Crassus, the richest man in the world, invested some of his money with ...

  2. VB - 错误处理

    1.最常见的错误是运行时错误,也就是说错误在脚本正在运行的时候发生,是脚本试图进行非法操作的结果.例如零被作为除数.在vbs中,任何运行时错误都是致命的,此时,脚本将停止运行,并在屏幕上显示一个错误消 ...

  3. Cocos2d-x中使用的数据容器类

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 在计算机的数据结构中,有着数组,链表,堆栈,队列,树,图,哈希表等一些结构.在面向对象的语言中,这些结构被封装成了特定的类,而这些类就是容 ...

  4. sourcetree配置gitlab

    一.准备 1.安装git,下载地址:https://git-scm.com/download 安装教程百度一下      git客户端(1.产生gitlab服务端和本地git相互传输时所需要校验的私钥 ...

  5. SQL查询连续年份

    有这样一个问题,给出一个表格记录了夺冠球队的名称和年份,我们要做的就是写出一条SQL语句,查询再次期间连续夺冠的有哪些,起止时间是什么 下边是代码 create table #t(TEAM vaarc ...

  6. IMU预积分

    https://www.sohu.com/a/242760307_715754 http://www.sohu.com/a/243155537_715754 https://www.sohu.com/ ...

  7. 选择恐惧症的福音!教你认清MVC,MVP和MVVM(转:示例挺好,不太赞同画图)

    转自:http://zjutkz.net/2016/04/13/%E9%80%89%E6%8B%A9%E6%81%90%E6%83%A7%E7%97%87%E7%9A%84%E7%A6%8F%E9%9 ...

  8. python 环境变量的配置

    1. 打开python安装目录 2.将python.exe重名为python3.exe 3.在环境变量的path中,添加python3的目录 4.将pip.exe的目录页添加到path中,即可完成环境 ...

  9. python 循环中使用多个subplot画子图像(python matplotlib use more than one subplot in loop)

    在循环语句中画出多个subplot图像代码如下 http://jonathansoma.com/lede/data-studio/classes/small-multiples/long-explan ...

  10. 西电源ubuntu12

    deb http://linux.xidian.edu.cn/mirrors/ubuntu/ precise main restricted universe multiverse #deb-src ...