当前位置：首页 > 资讯 > 技术文档

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

时间：2020-09-27 06:36 编辑：来源：阅读：
扫一扫，手机访问

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

当好在输入框中输入一些内容之后，如果想清除这些内容，可以直接点击输入框右侧的小圆叉按钮即可。 [img]http://files.jb51.net/file_images/article/201605/201651285558264.png?201641285722[/img] [b] text password email url search tel number datetime[/b] [b]使用方法[/b] 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.bootstrap-pureClearButton.js"></script>

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

<input type="text" data-pure-clear-button>
<input type="text" data-pure-clear-button="true">

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

$.pureClearButton.setDefault({
 icon: 'glyphicon-plus'
});

[b]方法 [/b] 该jQuery插件有4个可用的方法： [b] .pureClearButtn('create')：[/b]在指定输入框中创建一个清除/重置按钮。 [b] .pureClearButtn('destroy')：[/b]在指定输入框中销毁一个清除/重置按钮。 [b] .pureClearButtn('show')：[/b]在指定输入框中显示一个清除/重置按钮。 [b] .pureClearButtn('hide')：[/b]在指定输入框中隐藏一个清除/重置按钮。下面再为大家进行扩展内容：[b]Bootstrap输入框[/b] [b]1、添加额外元素.input-group-addon[/b] 外包元素.input-group>input-group-addon+form-control

<div class="input-group">
 <span class="input-group-addon">额外元素</span>
 <input type="text" class="form-control"/>
</div>

[b]2、输入框组尺寸[/b] 控制类.input-group-*: .input-group-lg/.input-group-sm

<div class="input-group input-group-lg">
 <span class="input-group-addon" id="sizing-addon1">额外元素</span>
 <input type="text" class="form-control">
</div>

[b]3、额外元素添加单选或多选[/b] 在额外元素中嵌套单选或多选按钮元素

<div class="input-group">
 <span class="input-group-addon">
  <input type="radio" />
 </span>
 <input type="text" class="form-control" />
</div>

[b]4、额外元素为按钮[/b] 额外按钮类.input-group-btn

<div class="input-group">
 <span class="input-group-btn">
   <button class="btn btn-default">额外元素按钮</button>
 </span>
 <input type="text"class="form-control" />
</div>

[b]5、额外元素为下拉按钮菜单[/b] .input-group-btn包含下拉按钮菜单元素(包括触发器和下拉菜单)

<div class="input-group">
 <div class="input-group-btn">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">button <span class="caret"></span></button>
  <ul class="dropdown-menu">
   <li><a href="">item1</a></li>
   <li><a href="">item2</a></li>
  </ul>
 </div>
 <input type="text" class="form-control" />
</div>

[b]6、额外元素为分裂式按钮下拉菜单[/b] 额外元素包含分裂式按钮下拉菜单(按钮，触发器和下拉菜单)

<div class="input-group">
 <div class="input-group-btn">
  <button class="btn btn-default dropdown-toggle">button</button>
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu">
   <li><a href="">item1</a></li>
   <li><a href="">item2</a></li>
   </ul>
 </div>
 <input type="text" class="form-control" />
</div>

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

全部评论(0)

上一篇：JS判断一个数是否是水仙花数
下一篇：全面解析Bootstrap排版使用方法（文字样式）

资讯排行榜
更多>>