Bootstrap3.0学习教程二十三:JS插件按钮

2019-04-08 09:52:09来源: aehyok博客园 阅读 ()

新老客户大回馈,云服务器低至5折

本文主要来学习一下JavaScript插件--按钮。完整教程可查看:Bootstrap3.0教程

按钮

按钮可以完成很多工作。控制按钮状态或创建按钮组可以产生类似工具条之类的复杂组件。

状态

通过添加data-loading-text="正在加载..."可以使按钮呈现加载状态。

不过如果想启用加载的状态,还需要在点击按钮的时候进行手动启动。

上面的JavaScript代码,首先是设置让按钮处于加载状态,然后通过SetTimeout定时三秒中定义事件,让按钮回到初始化状态。

然后看一下点击按钮之后的效果

状态切换

通过添加data-toggle="button"可以让按钮能够切换状态。

感觉按钮的颜色还是有些许的变化的。

选择框

通过向按钮组添加data-toggle="buttons"可以使按钮组具有类似选择框的选择/取消功能。

 

 

Option 1

 

Option 2

 

Option 3

 

单选

通过向按钮组添加data-toggle="buttons"可以让按钮组具有单选框的功能。

 

 

Option 1

 

Option 2

 

Option 3

 

这个可只有单选的效果吧。

用法

切换

上面我们只是通过data属性来切换按钮的状态,现在我们来用JavaScript来实现。

标记

按钮插件完整支持data属性。通过下面的案例可以看到各种使用方式。

方法

$().button('toggle')

切换按钮状态。赋予按钮被激活时的状态和外观。

自动切换

可以使用data-toggle属性让按钮具有自动切换状态的能力。

上面已经有实例了,在此我就简单的举个例子。

$().button('loading')

设置按钮状态为loading - 即将按钮置为禁用状态并将文字内容切换为loading。通过使用data-loading-text可以在按钮元素上定义loading文本。

这个效果上面也有了。

跨浏览器兼容性

Firefox会在多个页面加载之间保持按钮的禁用状态。可以通过添加autocomplete="off"来解决提到的问题。

$().button('reset')

重置按钮状态 - 并将按钮上的文本还原为原始值。

$().button(string)

重置按钮状态 - 并将按钮上的文本重置为传入的值。

总结

这就是按钮插件的简单应用。

完整教程可查看:Bootstrap3.0教程

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:谷歌移动友好算法影响初现 约1.7%排名有变

下一篇:Wordpress入门建站教程七:文章的发布和管理