bootstrap-add-clear

jQuery plugin for adding a clear action to the end of a bootstrap text input

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
bootstrap-add-clear
3721.0.77 years ago7 years agoMinified + gzip package size for bootstrap-add-clear in KB

Popular Searches

Readme

Maintainer: Gus Esquivel
Plugin Website: http://gesquive.github.io/bootstrap-add-clear
Contributers: Stephen Korecky, scoman81, Steve887, Deividy, zarv1k, grrizzly, adambiggs, Vladekk, denisj, starspoint

About

This project is a fork of Stephen Korecky's "Add Clear" project. It is meant to work as a drop-in replacement when using bootstrap.

Getting Started

How you acquire bootstrap-add-clear is up to you.

Bower

Install with Bower: 
bower install bootstrap-add-clear

NPM

Install with NPM: 
npm install bootstrap-add-clear

If you are using browserify to bundle, you will have to expose jQuery globally:
entry.js 
var $ = require('jquery');
global.jQuery = $;
require('bootstrap-add-clear');

Github

Clone the boostrap-add-clear repository: 
git clone git@github.com:gesquive/bootstrap-add-clear.git

Direct Download

zip tarbell Individual Files
* [bootstrap-add-clear.js](https://raw.githubusercontent.com/gesquive/bootstrap-add-clear/v1.0.7/bootstrap-add-clear.js)
* [bootstrap-add-clear.min.js](https://raw.githubusercontent.com/gesquive/bootstrap-add-clear/v1.0.7/bootstrap-add-clear.min.js)
Note: bootstrap-add-clear has a dependency on jquery 1.8+ and Bootstrap 3

Available Options

<th>Option</th>
<th>Type</th>
<th>Default</th>
<td>closeSymbol</td>
<td>string</td>
<td></td>
<td>symbolClass</td>
<td>string</td>
<td>glyphicon glyphicon-remove-circle</td>
<td>wrapperClass</td>
<td>string</td>
<td></td>
<td>top</td>
<td>number</td>
<td>0</td>
<td>right</td>
<td>number</td>
<td>0</td>
<td>returnFocus</td>
<td>boolean</td>
<td>true</td>
<td>showOnLoad</td>
<td>boolean</td>
<td>false</td>
<td>clearOnEscape</td>
<td>boolean</td>
<td>true</td>
<td>hideOnBlur</td>
<td>boolean</td>
<td>false</td>
<td>zindex</td>
<td>number</td>
<td>100</td>
<td>onClear</td>
<td>function</td>
<td>null</td>

Using Options

$("input").addClear({top : -2, right : 6});

// Example onClear option usage
$(":input").addClear({
  onClear: function(){
    alert("call back!");
  }
});

// Example font awesome icon usage
$(":input").addClear({
    symbolClass: "fa fa-times-circle"
})