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 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 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
DSP接收机前端设想
2021/03/02 无线电
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jQuery $.extend()用法总结
2014/06/15 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
Angular排序实例详解
2017/06/28 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Django模板语言 Tags使用详解
2019/09/09 Python
python进度条显示之tqmd模块
2020/08/22 Python
python 读取、写入txt文件的示例
2020/09/27 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
服装厂厂长职责
2013/12/16 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
转变工作作风心得体会
2016/01/23 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
如何优化vue打包文件过大
2022/04/13 Vue.js
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis