jquery mobile--按钮

Posted 2020-09-30

创建按钮

<div data-role="page">
    <div data-role="header">
        <h1>标题</h1>
    </div>
    <div data-role="main" class="ui-content">
        <a data-role="button">按钮</a>
        <button>按钮</button>
        <input value="按钮" type="button">
    </div>
    <div data-role="footer">
        <h5>注脚</h5>
    </div>
</div>

 

在jquery mobile中，<button>默认是块元素（date-role="button"也是）

 

内联按钮

<a data-role="button" data-inline="true">按钮</a>
<a data-role="button" data-inline="true">按钮</a>

 

组合按钮

水平

<div data-role="main" class="ui-content">
    <div data-role="controlgroup" data-type="horizontal">
    　　<a data-role="button">按钮</a>
    　　<a data-role="button">按钮</a>
    　　<a data-role="button">按钮</a>
　　</div>
</div>

 

垂直

<div data-role="main" class="ui-content">
    <div data-role="controlgroup" data-type="vertical">
    　　<a data-role="button">按钮</a>
    　　<a data-role="button">按钮</a>
    　　<a data-role="button">按钮</a>
　　</div>
</div>

 

组合按钮默认为垂直

 

返回按钮

data-rel="back"

添加了这个属性，会忽略href锚(href="#")

data-rel有记忆的特点，无论是从哪个页面到当前页面的，只要返回，就会回到上个页面（如果是对话框页面，点击叉叉，也是这样的特性）

 

 

按钮样式

参考：jQuery Mobile CSS 类参考手册

 

TIP：如果用<a>生成按钮，似乎可以完全用内置class来控制

 

~END