摘要:[jQuery Mobile]JQM的控件群组与小图示如何使用
范例下载
想必很多人在一开始使用JQM的时候都被官方文档里面的一些展示所吸引，简单以上手的特性也让他的使用者越来越多
新手从官方下载的JQM zip文件能找到JS跟CSS外里面还有几个图档
- ajax-loader.gif(异步时默认的Loading动画效果)
- icons-18-black.png
- icons-18-white.png
- icons-36-white.png(HD版本)
- icons-36-white.png(HD版本)
一般在套用JQM后的网页应该长相如下
源代码如此:
原始页面
修改后
Buttons
Link-based button
在这边我们可以透过设定控件群组与设定icon的方式来添加画面上的配置，使UI更容易让使用者清楚功能是在干嘛 群组设定的方式是透过data-role="controlgroup"的方式来设定而后可以针对 data-type来设定horizontal(水平)或是vertical(垂直)
icon设定的方式是透过data-icon="home"的方式来设定而后可以针对data-iconpos来设定上(top)、下(bottom)、左(left)、右(right)或无文字(notext)
而以下是全部可用的图示的清单
| Value | Icon |
|---|---|
| alert |
|
| arrow-d |
|
| arrow-l |
|
| arrow-r |
|
| arrow-u |
|
| back |
|
| check |
|
| delete |
|
| forward |
|
| gear |
|
| grid |
|
| home |
|
| info |
|
| minus |
|
| plus |
|
| refresh |
|
| search |
|
| star |
|
套版完后的模式就可以长这样搂
修改后
套上群组与icon后页面
Button Icons(icon位置在左)
Home
Configure
Search
Button Icons(icon位置在上、右、下与无文字)
Home
Configure
Search
Refresh
如果针对以上的默认icon觉得不够用或是想要客制的话其实也很简单
流程只需更换图片后在将你图片上各区块的icon写好对应的CSS class对应的图片位置
修改方式为先打开JQM的CSS找到/* Icons的注解部分先将指定的图片换成你的再根据下方的各icon类型做扩充或修正即可，如下图处
如果觉得文章还不错麻烦请在文章最上面给予推荐，你的支持是小弟继续努力产出的动力！
原文:大专栏 [jQuery Mobile]JQM的控件群组与小图示如何使用
原文地址：https://www.cnblogs.com/chinatrump/p/11505095.html
时间： 2024-08-20 22:10:56