转载

jqueryMobile模块整理—按钮(buttons)

作为一名移动端开发小菜鸟,由于公司指定使用jQueryMobile来作为开发框架(虽然一开始我的内心是拒绝的~)。不过框架总是有可取之处的,所以从今天开始整理一下jqm(jQueryMobile简称)的模块使用方法。

1、在jqm中,不管是a标签还是input标签等,添加 data-role = "button"class="ui-btn"  属性,即可将该标签变为按钮。

jqueryMobile模块整理—按钮(buttons) jqueryMobile模块整理—按钮(buttons)

2、添加 .ui-btn-inline 类可使按钮成横排显示。

jqueryMobile模块整理—按钮(buttons)

jqueryMobile模块整理—按钮(buttons)

3、添加 .ui-corner-all  类控制按钮是否有圆角,添加 .ui-btn-icon-notext 类控制按钮是否有文本。

jqueryMobile模块整理—按钮(buttons) jqueryMobile模块整理—按钮(buttons)

4、添加 .ui-btn-icon-方向 类控制按钮与文字的位置。

jqueryMobile模块整理—按钮(buttons)

jqueryMobile模块整理—按钮(buttons)

5、添加 .ui-btn-a 类或 .ui-btn-b 类控制按钮主题,添加 .ui-shadow-icon 类控制icon阴影。

jqueryMobile模块整理—按钮(buttons)

jqueryMobile模块整理—按钮(buttons)

5、添加 .ui-mini 类或 data-mini="true" 属性控制按钮大小。

jqueryMobile模块整理—按钮(buttons)

jqueryMobile模块整理—按钮(buttons)

6、添加 .ui-disabled 类或 disabled="disabled" 属性控制按钮不可点击。

jqueryMobile模块整理—按钮(buttons)

jqueryMobile模块整理—按钮(buttons)

7、添加 .ui-btn-active 类给按钮选中状态。如果希望按钮去除jqm的自带样式,只需要添加 data-role="none" 属性。

jqueryMobile模块整理—按钮(buttons)

jqueryMobile模块整理—按钮(buttons)

总结:文章写得很简陋,只是将官网上的demo中示例重新提取了一下知识点。

正文到此结束
Loading...