iT邦幫忙

4

JQuery Mobile 按鈕做調整-Day 11

ramya 2013-09-29 03:22:0511239 瀏覽

行種網站設計按鈕是很常使用到的樣式,所以要分享幾個按鈕修改的方法
就按鈕修改的方法,下面小小分享幾個基本修改。
●設定圖示類型:JQuery Mobile有預設幾個圖示可做選擇。
→作法:在標籤內加入data-icon=”想要的圖示名稱”
●設定圖示的位置:可以選擇圖示要在按鈕的上下左右哪邊。
→作法:在標籤內加入data-iconpos=”位置”[Top/left/right/bottom]。
●只留圖示不留文字:設定按鈕只有圖示沒有文字。
→作法:在標籤內的data-iconpos=”notext”。
●設定主題的樣式:JQuery Mobile有預設幾個主題可以做選擇。
→作法:在標籤內設定data-theme=”主題代號”。
→主題類型可以參考這邊:ttp://jquerymobile.com/demos/1.2.1/docs/buttons/buttons-themes.html
●設定按鈕寬度最小:按鈕不想跟螢幕最大化的話可以做設定。
→作法:在標籤內加入data-inline="true"。
●按鈕群組化
→作法:將想要的群組化按鈕使用<div>包起來,在div標籤內加入data-role=”controlgroup”
還有很多小細節的修改可以再去參考官網http://jquerymobile.com/demos/1.2.1/
※修改後顯示的結果:

今天小小練習成果

&lt;div data-role="page" id="page1" data-position="fixed">	
		&lt;div data-role="header">
		&lt;a href="#page1" data-icon="home" data-theme="e">Home&lt;/a>
        &lt;a href="#" data-icon="back" data-iconpos="notext">back&lt;/a>
		&lt;h1>Title&lt;/h1>
		&lt;/div>
		&lt;div data-role="content">
            &lt;a href="#" data-role="button">button&lt;/a>
            &lt;a href="#" data-role="button" data-inline="true">Cancel&lt;/a>
            &lt;div data-role="controlgroup">
            &lt;a href="#" data-role="button" >群組化按鈕1&lt;/a>
            &lt;a href="#" data-role="button" >群組化按鈕2&lt;/a>
            &lt;a href="#" data-role="button" >群組化按鈕3&lt;/a>&lt;/div>
        &lt;/div>
        &lt;div data-role="footer" data-position="fixed" data-fullscreen="true">
            &lt;div data-role="navbar" data-iconpos="bottom" >
                &lt;ul>
                    &lt;li>&lt;a href="#" data-icon="star" >One&lt;/a>&lt;/li>
                    &lt;li>&lt;a href="#" data-icon="info">Two&lt;/a>&lt;/li>
                    &lt;li>&lt;a href="#" data-icon="grid">Three&lt;/a>&lt;/li>
                    &lt;li>&lt;a href="#" data-icon="arrow-l">Four&lt;/a>&lt;/li>
                    &lt;li>&lt;a href="#" data-icon="arrow-r">Five&lt;/a>&lt;/li>
                &lt;/ul>
            &lt;/div>            
        &lt;/div>	
	&lt;/div>

以上小小分享,有任何問題還請多多指教。謝謝謝謝謝謝


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
martyshu
iT邦研究生 1 級 ‧ 2013-09-29 22:23:58

分享一個學習JQueryMobile語法的好工具 EZoApp
免費且不用註冊,直接用瀏覽器就可以拖拉作畫面
使用網站 <jqmdesigner.appspot.com>
介紹影片 http://www.youtube.com/watch?v=N0iGh-GjCbg

ramya iT邦新手 4 級 ‧ 2013-09-30 22:14:30 檢舉

謝謝你的分享,謝謝有多了更方便的工具了。讚

我要留言

立即登入留言