栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

 text
 password
 email
 url
 search
 tel
 number
 datetime

使用方法

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





   

 HTML结构

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


   

初始化插件

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

$.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


 额外元素
 

2、输入框组尺寸

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


 额外元素
 



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

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


 
  
 
 
 

4、额外元素为按钮

额外按钮类.input-group-btn


 
   
 
 



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

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


 
  
  
 
 



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

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


 
  
  
  
 
 

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/97151.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号