Jquery Mobile 自定义按钮图标_jquery
程序员文章站
2022-03-18 19:59:10
...
很多朋友都反应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、第二种方法,这种方法适合自定义图标大小和系统不一致的情况,闲话不说了,先上效果图,
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; }
以上内容就是本文给大家讲解的关于Jquery Mobile 自定义按钮图标的实现方法,希望大家喜欢。
推荐阅读
-
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
-
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
-
jQuery Validate 相关参数及常用的自定义验证规则
-
.net jquery绘制自定义表单源码分享
-
Jquery自定义button按钮的几种方法
-
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
-
jQuery插件ContextMenu自定义图标
-
解决自定义$(id)的方法与jquery选择器$冲突的问题
-
使用jquery自定义鼠标样式满足个性需求
-
Jquery基于Ajax方法自定义无刷新提交表单Form实例