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>   //鼠标移到图标上会看到提示文本:搜索  

 

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