1、jQuery Mobile 自定义导航条图标

aaarticlea/png;base64,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" alt="">

/*------------------------------------------------   自定义图标       --------------------------------------------------------*/
.ui-footer .ui-icon { /* 设置图标的大小,边框 */
width: 40px;
height: 40px;
box-shadow:none;
margin-top:0px;
}
.ui-footer .ui-btn-icon-top .ui-icon { /* 设置图标距导航栏距离 */
top: 0px;
} .ui-footer .ui-btn-icon-top .ui-btn-inner .ui-icon { /* 设置图标距左边距离 */
position: absolute;
left: 50%;
margin-left: -18.6px;
} .ui-navbar li .ui-btn-icon-top .ui-btn-inner { /* 设置文字距上边距离 */
padding-top: 38px;
} .ui-footer .ui-btn-text {/* 设置文字大小,及其宽度 */
font-size:14px;
font-weight: 100;
} /* 设置自定义图标 */
.ui-icon-custom_home_normal {
background: url(../image/home_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;
} .ui-icon-custom_message_normal {
background: url(../image/message_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;
} .ui-icon-custom_traffic_normal {
background: url(../image/traffic_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;
} .ui-icon-custom_find_normal {
background: url(../image/find_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;
}

/* 设置空白图标 */
.ui-icon-none {
    
    filter:alpha(opacity=0);  
    -moz-opacity:0;  
    -khtml-opacity: 0;  
    opacity: 0;
}

jQuery Mobile 自定义导航条图标的更多相关文章

  1. iOS11自定义导航条上移处理

    image.png 在自定义导航条时,通常会继承系统的UINavigationBar,但如上图,在iOS11上,导航条改动了.自定义导航条代码 -(MBNavigationBar *)myNavBar ...

  2. 利用js和JQuery定义一个导航条菜单

    利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...

  3. jquery mobile 自定义图标

    Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任 ...

  4. JQuery Mobile - 自定义图标!

    环境 jquery1.9.1.js jquery mobile 1.4.2版 图标制作 18x18px 底透明的png图标 使用图标,这个过程开始怎么弄都不行,只有个灰色的圆出现,不见图标:或者出现图 ...

  5. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

  6. React Native中自定义导航条

    这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的 ...

  7. jQuery Mobile 自定义按钮图标

    自定义css样式---红色部分必须加上 .ui-icon-user-black:after {background:url('../image/user-black.png') no-repeat 0 ...

  8. iOS7新特性-完美解决iOS7关于自定义导航条UIBarButtonItem偏移的问题

    前言: 本文由DevDiv社区@Vincent 原创,转载请注明出处! http://www.devdiv.com/iOS_iPhone-ios_ios_uibarbuttonitem_-thread ...

  9. 可自定义导航条功能案例ios项目源码

    可定制的navigationitem ,当我们使用系统的方法设置navigationItem的leftItem或者rightItem时,我们会 发现item位置会有偏差(左边的偏右,右边的偏左).当设 ...

随机推荐

  1. 有根树的表达 Aizu - ALDS1_7_A: Rooted Trees

    有根树的表达 题目:Rooted Trees Aizu - ALDS1_7_A  A graph G = (V, E) is a data structure where V is a finite ...

  2. Bootstrap+Ajax+HTML 动态表格分页

      1.HTML页面:(bootstrap的模态框) 触发模态框: <div class="col-lg-6"> <div class="input-g ...

  3. 详解linux io flush

    通过本文你会清楚知道 fsync().fdatasync().sync().O_DIRECT.O_SYNC.REQ_PREFLUSH.REQ_FUA的区别和作用. fsync() fdatasync( ...

  4. C# 笔记 获取程序当前目录

    在C#中,我们有以下几种方式获取程序当前目录: Console.WriteLine(System.IO.Path.GetDirectoryName(Assembly.GetExecutingAssem ...

  5. 在Python中写入文件时,权限被拒绝错误

    我想创建一个文件并在python中写一些整数数据.例如,我有一个变量abc = 3,我试图将它写入一个文件(它不存在,我假设python将自己创建): fout = open("newfil ...

  6. js 可迭代对象

    作用:可以简化使用循环语句初始化一个变量记录迭代位置的操作 function createIterator(iterms) { let i = 0 return { next() { let done ...

  7. windows10图形化连接CentOS7

    前提:CentOS已经安装图形化,安装教程可以百度 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Core) 安装 ...

  8. hashRouter and BrowserRouter

    <html><body> <div> <button class="btn" onclick="btnFun();"& ...

  9. go语言从例子开始之Example12.func函数

    函数 是 Go 的中心.我们将通过一些不同的例子来进行学习. Example: package main import "fmt" //定义一个函数使用关键字func //函数名名 ...

  10. 一、创建且运行JPA工程

    1. 创建JPA 工程 (1)选择创建 JPA Project,注意不是Java Project (2)JPA version选择 2.0 (3)选择用户库,否则会出现 At least one us ...