jQuery移動(dòng)頁面開發(fā)中主題按鈕的設(shè)計(jì)示例

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：C語言|點(diǎn)擊：次

在白色圖標(biāo)后的半透明的黑色圓圈確保了在任何背景色下圖片都能夠清晰顯示，也使它能很好的工作在Jquery Mobile主題系統(tǒng)中。以下是一些在不同主題樣式下圖標(biāo)按鈕的例子

"A"主題下的圖標(biāo)按鈕 data-theme="a"

<div data-role="content"> 
 <div data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 </div>
 <div data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 </div>
</div>

"B"主題下的圖標(biāo)按鈕 data-theme="b"

"C"主題下的圖標(biāo)按鈕 data-theme="c"

主題按鈕

Query移動(dòng)具有豐富的主題系統(tǒng)，讓您完全控制如何按鈕風(fēng)格。當(dāng)鏈接添加到一個(gè)容器，它是自動(dòng)分配符合其母棒或內(nèi)容框的視覺整合按鈕到父容器的主題樣本的信，就像一條變色龍。所以一個(gè)按鈕放在內(nèi)容與主題為“一”（在默認(rèn)主題黑色）將自動(dòng)分配按鈕的主題是“a”（在默認(rèn)主題木炭）。a為黑，b為灰底藍(lán)，c為灰底灰，d白底白色，e黃底黃色。這是默認(rèn)的主題的主題對(duì)按鈕的例子。所有的按鈕都有相同的HTML標(biāo)記：

<div data-role="content"> 
 <div class="ui-body ui-body-a"><h4>Swatch "a"</h4><a href="index.html" data-role="button">Button</a></div>
 <div class="ui-body ui-body-b"><h4>Swatch "b"</h4><a href="index.html" data-role="button">Button</a></div>
 <div class="ui-body ui-body-c"><h4>Swatch "c"</h4><a href="index.html" data-role="button">Button</a></div>
 <div class="ui-body ui-body-d"><h4>Swatch "d"</h4><a href="index.html" data-role="button">Button</a></div>
 <div class="ui-body ui-body-e"><h4>Swatch "e"</h4><a href="index.html" data-role="button">Button</a></div>
</div>

分配系統(tǒng)樣式 data-theme

給按鈕增加data-theme="字母"屬性，可以手動(dòng)的給按鈕添加樣式，使得按鈕不一定非要與父容器的樣式相符

<div data-role="content"> 
 <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
 <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
 <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
 <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
 <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>

主題的變化 ui-body

默認(rèn)有五套風(fēng)格，ui-body-a,ui-body-b,ui-body-c,ui-body-d,ui-body-e

<div class="ui-body ui-body-a">
 <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
 <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
 <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
 <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
 <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>

<div class="ui-body ui-body-b">
 <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
 <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
 <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
 <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
 <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>

上一篇：C語言編程中統(tǒng)計(jì)輸入的行數(shù)以及單詞個(gè)數(shù)的方法

欄目：C語言

下一篇：C語言數(shù)組入門之?dāng)?shù)組的聲明與二維數(shù)組的模擬

本文標(biāo)題：jQuery移動(dòng)頁面開發(fā)中主題按鈕的設(shè)計(jì)示例

本文地址：http://mengdiqiu.com.cn/a1/Cyuyan/2615.html

更多C語言

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

C語言

jQuery移動(dòng)頁面開發(fā)中主題按鈕的設(shè)計(jì)示例

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀