微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

基于Bootstrap重置输入框内容按钮插件

当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可。

使用方法

使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件

rush:xhtml;">

HTML结构

这个jQuery按钮插件的HTML结构可以使用下面两种格式中的任意一种。

rush:xhtml;">

初始化插件

页面加载完毕之后,可以使用下面的方法来初始化该插件

rush:js;"> $.pureClearButton.setDefault({ icon: 'glyphicon-plus' });

方法

该jQuery插件有4个可用的方法.pureClearButtn('create'):

在指定输入框中创建一个清除/重置按钮。 .pureClearButtn('destroy'):在指定输入框中销毁一个清除/重置按钮。 .pureClearButtn('show'):在指定输入框中显示一个清除/重置按钮。 .pureClearButtn('hide'):在指定输入框中隐藏一个清除/重置按钮。

下面再为大家进行扩展内容

Bootstrap输入框

1、添加额外元素.input-group-addon

外包元素.input-group>input-group-addon+form-control

rush:xhtml;">

2、输入框组尺寸

控制类.input-group-*: .input-group-lg/.input-group-sm

rush:xhtml;">

3、额外元素添加单选或多选

在额外元素中嵌套单选或多选按钮元素

rush:xhtml;">

4、额外元素为按钮

额外按钮类.input-group-btn

rush:xhtml;">

5、额外元素为下拉按钮菜单

.input-group-btn包含下拉按钮菜单元素(包括触发器和下拉菜单)

rush:xhtml;">

6、额外元素为分裂式按钮下拉菜单

额外元素包含分裂式按钮下拉菜单(按钮,触发器和下拉菜单)

rush:xhtml;">

以上就是本文的全部内容,希望对大家的学习有所帮助。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐