自定义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. MySQL中truncate误操作后的数据恢复案例

    MySQL中truncate误操作后的数据恢复案例 这篇文章主要介绍了MySQL中truncate误操作后的数据恢复案例,主要是要从日志中定位到truncate操作的地方然后备份之前丢失的数据,需要的 ...

  2. arcpy 常用操作

    目录: 通用操作 条件函数 前提: import arcpy from arcpy.sa import * 1.通用操作 设置工作路径:arcpy.env.workspace("path_o ...

  3. 12. I2C-EEPROM

    12.1. I2C 协议简介 I 2 C ( Inter-Integrated Circuit )协议是由 Phiilps 公司开发的,由于它具引脚少,硬件实现简单,可扩展性强,不需要如 USART. ...

  4. xcodebuild自动打包上传到蒲公英的shell脚本

    注意: ExportOptions.plist (包含了证书相关信息) 该plist 文件可以通过xcode手动导出ipa之后获取到, 区分appstore 和 development的情况 #! / ...

  5. 转 zookeeper,dubbo和Nginx的区别

    Nginx是著名的反向代理服务器,也被广泛的作为负载均衡服务器 ZooKeeper是分布式协调服务框架,有时也被用来做负载均衡 那么他们的区别是什么?如何选择呢? 下面从实际场景看下他们的关系 Ngi ...

  6. Workbox使用策略

    1.什么是Workbox Strategies? 当service workers 首次被引入时,可以设定一组常见的缓存策略. 缓存策略是一种模式,用于确定service workers 在收到fet ...

  7. 34.Merge Intervals(合并序列)

    Level:   Medium 题目描述: Given a collection of intervals, merge all overlapping intervals. Example 1: I ...

  8. python socket的长连接和短连接

    前言 socket中意为插座,属于进程间通信的一种方式.socket库隐藏了底层,让我们更好的专注于逻辑.如果短连接和长连接两概率没搞明白,会被坑的爬不起来. 短连接 一次完整的传输过程,发送方输出流 ...

  9. 【串线篇】SpringMvc之强大的annotation-driven标签

    只要请求不好使就召唤mvc:annotation-driven <mvc:default-servlet-handler/> <mvc:annotation-driven/> ...

  10. 处理字符串的一些js/jq方法(去除HTML,去除空格,计算真实长度,截取中英文字符)

    去除html标签: function del_html_tags(str) { var words = ''; words = str.replace(/<[^>]+>/g,&quo ...