jquery mobile - 按钮

jquery mobile(如下简称 jm)中提供了一些按钮的样式,让开发者使用起来更方便。jquery

jm的按钮可由3种形式建立,spa

  • 使用<button>元素
  • 使用<input>元素
  • 使用data-role="button"的a元素

tip:jQuery Mobile 中的按钮会自动得到样式,这加强了他们在移动设备上的交互性和可用性。咱们推荐您使用 data-role="button" 的 <a> 元素来建立页面之间的连接,而 <input> 或 <button> 元素用于表单提交。code

默认状况下,按钮会占据屏幕的所有宽度。若是您须要按钮适应其内容,或者若是您须要两个或多个按钮并排显示,data-inline="true" 将按钮变为行内按钮blog

请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用,以规定水平或垂直地组合按钮ip

demo:
<div > ---》默认状况下,组合按钮是垂直分组的,彼此间没有外边距和空白。而且只有第一个和最后一个按钮拥有圆角。 <a href="#anylink" data-role="button">按钮 1</a> <a href="#anylink" data-role="button">按钮 2</a> <a href="#anylink" data-role="button">按钮 3</a>
</div>
后退按钮:用data-rel="back" 属性(会忽略锚的 href 值)data-role="controlgroup"data-type="horizontal"

jm中还能够给按钮添加图标:
data-icon="。。。" 

data-iconpos="left|top|right|bottom" 定义按钮图标的位置(相对于按钮中的文字),默认靠左。当值为notext的时候,按钮没有文字,只有图标
相关文章
相关标签/搜索