作为一名移动端开发小菜鸟,由于公司指定使用jQueryMobile来作为开发框架(虽然一开始我的内心是拒绝的~)。不过框架总是有可取之处的,所以从今天开始整理一下jqm(jQueryMobile简称)的模块使用方法。
1、在jqm中,不管是a标签还是input标签等,添加data-role = "button" 或class="ui-btn" 属性,即可将该标签变为按钮。
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104729093-675036952.png)
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104742327-1352812719.png)
2、添加.ui-btn-inline类可使按钮成横排显示。
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104751859-407922509.png)
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104759546-1775766894.png)
3、添加.ui-corner-all 类控制按钮是否有圆角,添加.ui-btn-icon-notext类控制按钮是否有文本。
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104808609-290773907.png)
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104816827-1065347763.png)
4、添加.ui-btn-icon-方向类控制按钮与文字的位置。
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104848077-646753675.png)
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104835765-1861904128.png)
5、添加.ui-btn-a类或.ui-btn-b类控制按钮主题,添加.ui-shadow-icon类控制icon阴影。
![](https://note.wiz.cn/api/document/files/unzip/bfbcb791-6e5a-4986-b549-54713798fb3a/5a5217eb-843e-47b7-af6e-565e8156307f.444/index_files/5aa896e5-2139-4a0d-93bb-a0d05063fd99.png)
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104908296-1314124828.png)
6、添加.ui-mini类或data-mini="true"属性控制按钮大小。
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225105153781-1255900125.png)
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225105202218-1870537916.png)
7、添加.ui-disabled类或disabled="disabled"属性控制按钮不可点击。
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104937296-1649045835.png)
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225104945421-228200176.png)
8、添加.ui-btn-active类给按钮选中状态。如果希望按钮去除jqm的自带样式,只需要添加data-role="none"属性。
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225105214343-1888747500.png)
![](https://images2015.cnblogs.com/blog/826017/201512/826017-20151225105221249-626665714.png)
总结:文章写得很简陋,只是将官网上的demo中示例重新提取了一下知识点。