按钮 - AuxUI - 模块化前端UI框架

需要加载element模块，可通过下列方式加载

//加载模块
auxui(['element'], function (){

    //加载后执行一些动作和事件处理
    
});

按钮的功能很丰富。通过控制按钮的状态或创建一组按钮并形成一些新的组件，例如工具条。

跨浏览器兼容性

在页面多次加载之间，Firefox 仍然保持表单控件的状态（禁用状态和选择状态）一个解决办法是设置 autocomplete="off"。

状态

通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态。

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-default" autocomplete="off">
  Loading state
</button>
<script>
auxui(['element'], function (){

    $('body').on('click', '#myButton', function() {
        $(this).button('loading').delay(700).queue(function() {
            $(this).button('reset');
            $(this).dequeue(); 
        });
    });
    
});
</script>

单个切换

如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可

<button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off">
  单个切换
</button>

复选框

您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换

        <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="checkbox"> 选项 1
    </label>
    <label class="btn btn-default">
        <input type="checkbox"> 选项 2
    </label>
    <label class="btn btn-default">
        <input type="checkbox"> 选项 3
    </label>
</div>

选项 1 选项 2 选项 3

单选按钮

您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="options" id="option1"> 选项 1
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option2"> 选项 2
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option3"> 选项 3
    </label>
</div>

选项 1 选项 2 选项 3

方法

`$().button('toggle')`

切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换

`$().button('reset')`

重置按钮状态 - 将按钮上的文本还原回原始的内容。此为异步方法，此方法在内容被重置完成之前即返回。

`$().button(string)`

该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。