自定义jQuery Mobile工具栏按钮

1、实现效果

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfcAAAAyCAIAAADORQXDAAALwklEQVR4nO2dS2/bVhbH70YKED/qd2zFkkjxoVcsv1MnLlCgi66K7op+gHRToICBDiZoik5SW67dZTfpohsjyDiRIsdZ5AMoEzm27M0ARQtJjYR2XaCguarbILizuJeHlxItO37JI50/iB/iw8PDq6PLPy9poyUUhUKhUM0r0ugBoFAoFOoUhS6PQqFQzSySR6FQKFTziszOzr7zzjtIJBKJbDLytfzs7Oz169eBr2ZmcDvmJvYTiUQiG0Xu8teuXbt+/Tqw4RbZBJvYTyQSiWwUbZefmZkBNtwim2AT+4lEIpGNInf5t99+e2ZmBghWVRVvKYp+fdpHIZFI5CnRdvmrV68CRZcX4y1FaMIZHIVEIpGnRO7y09PTV69eBYJVVcVbiqJfn/ZRSCQSeUq0XX5qagoourwYRx5IaF3DR4JEIpHT4PKTk5NTU1NAsKqqOPJAii5/HsaDRCJbnLbLT0xMAEWXF+PIAwmta/hIkEgkchJcfnx8fGJiAghWVRUXOTU1NT4+/vTp03K5vF9OC1J0+fMwHiQS2eK0XX5sbAwourwYB05OTo6NjX333XeU0mKx6JrTmoTWNXwkSCQSOQ4uP+oUWNWom8bHx0dHR2/dukUp/e23395//33XtNZU/dahUCjUGct2+UQiARStSownEomxsbFEInHjxo29vT3TND/66KPanFYmtK7hI/n/pt5/gQi6MKCfXH2pk3QGj1sn2Ek6pUZ3CYk8BLnLjzgFVlUVTyQSIyMjH3744R9//PHq1atPP/10ZGRkdHR0BGVpv9ahDq9AJyFzWUP8b2Mb2TlyoV87fm2t/wJZKdDSo4YXQaHOSLbLX7lyBShalRi/cuXKu+++W6lUKKW3b98esXy/KsdJrc9LCCGko6//AiHE269pfV5yoV9zZAY6CCGkIwARFvD2aVU1rUQeCXQSQmqqVZElkc5AvXGeDKF1p3qWZmagY6Xg+n9BMLL/6NeOW39xw6CU0tKj49SBIo3uFRJ5CHKXjzsFVlUVn5iY2NnZoZR+//338Xh8ZGQkvp/8HdbDtrUqq+Q3DEqpsfHlzaxBjewc8fapkP7vAqWUvnxSFdjdWa6qW5X45CUzgJt+Z57K7y2EEEK4bRRWhHcAwslPUvu1DnU4qX33uMdXYC4s75gsZAqzwfEFi18mn3kdfiGD71f7vHw2FlYIIR1+8QDXaSHuq1fEUcMqjEKdC9kuH4vFgKJVsQjT06dPKaXr6+sQEY9y8EnFsQ4zd5Zjy5vM5fPWrt18Mh6PDXeADzMb9vYq/g4xwC+cWCxmmfwvD+ACrnVwb58SiyU3HE/8LivDjWS98R+V0LoTr9wSVL98ZrCpsSzGl3dMam4vQ2S4w/lKx8jOWTMk/qjEJ4SQYWTnOvw1k6KUjsX8HcTx6MAzY/F4XOn1OvYZ2TlvrxqvLvIorvZ6nY8fhRVvr3Iu+olEgstHnQKrEoM//PADpTSXyyUSieghlS6xq0n4ydhYiEaj0fUKrWwvLUGOeKE9v3mv5pmd1Ri+z1by29vm/v5tbi9FowsbBq1avTuX9nwcJy3X1qEOK/a1UWNzqU7ScLvbO53CSvtwNOoyn/ju+8PRJee0qaxbE6omMxqNDt/M1iwUjGdfhmqKhPidyZH4/M6Z9AuFOlhsTpJoNBqJRICiVbHIt99+Syn98ccfr127Jmbuw1CPV1hoW17L3DU7Jxhu+3BEuBMs5AxKqVEsGZTS3e2laDQSibALv5SORuQe5v7s395a+2YVhaPqyMgtHPQpjkJo3YlXbgnyr62UrpMTelAEl45GI5HI0vYut+fLEdvlrfmz/pL9zGqyKUZLaVZtvcKdutdrPxeW0sJZdreXhExzeykKk6uUjkYikejSpv3+hpC557vi2JDIhpO7fNgpsCqI/P33369fv/7kk0/C4XAsFgsfoG/qrbVFVdbDlsuHw+F5dgnulismLa60+8LhcDh8+zlz+bDPWlyV0nXOUFkPh6FUvbV8bv6gT3EU1bYO9QbiM6D4QNo/h00INmO4MszZiw+kMJ9Pwm5HYD7nPNjXzrxZXLeX0u5nqR6ltW+9LE5ANuf45EWhGi/b5XVdB4pWxSLJZJJS+tNPP83MzIiZBzBdFFY5bbdy3K91Xfe1kzZfdQ671ozc7Z7PswYtrHh7JF2Hu0C6aF+FutS9z1q+zRcO67rOL8T9xVz+DT7L4QitO/HKLcFvtnYppdR4dktyxH3t8M1all5K28dySzZeLIataVJMW3vTYr51G2F7fW1u735KGfezAG2XZ5HFfM2So3CvRzoH/UQiweU1TdN1HQhWJcbv3r1LKd3Y2IjH41X5tfS1ib8aZarkXxiU0sJqUOr2rBRoYaVtSNN0MG/bfzP8qjGyn3dLqSK78rSM9cK1mNJ0lwuLn+WxpunWhVh/LX/gpzgCRZc/jfrNzkVu89m5tiErzqYLLax4uiVd1xZf8DckbT52VLCb/x7n5WNd01Lg8rymHdA1jRt0YVXSNE1a5fOz/FjTdX2IvaQ3cvPCWe51S5qm6brU7SGEEE93EFy+sBrUdV0bYnPd050R/+LAyM2fh34ikZrt8qqqAkWXZxGmJ0+eUErX19chIh4lck18iC2meDxTYhew9XxcfqxpKrsIiylN075m7+VzX2vaY1Zgd/PrVJFfM8l8Of+iyHLVwTb3pTxpG9I0VVX3vQtYMvPJOuM/MqF1J165RZi0vjj7Dg2vU8x8UlVhbkAGTKc1VbVdPmXVtAOqZpm3kZ0jxPPFhv2DvSYxnv9LVTXtMXufb+3kJ9nNL6pqUizSnSk7EnmZ3a3Fc9FPJJK7vKIoqqoCwaqq4rFYbHNzk1J69+5dqFKV46Dl4DzCrw52xW5+4WkbdOaAyyuKoq6VqZlfSya5y99RVFVVUszlraNcVEwpiqoGujyEeLoGuzyEkIuD/KZTuN/VdZG0DQa6PMTTFag38qNSdPnTqN8KdCwRHPdlK8cto7zG9tqmzmsKLq8oytpLOMLI/df1TIXVgKooStJloVBeYyMUi9xxSzTzyXPQSSRSURQ2JYmiKKFQCCi6vBgPhULT09OlUolS+tVXX0GVqhybgoOHLl203+CU0or/i2dGYeXiIM9xvJe/I9QZXi1QSo0XSSUUCoHLi0c5l3zFlKKELv0za1Bq5FI5HgqF1srUNMsv/lPgf0ltZOcuDu4/8qMSWnfilVuLC1um0zQXqnIc1mpuLcBefgcor1kRO1BV2dxaCAllyms8Vagm3k7EMdiHmfmkEgotOIy+drRIZOPIXV52CqxKdtN77733+++/v379+saNG7IsK4rikjRw0X54/SX9lsfxjt7IznFPLmfkh7Xv5W/L8uW3PKJ3v8ywsg+LlNLiQ7n2KEvFh7I8cJ8/NGc2d533AscvCgqrA64f8Diq3zoUCoU6Y9kuL0kSULQqMS5JUigUkiTp448//vPPP03T/OCDD2pzZFmWMvYiqJyZZ8snc2tBkpx7ILOckWWZ5Zlb87LsWMuZW/O8cqbMcsWjrPOyo8sZmWWZW/OSXLUk5GdlcdPcyriM/HiE1p14ZSQSiTwCucsHnQKrCrpJluVgMPjZZ59RSn/99dfZ2VnXtNZU/dahUCjUGct2+UAgABStSowDZVkOBALsj+gLhYJrTmsSWtfwkSCRSGQQXN7vFFiVf38Fg0G/359KpX7++ec6aa2mw7QOhUKhzky2yw8PDwNFqxLjyAMJrWv4SJBIJNIPLn/ZKbCqy6g3FLYOhUKdK9ku7/P5gKJViXHkgYTWNXwkSCQSeRlcfsgpsKoh1BsKW4dCoc6VbJcfHBwEilYlxpEHElrX8JEgkUjkELj8JafAqnA78nYJhUKhzoFslx8YGAA23CKbYBP7iUQikY0id/l+pxpukU2w9aNQKNQ5kO3yfX19SCQSiWwycpfvRaFQKFQzynb5np4eJBKJRDYZuct3o1AoFKoZxV1+EoVCoVDNKO7yeygUCoVqRnGX/+uvv/b29pBIJBLZZGQu/z+wYnGFgct2PwAAAABJRU5ErkJggg==" alt="">

2、代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css" media="screen"> <!-- 自定义CSS:工具栏自定义带文字按钮 -->
.toolbar_btn {
margin-left:5px;
height:35px;
overflow:hidden;
}
.header_btn div {
float:left;
height:100%;
line-height:35px;
}
.header_btn div:last-child {
text-decoration:none;
font-size:14px;
color:#FFF;
font-family:Microsoft YaHei;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:80px;
}
<!-- The End --> </style>
</head>
<body> <div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Contacts</h1>
<a href="#pageHome" class="ui-btn-left" data-transition="slidefade" data-role="none">
<div class="header_btn">
       <!-- 使用<img> 的 width、height、padding、控制图片的大小和位置 -->
<div><img src="data:images/btn_back.png" width="10" height="21" style="padding:6px"/></div>
<div>我的信息</div>
</div>
</a>
</div> <div data-role="content">
<p>在此处插入正文</p>
</div> <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="f">
<h1>在此处插入页脚文本</h1>
</div>
</div> </body>
</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. Houdini学习笔记——【一】散落苹果

    [案例一]散落的苹果 0.渲染 1.sop使用 - 苹果主体:curve绘制刨面曲线,revolve车削得到苹果主体,uvtexture来调整uv,convert继续转换为polygon,fuse缝合 ...

  2. 使用 jQuery 实现 radio 的选中与反选

    使用 jQuery 实现 radio 的选中与反选 我们知道在 Html 中当我们选中一个radio后,再次点击该 radio,那么该 radio 依然是一个选中的状态,但是有时我们需要实现这样的逻辑 ...

  3. zabbix真的很简单 (安装篇)

    系统环境: Centos 6.4 一直觉得 zabbix 很简单,但是还是有好多人看了好多文档都搞不明白怎么用,我从2013年使用到现在也小有心得,如果时间允许,很高兴与大家一起分享我在使用过程中的一 ...

  4. web测试点

    一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#¥%……&*?[]{}”特别要注意单引号和&符号. 禁止直接输入特殊字符时, ...

  5. Visual Studio禁用IntelliSense

    通过Everything搜索feacp.dll,然后修改其名字或者直接删除之. 重启Visual Studio.

  6. selenium,webdriver模仿浏览器访问百度 基础2

    学python理念  :  代码要多敲 一定要多敲 哪怕很基础  注释要清晰 由于基础1有一些注释写的很详细, 在这里有些注释没有写的很详细 可以配合基础1一起学习哦 from selenium im ...

  7. FastReport.net 使用 WebForm 实现打印 最简单版

    1.安装demo 2.设计模版 设计器 -->report-->添加数据源-->添加sql查询->起名字(车信息)下一步-->填写sql语句(select top 1 * ...

  8. web编程非常实用的在线工具大全---转载

    代码对比/归并: http://www.matools.com/compare 正则表达式: http://www.matools.com/regex js/css压缩: http://www.mat ...

  9. 同事遇到了一个问题(在DllMain函数之前抢控制权)

    同事有个需求,他的进程会加载一个DLL,他需要在那个DLL的DllMain函数执行之前控制DLL,修改DLL的内存. 以上工作要求全部在应用层执行. 这个其实有点悲剧. 因为这个需求其实有点坑,因为需 ...

  10. Codeforces 1203F (贪心, DP)

    题意:有n个任务,你的初始rating是m, 这n个任务有两个指标:完成这项任务所需的最低rating(a[i]),以及完成这项任务后rating的变化(可能为负)(b[i]).rating不能为负. ...