作者:
WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin
状态提示
通过自定义属性和简单的JavaScript,就可以让按钮具有状态提示功能。比如,没有点击按钮时,正常显示;点击按钮时,触发相应的状态,并显示该状态对应的文本信息。
1. 加载状态
要让按钮显示加载状态,首先要给按钮添加 data-loading-text 属性,它的值为加载状态要显示的文本信息,如 “Loading…”:
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
还要为按钮定义单击事件,并在点击时调用 button(‘loading’) 方法,来触发加载状态。代码如下:
$('.btn').click(function(){
$(this).button('loading');
})
当点击按钮时,会触发加载状态,按钮的文本会变成 data-loading-text 属性的值。加载过程中,按钮被自动禁用,它会变灰,不再响应单击。如下:
2. 自定义状态
按钮自定义任意状态,只需为按钮添加 data-xxx-text 属性,并在点击按钮时调用 button(‘xxx’) 方法即可。例如,为按钮自定义 complete 状态,首先为按钮添加 data-complete-text 属性,属性的值为 complete 状态要显示的文本信息:
<button type="button" id="myButton" data-complete-text