Jquery Mobile 自定义按钮图标

很多朋友都反应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自定义按钮
 
 

  
原版样式举例
  

 DEMO
 DEMO
 DEMO
 DEMO
 DEMO
 
 
自定义样式举例
 
1）普通按钮
 

 DEMO
 DEMO
 DEMO
 DEMO
 DEMO
 
 
2）按钮组
 

   js
   css
   html
   ps
  
 

   js
   css
   html
   ps
  
 
3）原始icon
 
 
 

  
Copyright by lining
 

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