jQuery移动定制按钮图标
刚刚接触jQuery Mobile框架中,有一个非常现实的问题是,如何自定义按钮图标,我认为这是太小的jQuery移动自己的图标,我觉得图标很小(车载系统应该是18×18)这是我的方法,希望大家踊跃拍砖。
1,第一种方法比较简单,但有一个前提。前提是自定义图标的大小应该与内置系统一致,这样排版就不会有问题了。
首先定义CSS文件
UI图标电子邮件{
背景:url('。 /图像/电子邮件。png)没有重复0px 0px;
}
数据图标电子邮件
没关系
2,第二种方法,这种方法适用于自定义图标的大小和系统的不一致性。
三.代码如下:
{ CSS代码}
图标大小***
用户界面按钮。UI图标{
宽度:36px;
身高:36px;
}
*设置字体大小,图标变大,所以文本适当大。
用户界面UI按钮,按钮,文本{
行高:36px;
字体大小:20px;
}
没有文本按钮***
用户界面UI按钮,按钮,图标notext {
宽度:42px;
身高:42px;
WebKit的边界半径:2em;
边界半径:2em;
}
*左侧的图标*
user-ui-btn.ui-btn-icon-left.ui-btn-inner {。
左:50px填充;
}
用户界面UI按钮,按钮,图标UI图标{左。
左:10px;
边距:- 18px;
}
右边的图标***
user-ui-btn.ui-btn-icon-right.ui-btn-inner {。
填充右:50px;
}
用户界面UI按钮,按钮,图标的权利。UI图标{
右:10px;
边距:- 18px;
}
顶部的图标***
user-ui-btn.ui-btn-icon-top.ui-btn-inner {。
50px垫上;
}
用户界面UI按钮,按钮,图标上方。UI图标{
上图:10px;
margin-left: - 18px;
}
底部的图标***
user-ui-btn.ui-btn-icon-bottom.ui-btn-inner {。
座垫:50px;
}
用户界面UI按钮,按钮,图标底部。UI图标{
底部:10px;
margin-left: - 18px;
}
定义你自己的图标***
用户界面按钮。ui-icon-demo1 {
背景:url('。 / / gentleface_full PNG图像。)没有重复108px 0px;
}
用户界面按钮。ui-icon-demo2 {
背景:url('。 / / gentleface_full PNG图像。)没有重复180px - 180px;
}
用户界面按钮。ui-icon-demo3 {
背景:url('。 / / gentleface_full PNG图像。)没有重复252px - 360px;
}
用户界面按钮。ui-icon-demo4 {
背景:url('。 / / gentleface_full PNG图像。)没有重复36px - 180px;
}
用户界面按钮。ui-icon-demo5 {
背景:url('。 / / gentleface_full PNG图像。)没有重复504px - 612px;
}
移动定制按钮
原始风格的例子
演示
演示
演示
演示
演示
自定义风格的例子
1)普通按钮
演示
演示
演示
演示
演示
2)按钮组
js
CSS
HTML
PS
js
CSS
HTML
PS
3)原始图标
著作权法
这是本文的内容,讲解了关于jQuery移动定制按钮图标的实现方法,希望大家喜欢它。