jquery mobile - 按钮

Posted 2020-10-10

jquery mobile（以下简称 jm）中提供了一些按钮的样式，让开发者使用起来更方便。

jm的按钮可由3种形式创建，

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

tip：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交。

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，data-inline="true" 将按钮变为行内按钮

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

demo：
<div data-role="controlgroup" data-type="horizontal">   ---》默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角。
  <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 值）

jm中还可以给按钮添加图标：

data-icon="。。。" 

data-iconpos="left|top|right|bottom"  定义按钮图标的位置（相对于按钮中的文字），默认靠左。当值为notext的时候，按钮没有文字，只有图标