（三）Jquery Mobile按鈕詳細講解

Jquery Mobile按鈕詳細講解

一、JM按鈕說明

    按鈕如下圖所示
      
     1、HTML5中的button
      
效果：

      2、 JM中的普通button
      
        此中顯示和HTML5是系統的。
      3、JM中button內聯樣式 data-inline
      說到內聯樣式和block樣式，大家估計都不知道怎么回事，內聯inline是說，外面的框會根據內部的文字來改變，block則正好相反，上面展示的按鈕占據了整個一行的效果，現在我們需要小的按鈕，則需要設置為內聯。
       data-inline="true"
        
   效果：
    
     4、JM設置顏色 data-theme
     
    說明，data-theme="b" 設置樣式為藍色，JM中主要的樣式有abcde五種，a為黑色，b為藍色，c為灰色，e為黃色
      5、JM中data-mini
      data-mini用於設置按鈕的大小，要比普通的按鈕要小點
       
     效果：
      
      6、圖標 data-icon
     設置顯示的圖標
      
     這里面需要設置data-iconpos="notext" 就是說，里面沒有文本的空間存放
     效果：
     
     不設置data-iconpos="notext",顯示效果如下
     
     所有效果如下：
     
      
      7、圖標樣式 data-iconpos
      
      8、按鈕組的使用 data-role="controlgroup"
      
       默認效果：
       
      水平按鈕組 data-type="horizontal" 
      
      默認是垂直按鈕組 data-type="vertical"
      9、按鈕樣式，控制圓角、陰影(用的不多，一般使用默認的圓角顯示)
        data-iconshadow
        data-corners
        data-shadow
       10、disable按鈕為不可點擊
       
      效果：
      
      說明：
      鏈接中使用class="ui-disabled"   按鈕中使用disabled=""   input中使用disabled=""   

來自為知筆記(Wiz)