jquery mobile學習筆記一

標籤：style   blog   color   ar   sp   div   c   on   log   

先看下面幾個屬性 ui-body ui-bar ui-corner-all ui-body-[a-z] custom-corners

ui-bar建立一個通欄的塊，可以作為內容塊的區分，通過ui-bar-[a-z]使用者可以修改皮膚。

ui-body的用法跟ui-bar的用法一樣

ui-corner-all給塊添加圓角屬性

custom-corners內部的元素，也繼承父級元素的圓角屬性。

2、按鈕部分

預設情況

<input type="button" value="button">

這個時候jquery mobile會對這個普通的按鈕進行增強出處理使它更適合行動裝置；增強後的HTML代碼

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">button<input type="button" value="button" data-enhanced="true"></div>

從引用的class進行分析：ui-shadow是給代碼添加陰影屬性，ui-btn ui-input-btn按鈕的增強樣式；假如想修改按鈕的外觀可以通過自訂ui-btn-[a-f]來修改按鈕的外觀；這裡有一個要注意的地方input元素裡面添加了data-enhanced="true"這個屬性，如果直接給input元素添加這個屬性那麼jquery mobile就不會對這個按鈕進行增強處理。

將一個超連結以一個按鈕的方式進行展示添加data-role="button"

<a href="#" data-role="button">a link</a>

這個時候jquery mobile也會給這個超連結進行增強：

<a href="#" data-role="button" class="ui-link ui-btn ui-shadow ui-corner-all" role="button">a link</a>

看到這裡估計大家都可以看出些規律來了。

jquery mobile學習筆記一