这篇文章主要介绍了jQuery移动页面开发中主题按钮的来源gao@dai!ma.com搞$代^码网设计示例,jQuery是当今最具人气的JavaScript开发类库,需要的朋友可以参考下
在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示，也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子
“A”主题下的图标按钮 data-theme=”a”
<div> <div> My buttonMy buttonMy buttonMy buttonMy buttonMy buttonMy buttonMy buttonMy buttonMy button</div><div> My buttonMy buttonMy buttonMy buttonMy buttonMy buttonMy buttonMy buttonMy buttonMy button</div></div>
“B”主题下的图标按钮 data-theme=”b”
“C”主题下的图标按钮 data-theme=”c”
主题按钮
Query移动具有丰富的主题系统，让您完全控制如何按钮风格。当链接添加到一个容器，它是自动分配符合其母棒或内容框的视觉整合按钮到父容器的主题样本的信，就像一条变色龙。所以一个按钮放在内容与主题为“一”（在默认主题黑色）将自动分配按钮的主题是“a”（在默认主题木炭）。a为黑，b为灰底蓝，c为灰底灰，d白底白色 ，e黄底黄色。这是默认的主题的主题对按钮的例子。所有的按钮都有相同的HTML标记：
<div> <div class="ui-body ui-body-a"><h4>Swatch "a"</h4>Button</div><div class="ui-body ui-body-b"><h4>Swatch "b"</h4>Button</div><div class="ui-body ui-body-c"><h4>Swatch "c"</h4>Button</div><div class="ui-body ui-body-d"><h4>Swatch "d"</h4>Button</div><div class="ui-body ui-body-e"><h4>Swatch "e"</h4>Button</div></div>
分配系统样式 data-theme
给按钮增加data-theme=”字母”属性，可以手动的给按钮添加样式，使得按钮不一定非要与父容器的样式相符
<div> Swatch aSwatch bSwatch cSwatch dSwatch e</div>
主题的变化 ui-body
默认有五套风格，ui-body-a,ui-body-b,ui-body-c,ui-body-d,ui-body-e
<div class="ui-body ui-body-a"> Swatch aSwatch bSwatch cSwatch dSwatch e</div>
<div class="ui-body ui-body-b"> Swatch aSwatch bSwatch cSwatch dSwatch e</div>
以上就是jQuery移动页面开发中主题按钮的设计示例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery移动页面开发中主题按钮的设计示例
转载请注明原文链接：jQuery移动页面开发中主题按钮的设计示例
