当前位置:Gxlcms > JavaScript > jQuery移动页面开发中主题按钮的设计示例

jQuery移动页面开发中主题按钮的设计示例

时间:2021-07-01 10:21:17 帮助过:33人阅读

这篇文章主要介绍了jQuery移动页面开发中主题按钮的设计示例,jQuery是当今最具人气的JavaScript开发类库,需要的朋友可以参考下

在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示,也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子

"A"主题下的图标按钮 data-theme="a"

2015124175139841.jpg (812×135)

"B"主题下的图标按钮 data-theme="b"

2015124175201898.jpg (809×114)

"C"主题下的图标按钮 data-theme="c"

2015124175220352.jpg (820×123)

主题按钮

Query移动具有丰富的主题系统,让您完全控制如何按钮风格。当链接添加到一个容器,它是自动分配符合其母棒或内容框的视觉整合按钮到父容器的主题样本的信,就像一条变色龙。所以一个按钮放在内容与主题为“一”(在默认主题黑色)将自动分配按钮的主题是“a”(在默认主题木炭)。a为黑,b为灰底蓝,c为灰底灰,d白底白色 ,e黄底黄色。这是默认的主题的主题对按钮的例子。所有的按钮都有相同的HTML标记:

2015124175303944.jpg (825×645)

分配系统样式 data-theme

给按钮增加data-theme="字母"属性,可以手动的给按钮添加样式,使得按钮不一定非要与父容器的样式相符

2015124175326633.jpg (820×74)

主题的变化 ui-body

默认有五套风格,ui-body-a,ui-body-b,ui-body-c,ui-body-d,ui-body-e

2015124175344754.jpg (819×87)

2015124175401990.jpg (814×84)

2015124175420387.jpg (833×395)

以上就是jQuery移动页面开发中主题按钮的设计示例的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行