jquerymobile知识点:实现toolbar下方显示,自定义图标!
css:
.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
#chat .ui-icon { background: url(images/ico_message_enter.png) 50% 50% no-repeat; background-size: 24px 22px; }
#email .ui-icon { background: url(images/ico_business_enter.png) 50% 50% no-repeat; background-size: 24px 16px; }
#login .ui-icon { background: url(images/ico_order_enter.png) 50% 50% no-repeat; background-size: 12px 26px; }
#beer .ui-icon { background: url(images/ico_balance_enter.png) 50% 50% no-repeat; background-size: 22px 27px; }
#coffee .ui-icon { background: url(images/ico_recharge_enter.png) 50% 50% no-repeat; background-size: 20px 24px; }
#skull .ui-icon { background: url(images/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; }
html:
<div data-role="footer" class="nav-glyphish-example" data-position="fixed">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
<ul>
<li><a href="baseInfo.html" id="chat" data-ajax="false" data-theme="e" data-icon="custom" data-id="baseInfo" class="next_btn" data-transition="slide">基本信息</a></li>
<li><a href="yewuCheck.html" data-ajax="false" id="email" data-theme="e" data-icon="custom" data-id="yewuCheck" data-transition="slide">业务查询</a></li>
<li><a href="yewuOrder.html" data-ajax="false" id="login" data-theme="e" data-icon="custom" data-id="yewuOrder" data-transition="slide">业务订购</a></li>
<li><a href="yueCheck.html" data-ajax="false" id="beer" data-theme="e" data-icon="custom" data-id="yueCheck" data-transition="slide">余额查询</a></li>
<li><a href="zhuanZhang.html" data-ajax="false" id="coffee" data-theme="e" data-icon="custom" data-id="zhuanZhang" data-transition="slide">转账充值</a></li>
</ul>
</div>
</div>


jquerymobile知识点:实现toolbar下方显示,自定义图标!的更多相关文章
- Android ToolBar自定义图标,关联DrawerLayout
Android5.0出现了一个可以代替ActionBar的控件ToolBar,使用更加灵活,一般我们使用ToolBar来和DrawerLayout配合使用,官方提供了一个开关类ActionBarDra ...
- Assign a Custom Image 设置自定义图标
In this lesson, you will learn how to associate a business class with a custom image. This image wil ...
- 分别用ToolBar和自定义导航栏实现沉浸式状态栏
一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...
- 为bootstrap添加更多自定义图标
From: http://blog.csdn.net/mengxiangfeiyang/article/details/45224731 Twitter Bootstrap 真是前端开发的瑞士军刀,作 ...
- Windows 8.1——将网站固定到开始菜单,自定义图标、颜色和Windows推送通知
记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务栏上,同时自定义图标及任务内容.那个功能在IE 9中被称之为JumpList.http:/ ...
- IconVault – 创建自定义图标字体的神器推荐
图标字体简单来说就是外观呈现为图标的字体,同时具有矢量图形的特征,在不同的设备上使用图标的时候就不用加载不同尺寸的图片文件,能够减少 HTTP 请求数,提高页面加载速度. IconVault 这款在线 ...
- Sencha Touch 2.2.1 Custom Icon 自定义图标
ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/1 ...
- Delphi 7使用自定义图标关联文件类型
Delphi 7使用自定义图标关联文件类型 5.2 Delphi编程(40) 版权声明:本文为博主原创文章,未经博主允许不得转载. 在开发过程中,我们经常需要属于自己的文件类型,自定义的后缀名不仅可 ...
- Android开发app如何设定应用图标下的应用名称为汉字以及自定义图标
一.应用名称为汉字 二.自定义图标
- 将网站固定到开始菜单,自定义图标、颜色和Windows推送通知
Windows 8.1——将网站固定到开始菜单,自定义图标.颜色和Windows推送通知 记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务 ...
随机推荐
- Quartz2D学习笔记(1)
********************************** 简介 *************************************** Quartz2D是⼀个二维绘图引擎,同时支持 ...
- MDK建立STM32F103*开发模板
一.整体流程 1.获取ST库--STM32F10x_StdPeriph_Lib_V3.5.0 2.新建文件夹并加载文件 3.新建工程 4.给工程添加组 5.设置"Target Option& ...
- AFNetworking的原理与基本使用-b
全称是AFNetworking 虽然运行效率没有ASI高,但是使用比ASI简单 是对NSURLConnection和NSURLSession的各自的一层包装 AFN的内部中的RunLoop AFN内部 ...
- Linux查看硬件信息,主板型号及内存硬件,驱动设备,查看设备,查看CPU。
用硬件检测程序kuduz探测新硬件:service kudzu start ( or restart) 查看CPU信息:cat /proc/cpuinfo 查看板卡信息:cat /proc/pci 查 ...
- asp.net Context.User.Identity.Name说明
今天做了一个身份验证页面,基本实现功能,却不能显示当前用户姓名,自己MSDN半天一无所获,问题就在Context.User.Identity.Name:Context是HttpContext类,Use ...
- Android模拟器——Genymotion
还在用Android原生模拟器?向你推荐一款全方位把Android原生模拟器秒成渣渣的神器:Genymotion! 需要理由? 性能卓越作为历史上最快的Android模拟器(没有之一),秒级开机关机速 ...
- linux命令 cp 递归复制 带权限复制
cp -r 递归复制源目录下所有文件及子目录 到 目标目录或文件 cp -p 把源文件或目录下的所具有的权限一同复制 到 目标目录或文件
- Oracle 行拼接 wmsys.wm_concat扩展
将多行数据拼接成一行: --wmsys.wm_concat group by a.flowid; 但有大小限制:字符串缓冲区太小,超过varchar 4000长度.扩展:更改返回类型为clob --T ...
- Hibernate criteria 混合sql语句多表关联时查询注意事项
直接进入正题 假设有一个实体类 /** * 产品分类 */ public class ProductType{ @Id private String no;//编号 private String na ...
- Vim常用的快捷键列表
insert: i:insert at now position 在光标之前插入 a:insert append 在光标之后插入 o:下面新建一行插入 s:删除后插入 <<:delete ...