第3章工具欄和按鈕的使用

1、 第三章第三章 工具欄和按鈕的工具欄和按鈕的使用使用n固定工具欄的屬性是什么？固定工具欄的屬性是什么？提問 之需求分析頭部結(jié)構(gòu)頭部結(jié)構(gòu) 之需求分析普通網(wǎng)頁(yè)源代碼頁(yè)眉是一個(gè)工具欄在頁(yè)面的頂部，通常包含頁(yè)面標(biāo)題文本和可選的按鈕。按鈕被定位在標(biāo)題的左右側(cè)。頭部標(biāo)題通常是導(dǎo)航或動(dòng)作。標(biāo)題可以被固定的，當(dāng)滾動(dòng)頁(yè)面時(shí)，他們始終在屏幕頂部。標(biāo)題文本通常是一個(gè)H1標(biāo)題元素，但使用任何級(jí)別的標(biāo)題（h1-h6）允許語(yǔ)義的靈活性。 Page Title 頭部工具欄固定按鈕位置a 鏈接按鈕的位置，也可以通過CSS來(lái)控制按鈕，而不依賴他們?cè)谠创a中的順序。如果你只需要一個(gè)按鈕并且想放在右側(cè)，這是特別有用的。指定按鈕的位

2、置，需要添加CSS類 ui-btn-left 或者 ui-btn-right 來(lái)設(shè)置定位。頭部工具欄無(wú)標(biāo)題頭部欄有標(biāo)題的時(shí)候，標(biāo)題欄才能正常顯示高度和外邊距。如果您選擇不使用一個(gè)標(biāo)題，你將需要添加一個(gè)類 class=ui-title ，才能得到正確顯示。 Options /div 簡(jiǎn)單按鈕簡(jiǎn)單按鈕 之需求分析給HTML元素添加 data-role=button 屬性。jQuery Moble就會(huì)給此元素增強(qiáng)為按鈕樣式。 Jquery Mobile框架包含了一組最常用的移動(dòng)應(yīng)用程序所需的圖標(biāo)，為了減少下載的大小，Jquery Mobile包含的是的白色的圖標(biāo)sprite圖片，并自動(dòng)在圖標(biāo)后添加一

3、個(gè)半透明的黑圈以確保在任何背景色下圖片都能夠清晰顯示。按鈕圖標(biāo)一Delete Query Mobile 自帶很多按鈕小圖標(biāo)，如下圖所示：自帶很多按鈕小圖標(biāo)，如下圖所示：左箭頭左箭頭：data-icon=arrow-l右箭頭右箭頭：data-icon=arrow-r上箭頭上箭頭：data-icon=arrow-u下箭頭下箭頭：data-icon=arrow-d刪除刪除：data-icon=delete添加添加：data-icon=Plus減少減少：data-icon=minus檢查檢查：data-icon=Check齒輪齒輪：data-icon=gear 前進(jìn)前進(jìn)：data-icon=Forwa

4、rd后退后退：data-icon=Back網(wǎng)格網(wǎng)格：data-icon=Grid五角五角：data-icon=Star警告警告：data-icon=Alert信息信息：data-icon=info首頁(yè)首頁(yè)：data-icon=home搜索搜索：data-icon=Search 僅圖標(biāo)僅圖標(biāo) data-iconpos=notext按鈕圖標(biāo)二默認(rèn)情況下，所有的圖標(biāo)都放在按鈕的按鈕文本左。此默認(rèn)可以覆蓋使用 data-iconpos 屬性來(lái)設(shè)置圖標(biāo)的右上方（top）、底部（bottom）、右側(cè)（right）、左側(cè)（left）的文本。Delete 隱藏圖片上的文字隱藏圖片上的文字 data-iconp

5、os=notextdata-inline=true 按鈕圖標(biāo)三使用自定義圖標(biāo)，需要指定 data-icon 值。Jquery Mobile的button插件會(huì)將生成一個(gè)CSS類，它的前綴是ui-icon- 然后你可以在你的樣式表寫一個(gè)CSS規(guī)則來(lái)定義 ui-icon-myapp-email。然后在css中指定這個(gè)類的背景圖片地址。為了保持與其他圖標(biāo)的視覺上的一致性，請(qǐng)創(chuàng)建一個(gè)白色18x18像素的PNG-8圖標(biāo)，并且保存為Alpha透明度。.ui-icon-myapp-email background-image: url( app-icon-email.png ); 按鈕圖標(biāo)四用自帶的樣式加入

6、自定義的圖標(biāo)要求圖標(biāo)必須是18*18的小圖標(biāo)，如何加入大的自定義圖標(biāo)？需要修改jQuery Mobile的樣式 .nav-3-1 .ui-btn .ui-btn-inner padding-top: 40px !important; .nav-3-1 .ui-btn .ui-icon width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow

7、: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; .weixin .ui-icon background: url(adr.png) 100% 100% no-repeat; background-size: 30px 26px; 分組按鈕 有時(shí)候，你想把一組按鈕放進(jìn)一個(gè)單獨(dú)的容器內(nèi)，使他們看起來(lái)想一個(gè)獨(dú)立的導(dǎo)航部件。你可以把一組按鈕包裹在一個(gè)容器內(nèi)，然后給該容器添加 data-role=“controlgroup” 屬性，Jquery Mobile會(huì)創(chuàng)建一個(gè)垂直的按鈕組，刪除掉按鈕間的margin和陰影，然后只在第一個(gè)按鈕和最后一個(gè)按鈕產(chǎn)生圓角，使他們看起來(lái)是一組按鈕。 默認(rèn)情況下，組按鈕表現(xiàn)為垂直列表，如果給容器添加 data-type=horizontal 的屬性，則可以轉(zhuǎn)換為水平按鈕的列表，按鈕會(huì)橫向一個(gè)挨著一個(gè)地水平排列，并設(shè)置只有足夠大以適應(yīng)內(nèi)容的寬度。（所以要注意橫排情況下按鈕不要太多，按鈕的字也不要太