Bootstrap Reset Input Box content button Plugin _javascript tips

Source: Internet
Author: User

When you enter some content in the input box, if you want to clear the content, you can directly click on the right side of the input box to the small round fork button.

Text
Password
Email
Url
Search
Tel
Number
Datetime

How to use

Use this reset input input box content plugin to introduce jquery and bootstrap files as well as jquery.bootstrap-pureclearbutton.js files.

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

HTML structure

This jquery button plugin's HTML structure can be used in any of the following two formats.

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

Initializing Plug-ins

After the page is loaded, you can use the following method to initialize the plug-in.

$.pureclearbutton.setdefault ({
 icon: ' Glyphicon-plus '
});   

Method

The jquery plug-in has 4 available methods:
. PURECLEARBUTTN (' Create '): creates a purge/reset button in the specified input box.
. PURECLEARBUTTN (' Destroy '): destroys a purge/reset button in the specified input box.
. PURECLEARBUTTN (' show '): displays a purge/reset button in the specified input box.
. PURECLEARBUTTN (' hide '): hides a purge/reset button in the specified input box.

Here's what you can expand on:Bootstrap input Box

1, add additional elements. Input-group-addon

Outsourcing elements. Input-group>input-group-addon+form-control

<div class= "Input-group" >
 <span class= "Input-group-addon" > Extra elements </span>
 <input type= " Text "class=" Form-control "/>
</div>

2, the input frame group size

Control class. input-group-*: Input-group-lg/.input-group-sm

<div class= "Input-group input-group-lg" >
 <span class= "Input-group-addon" id= "Sizing-addon1" > Extra elements </span>
 <input type= "text" class= "Form-control" >
</div>


3, additional elements to add a single election or multiple selection

Nested radio or multiple-selection button elements in extra elements

<div class= "Input-group" >
 <span class= "Input-group-addon" >
  <input type= "Radio"/>
 </span>
 <input type= "text" class= "Form-control"/>

4, the extra element is the button

Extra Button class. input-group-btn

<div class= "Input-group" >
 <span class= "input-group-btn" >
   <button class= "Btn Btn-default" > extra element button </button>
 </span>
 <input type= "text" class= "Form-control"/>
</div >


5, the additional elements for the Drop-down button menu

. input-group-btn contains Drop-down button menu elements (including triggers and Drop-down menus)

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


6, the additional elements for the Split-button Drop-down menu

Extra elements include split-button Pull-down menus (buttons, triggers, and Pull-down menus)

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

The above is the entire content of this article, I hope to help you learn.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.