10HUI - 按钮（hui-button）

示例图片

普通按钮

普通按钮

Loading按钮

点击按钮后出现Loading动画，并能够对提交中进行判断，避免重复提交。dom 结构和普通按钮一样，使用js来控制Loading效果：

Loading按钮

hui(按钮选择器).loadingButton(msg)

功能：在普通按钮上产生loading效果 参数：提示内容 返回：无

hui(按钮选择器).buttonIsLoading()

功能：判断按钮是否处于加载状态 参数：无 返回：布尔类型 true / false

hui(按钮选择器).resetLoadingButton()

功能：恢复按钮原始状态 参数：无 返回：无

完整代码：

HUI - 按钮组件




    

    HUI - 按钮组件


    

        

        
按钮组件演示
        

    
    

        普通按钮
        警告按钮
        主要按钮
    
    

        宽度100%的按钮
        宽度100%的按钮
        宽度100%的按钮
        禁用的按钮
    
    

        loading按钮
        点击后loading并自动还原
        图标按钮
    
    

        小按钮
        小按钮
        小按钮
    



hui('#btnList1').find('button').click(function(){hui.toast('ok');});
hui('#btnList2').find('button').click(function(){hui.toast('Hi...');});
hui('#loadingBtn1').loadingButton();
hui('#loadingBtn2').click(function(){
    if(hui(this).buttonIsLoading()){return false;}
    hui(this).loadingButton('加载中...');
    setTimeout(function(){
        hui('#loadingBtn2').resetLoadingButton();
    }, 2000);
});