Después de ingresar un poco de contenido en el cuadro de entrada, si desea borrar estos contenidos, puede hacer clic directamente en el botón de horquilla redonda pequeña en el lado derecho del cuadro de entrada.
texto
contraseña
correo electrónico
url
Buscar
Tel
número
de fecha y hora
Cómo usar
Use el complemento de contenido de entrada de entrada de entrada de restablecimiento para importar archivos jQuery y bootstrap, así como 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.33.min.js" 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>
Estructura html
La estructura HTML de este complemento de botón jQuery se puede usar en cualquiera de los siguientes dos formatos.
<input type = "text" data-pure-clare-button> <input type = "text" data-pure-clare-button = "true">
Inicializar el complemento
Después de cargar la página, puede usar el siguiente método para inicializar el complemento.
$ .pureclearButton.setDefault ({icon: 'Glyphicon-plus'});método
El complemento jQuery tiene 4 métodos disponibles:
.pUreClearButtn ('Crear'): cree un botón de claro/restablecimiento en el cuadro de entrada especificado.
.pureclearButtn ('destruir'): destruya un botón de claro/restablecimiento en el cuadro de entrada especificado.
.pUreClearButtn ('show'): muestra un botón de borde/reinicio en el cuadro de entrada especificado.
.pUreClearButtn ('Ocultar'): oculte un botón de borde/reinicio en el cuadro de entrada especificado.
Lo siguiente es para expandir el contenido para usted: Bootstrap Input Cox
1. Agregue elementos adicionales.input-group-addon
Elementos de outsourcing.input-group> Input-Group-Addon+formulario de formato
<div> <span> elementos adicionales </span> <input type = "text"/> </div>
2. Ingrese el tamaño del grupo de caja
Class de control.input-group-*: .input-group-lg/.input-group-sm
<Div> <span id = "dimension-addon1"> elementos adicionales </span> <input type = "text"> </div>
3. Agregue múltiples opciones o opciones múltiples para elementos adicionales
Anidar un elemento de botón único o múltiple en elementos adicionales
<div> <span> <input type = "radio" /> </span> <input type = "text" /> </div>
4. Los elementos adicionales son botones
Clase de botón adicional.input-group-btn
<div> <span> <botton> botón de elemento adicional </boton> </span> <input type = "text" class = "form-confontrol"/> </div>
5. El elemento adicional es el menú del botón desplegable
.Input-Group-BTN contiene elementos de menú de botón desplegable (incluidos desencadenantes y menús desplegables)
<VIV> <VIV> <BOTY DATA Data-Toggle = "Dropdown"> Botton <Span> </span> </boton> <ul> <li> <a href = "" item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div> <input type = "text"/> </iv>
6. El elemento adicional es el menú desplegable del botón dividido
Los elementos adicionales incluyen menús desplegables del botón dividido (botones, desencadenantes y menús desplegables)
<Viv> <viv> <boton> Button </boton> <Botton Data-Toggle = "Dropdown"> <span> </span> </boton> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div> <input type = "text" </div>
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.