jQuery Mobile 按鈕

三種方式創建按鈕:

          <button>按鈕</button>    //用於表單提交

          <input  type="button"  value="按鈕">  //用於表單提交

          <a  href="#link"  data-role="button">按鈕</a>   //推薦用這種形式的按鈕

導航按鈕: <a  href="#page2"  data-role="button">轉到page2</a> 

行內按鈕:data-inline="true"  可使按鈕寬度自適應其內容 (按鈕默認情況會佔據屏幕的全部寬度)

                     <a  href="#page2"  data-role="button"  data-inline="true">轉到page2</a>

組合按鈕:data-role="controlgroup"  data-type="horizontal | vertical"   水平或垂直排列一組按鈕

                    <div  data-role="controlgroup"  data-type="horizontal">

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

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

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

                     </div>

                    p.s.  水平分組按鈕,默認是data-inline="true"

後退按鈕:data-rel="back" (此時會忽略href的值)

                    <a  href="#"  data-role="button"  data-rel="back" >返回</a>

其他按鈕樣式屬性:data-corners="true | false "    //按鈕是否有圓角

                                    data-mini="true | false "   //按鈕是否是小型按鈕 

                                    data-shadow="true | false "    //按鈕是否有陰影,默認是有

按鈕圖標: data-icon="search"   // 默認按鈕中的圖標位置是靠左放置 

                    <a  href="#anylink"  data-role="button"  data-icon="search">搜索</a>

                    data-icon="arrow-l | arrow-r"   // 左/右箭頭圖標的按鈕

                    data-icon="delete"    // 刪除

                    data-icon="info"   // 信息

                    data-icon="home"   //首頁

                    data-icon="forward | back"   / 向前/返回 

                    data-icon="search"   //搜索

                    data-icon="grid"   //網格

                    data-icon="plus|minus"  // 加/減符號

                    data-icon="check"   //勾選

                    data-icon="star"   //星

                    data-icon="gear"   //齒輪形

                    data-icon="arrow-d | arrow-u"  // 向下/上箭頭

定位按鈕圖標: data-iconpos="top | right | botton | left "  // 可以重置按鈕上的圖標位置- 上,右,下,左

                             <a href="#link"  data-role="button"  data-icon="search" data-iconpos="top" > 上 </a>

圖標按鈕:data-iconpos="notext"  // 只顯示圖標,沒有文本

                    <a href="#link"  data-role="button"  data-icon="search"  data-iconpos="notext" > 搜索 </a>   //鼠標移到圖標上會看到提示文本:搜索  

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章