自定义jQuery Mobile工具栏按钮
自定义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工具栏按钮的更多相关文章
- jQuery Mobile 工具栏
jQuery Mobile 工具栏 工具栏元素常被放置于页眉和页脚中 - 以实现"已访问"的导航: 标题栏 页眉通常会包含页眉标题/LOGO 或一到两个按钮(通常是首页.选项或搜索 ...
- [ 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& ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
- jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...
- 点击jQuery Mobile的按钮改变颜色
jquery-mobile-移动 我有这样的代码来改变点击一个按钮的颜色: $('.fav').live('click', function(e) { $(this).buttonMarkup({ t ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- (转)经典收藏 50个jQuery Mobile开发技巧集萃
(原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃 ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- 皓轩的jquery mobile之路(二)
jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 编写代码要注意最外层div需要添加data-role="page" ,标题需要添加dat ...
随机推荐
- wndr4300刷任意系统及刷回官方原厂系统
4300是目前性价比比较高的可玩路由器了,如果要买的话要买v1版本的,目前卖的都是v2,v2刷不了第三方系统. 注意:如果带宽低于50M,可以随便刷第三方系统玩,如果高于50M的带宽或者想组建千兆局域 ...
- Android深度探索-卷1第二章心得体会
这章介绍了搭建Android开发环境的的搭建,主要是在Linux上搭建Android开发环境总体来说因为都是在Linux下开发的,so,只介绍了在Linux环境下的搭建在搭建过程中全是命令操作,和Wi ...
- C语言博客作业04
问题|答案 -|:-:|-: 这个作业属于哪个课程|c语言程序设计I 这个作业的要求在哪里|https://edu.cnblogs.com/campus/zswxy/CST2019-4/homewor ...
- Spring Boot 支持 HTTPS 如此简单,So easy!
这里讲的是 Spring Boot 内嵌式 Server 打 jar 包运行的方式,打 WAR 包部署的就不存在要 Spring Boot 支持 HTTPS 了,需要去外部对应的 Server 配置. ...
- Https socket 代理
https直接与服务器通过ssLsocket连接可行 import java.io.InputStream;import java.io.OutputStream;import java.securi ...
- YARN学习笔记
分布式资源调度框架 Yet Another Resource Negotiator YARN 不同框架使用相同的系统资源 YARN的核心组件(架构) ResourceManager RM 整个集群同一 ...
- 深入学习Redis持久化
一.Redis高可用概述 在介绍Redis高可用之前,先说明一下在Redis的语境中高可用的含义. 我们知道,在web服务器中,高可用是指服务器可以正常访问的时间,衡量的标准是在多长时间内可以提供正常 ...
- NOIP2016D1T3 换教室 (概率DP)
NOIP2016D1T3 换教室 题目大意:有n个时间段,每个时间段i有两个教室a[i],b[i]可以上课,如果不申请换教室就在教室a[i]上课,如果换教室就在b[i]上课.你最多只能换m次教室.教室 ...
- Codeforces 1190C Tokitsukaze and Duel game
题意:有一个长为n的01串,两个人轮流操作,每个人可以把某个长度为m的区间变成相同颜色,谁在操作后整个串颜色相同就赢了.问最后是谁赢?(有可能平局) 思路:容易发现,如果第一个人不能一击必胜,那么他就 ...
- 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...