自定义jQuery Mobile工具栏按钮

1、实现效果

aaarticlea/png;base64,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" 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. css > 的写法 html

    .userInfo-view .info .name::after { content: " "; display: inline-block; height: 12rpx; wi ...

  2. 103、Linux 编译 Kaldi 语音识别工具

    由于这个开源的语音识别工具Kaldi只能在Linux下面成功编译, 所以这一小节来写如何成功地在Linux下面编译Kaldi工具 (1)第一步,去github 上面把 Kaldi下载下来 git cl ...

  3. LeetCode:旋转数组

    最近看了一道题,自己做个过后又参考了网上的解法,为了加深对这个解法的理解和记忆于是有了这篇博客,供自己以后复习用 题目: 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 ...

  4. ThreadLocal相关

    转自:http://blog.csdn.net/lufeng20/article/details/24314381 ThreadLocal是什么 早在JDK 1.2的版本中就提供Java.lang.T ...

  5. [LeetCode] 627.交换性别

    给定一个 salary 表,如下所示,有 m = 男性 和 f = 女性 的值.交换所有的 f 和 m 值(例如,将所有 f 值更改为 m,反之亦然). 要求只使用一个更新(Update)语句,并且没 ...

  6. Android(一)Android Eclipse环境搭建

    SDK Manager下载实在是太慢了,不知道什么时候能下完,所以我是通过手工下载的. Android SDK 手工下载各个包然后解压到Android对应的目录 API对应的是platforms目录 ...

  7. 下载Excel文件功能通过火狐浏览器下载没有后缀名

    最近遇到一个问题,用导出Excelwe文件使用Chrome浏览器是没有问题的,但是用火狐浏览器会出现下载的Excel文件没有后缀名.检查了很多东西都没找到原因.最后和之前的下载功能做对比发现,Exce ...

  8. 新手学习 React 迷惑的点

    网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打 ...

  9. java收藏的技术资料链接

    TCP三次握手详解: https://blog.csdn.net/baiyan3212/article/details/81302448 ICE通信: https://blog.csdn.net/zh ...

  10. cookie,seesion学习

    一,为什么需要cookie和session? 1,Web应用程序是使用HTTP协议传输数据的.然而HTTP协议是无状态的协议.一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的 ...