Jquery Mobile 自定义按钮图标


Posted in Javascript onNovember 18, 2015

很多朋友都反应jquery mobile自带的图标真的是少之又少,另外我也觉得图标偏小(系统自带的是18*18的),于是琢磨着如何自定义按钮图标,下面小编把我的方法分享给大家。

刚接触Jquery Mobile框架,遇到个很现实问题,就是如何自定义按钮图标,我觉得jquery mobile 自带的图标实在是太少了,另外我觉得图标也偏小(系统自带的应该是18*18的)下面是我的方法,希望大家踊跃拍砖。

1、第一种方法是比较简单的,但是有前提,前提就是你自定义的图标大小应该和系统内置的保持一致,这样排版上才不会出问题,具体方法如下:

首先定义css文件

.ui-icon-email{
  background:url('./images/email.png') no-repeat 0px 0px;
}
data-icon="email"

就可以了。

2、第二种方法,这种方法适合自定义图标大小和系统不一致的情况,闲话不说了,先上效果图,

Jquery Mobile 自定义按钮图标

3、代码如下:

【css代码】

/** 图标大小 **/
.user-ui-btn .ui-icon{
 width:36px;
 height:36px;
}
/** 设置字体大小,由于图标变大,所以文字适当的调大一些 **/
.user-ui-btn .ui-btn-text{
 line-height:36px;
 font-size:20px;
}
/** 无文字按钮 **/
.user-ui-btn .ui-btn-icon-notext{
 width:42px;
 height:42px;
 webkit-border-radius: 2em;
 border-radius: 2em;
}
/** 图标左边 **/
.user-ui-btn .ui-btn-icon-left .ui-btn-inner {
 padding-left: 50px;
}
.user-ui-btn .ui-btn-icon-left .ui-icon{
 left:10px;
 margin-top: -18px;
}
/** 图标在右边 **/
.user-ui-btn .ui-btn-icon-right .ui-btn-inner {
 padding-right: 50px;
}
.user-ui-btn .ui-btn-icon-right .ui-icon{
 right:10px;
 margin-top: -18px;
}
/** 图标在上边 **/
.user-ui-btn .ui-btn-icon-top .ui-btn-inner {
 padding-top: 50px;
}
.user-ui-btn .ui-btn-icon-top .ui-icon{
 top:10px;
 margin-left: -18px;
}
/** 图标在下边 **/
.user-ui-btn .ui-btn-icon-bottom .ui-btn-inner {
 padding-bottom: 50px;
}
.user-ui-btn .ui-btn-icon-bottom .ui-icon{
 bottom:10px;
 margin-left: -18px;
}
/** 定义自己的图标 **/
.user-ui-btn .ui-icon-demo1{
 background:url('./images/gentleface_full.png') no-repeat -108px 0px;
}
.user-ui-btn .ui-icon-demo2{
 background:url('./images/gentleface_full.png') no-repeat -180px -180px;
}
.user-ui-btn .ui-icon-demo3{
 background:url('./images/gentleface_full.png') no-repeat -252px -360px;
}
.user-ui-btn .ui-icon-demo4{
 background:url('./images/gentleface_full.png') no-repeat -36px -180px;
}
.user-ui-btn .ui-icon-demo5{
 background:url('./images/gentleface_full.png') no-repeat -504px -612px;
}
<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.3.2.css" />
 <script src="js/jquery.js"></script>
 <script src="js/jquery.mobile-1.3.2.js"></script>
 <link rel="stylesheet" type="text/css" href="js/demo.mobile-1.0.css" />
</head>
<body>
<div data-role="page" id="page">
 <div data-role="header">
  <h1>Jquery Mobile自定义按钮</h1>
 </div>
 <div data-role="content">
  <h2>原版样式举例</h2>
  <div>
 <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="left">DEMO</a>
 <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="top">DEMO</a>
 <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="right">DEMO</a>
 <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="bottom">DEMO</a>
 <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="notext">DEMO</a>
 </div>
 <h2>自定义样式举例</h2>
 <h3>1)普通按钮</h3>
 <div class="user-ui-btn">
 <a class="user-ui-btn" href="#" data-role="button" data-icon="demo1" data-inline="true" data-iconpos="left">DEMO</a>
 <a class="user-ui-btn" href="#" data-role="button" data-icon="demo2" data-inline="true" data-iconpos="top">DEMO</a>
 <a class="user-ui-btn" href="#" data-role="button" data-icon="demo3" data-inline="true" data-iconpos="right">DEMO</a>
 <a class="user-ui-btn" href="#" data-role="button" data-icon="demo4" data-inline="true" data-iconpos="bottom">DEMO</a>
 <a class="user-ui-btn" href="#" data-role="button" data-icon="demo5" data-inline="true" data-iconpos="notext">DEMO</a>
 </div>
 <h3>2)按钮组</h3>
 <div class="user-ui-btn" data-role="controlgroup" data-type="horizontal">
   <a data-role="button" data-icon="demo1" data-iconpos="top">js</a>
   <a data-role="button" data-icon="demo2" data-iconpos="top">css</a>
   <a data-role="button" data-icon="demo3" data-iconpos="top">html</a>
   <a data-role="button" data-icon="demo4" data-iconpos="top">ps</a>
  </div>
 <div class="user-ui-btn" data-role="controlgroup">
   <a data-role="button" data-icon="demo1" data-iconpos="top">js</a>
   <a data-role="button" data-icon="demo2" data-iconpos="top">css</a>
   <a data-role="button" data-icon="demo3" data-iconpos="top">html</a>
   <a data-role="button" data-icon="demo4" data-iconpos="top">ps</a>
  </div>
 <h3>3)原始icon</h3>
 <img src="./js/images/gentleface_full.png" alt="原始icon" border=0 width=612 height=648>
 </div>
 <div data-role="footer">
  <h4>Copyright by lining</h4>
 </div>
</div>
</body>
</html>

以上内容就是本文给大家讲解的关于Jquery Mobile 自定义按钮图标的实现方法,希望大家喜欢。

Javascript 相关文章推荐
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
纯javascript制作日历控件
Jul 17 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
javascript实现对表格元素进行排序操作
Nov 18 #Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 #Javascript
javascript下拉列表菜单的实现方法
Nov 18 #Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 #Javascript
详解JavaScript中常用的函数类型
Nov 18 #Javascript
JavaScript如何动态创建table表格
Aug 02 #Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 #Javascript
You might like
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
优化PHP程序的方法小结
2012/02/23 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
运动会稿件300字
2014/02/14 职场文书
自我推荐信范文
2014/05/09 职场文书
预备党员转正考核材料
2014/06/03 职场文书
2014国庆节标语口号
2014/09/19 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
Nginx 匹配方式
2022/05/15 Servers