jQuery UI ejemplo - Button (Botón)
Con la libración adecuada utilización (flotar) y la activación estilos (activos) se pueden botón temáticas para mejorar los elementos de formulario estándar (tales como botones, cuadros de entrada, ancla) función.
Para más detalles sobre los componentes de los botones, consulte la documentación de la API miembro de botón (el botón del widget) .
La función predeterminada
Los ejemplos de marcadores se pueden usar para los botones: un elemento de botón, un tipo de elementos de entrada y que presente un ancla.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> botón de jQuery UI (botón) - La función por defecto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Input [type = enviar], un botón")
.button ()
.click (function (event) {
event.preventDefault ();
});
});
</ Script>
</ Head>
<Cuerpo>
<Botón> elemento de un botón </ botón>
<Input type = "submit" value = "Enviar un botón">
<a href="#"> un ancla </a>
</ Body>
</ Html>
caja
Por medio de la casilla de verificación botón es un estilo de botón de conmutación. Elementos de las etiquetas asociadas a la caja que el texto del botón.
En este caso, llamando en un recipiente pública .buttonset() , como se ha demostrado caja de exhibición de tres estilos de botón.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> botón de jQuery UI (botón) - casilla de verificación </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#check") .button ();
$ ( "#format") .buttonset ();
});
</ Script>
<Style>
#format {margin-top: 2em;}
</ Style>
</ Head>
<Cuerpo>
<Input type = "checkbox" id = "check"> <label for = "check"> interruptor </ label>
<Div id = "formato">
<Input type = "checkbox" id = "check1"> <label for = "check1"> B </ label>
<Input type = "checkbox" id = "Check2"> <label for = "Check2"> I </ label>
<Input type = "checkbox" id = "check3"> <label for = "check3"> T </ label>
</ Div>
</ Body>
</ Html>
icono
Algunas de ellas con varias combinaciones de botones de texto y de los iconos
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> botón de jQuery UI (botón) - icono </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Botón: en primer lugar") .button ({
Iconos: {
primaria: "ui-icono de bloqueo"
},
Texto: falsa
}). Próximo (). Botón ({
Iconos: {
primaria: "ui-icono de bloqueo"
}
}). Próximo (). Botón ({
Iconos: {
primaria: "ui-icon-artes",
secundaria: "ui-icon-triángulo-1-s"
}
}). Próximo (). Botón ({
Iconos: {
primaria: "ui-icon-artes",
secundaria: "ui-icon-triángulo-1-s"
},
Texto: falsa
});
});
</ Script>
</ Head>
<Cuerpo>
<Botón> botón del icono con un solo botón </>
<Botón> botón con el icono de la izquierda </ botón>
<Botón> botón con dos iconos </ botón>
<Botón> con dos botones con el icono de texto sin </ botón>
</ Body>
</ Html>
radio
Tres botones de opción en un botón.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> botón de la interfaz de usuario jQuery (botón) - Radio </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#radio") .buttonset ();
});
</ Script>
</ Head>
<Cuerpo>
<Forma>
<Div id = "radio">
<Input type = "radio" id = "radio1" name = "radio"> <label for = "radio1"> Seleccione 1 </ label>
<Input type = "radio" id = "radio2" name = "radio" marcada = "marcada"> <label for = "radio2"> seleccione 2 </ label>
<Input type = "radio" id = "Radio3" name = "radio"> <label for = "Radio3"> Seleccione 3 </ label>
</ Div>
</ Form>
</ Body>
</ Html>
botón de división
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> botón de jQuery UI (botón) - Botón de Split </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-menú {position: absolute; ancho: 100px;}
</ Style>
<Script>
$ (Function () {
$ ( "#rerun")
.button ()
.click (function () {
alert ( "Ejecución de la última acción");
})
.A continuación ()
.button ({
Texto: falso,
Iconos: {
primaria: "ui-icon-triángulo-1-s"
}
})
.click (function () {
Menú var = $ (this) .parent (). next (). show () la posición. ({
mi: "arriba a la izquierda",
en: "izquierda abajo",
de: este
});
$ (Document) .one ( "clic", function () {
menu.hide ();
});
return false;
})
.parent ()
.buttonset ()
.A continuación ()
.hide ()
.menu ();
});
</ Script>
</ Head>
<Cuerpo>
<Div>
<Div>
<Botón id = "repetición"> Ejecutar última acción </ botón>
<Botón id = "select"> seleccione una acción </ botón>
</ Div>
<Ul>
<Li> <a href="#"> abierta ... </a> </ li>
<Li> <a href="#"> guardar </a> </ li>
<Li> <a href="#"> eliminar </a> </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
barra de herramientas
Una barra de herramientas de reproducción multimedia. marcadores Look-basa: Algún elemento, botón Shuffle es una casilla de verificación para el tipo de entrada, opciones de repetición son tres tipos de entrada de radio.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> botón de la interfaz de usuario jQuery (botón) - Barra de herramientas </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#toolbar {
padding: 4 píxeles;
display: inline-block;
}
/ * Soporte: Internet Explorer 7 * /
* + #toolbar HTML {
display: inline;
}
</ Style>
<Script>
$ (Function () {
$ ( "#beginning") .button ({
Texto: falso,
Iconos: {
primaria: "ui-icon-buscar-start"
}
});
$ ( "#rewind") .button ({
Texto: falso,
Iconos: {
primaria: "ui-icon-buscar-prev"
}
});
$ ( "#play") .button ({
Texto: falso,
Iconos: {
primaria: "ui-icon-play"
}
})
.click (function () {
var options;
if ($ (this) .text () === "juego") {
Opciones = {
etiqueta: "pausa",
Iconos: {
primaria: "ui-icon-pausa"
}
};
} Else {
Opciones = {
etiqueta: "juego",
Iconos: {
primaria: "ui-icon-play"
}
};
}
$ (Este) .button ( "opción", opciones);
});
$ ( "#DETENER") .button ({
Texto: falso,
Iconos: {
primaria: "ui-icon-stop"
}
})
.click (function () {
$ ( "#play") .button ( "Opción", {
etiqueta: "juego",
Iconos: {
primaria: "ui-icon-play"
}
});
});
$ ( "#forward") .button ({
Texto: falso,
Iconos: {
primaria: "ui-icon-buscar-después"
}
});
$ ( "#end") .button ({
Texto: falso,
Iconos: {
primaria: "ui-icon-buscan-end"
}
});
$ ( "#shuffle") .button ();
$ ( "#repeat") .buttonset ();
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "barra de herramientas" class = "ui-ui widget de cabecera-esquina-all">
<Botón id = "comienzo"> comenzando </ botón>
<Botón id = "rebobinar"> rebobinado </ botón>
<Botón id = "juego"> Reproducir </ botón>
<Botón id = "stop"> Detener </ botón>
<Botón id = "hacia delante"> Avance rápido </ botón>
<Botón id = "fin"> acabar el botón </>
<Input type = "checkbox" id = "shuffle"> <label for = "shuffle"> Mezclar </ label>
<Span id = "repetir">
<Input type = "radio" id = "repeat0" name = "repetir" marcada = "marcada"> <label for = "repeat0"> No repetir </ label>
<Input type = "radio" id = nombre de "REPEAT1" = "repetir"> <label for = "REPEAT1"> Una vez </ label>
<Input type = "radio" id = "repeatall" name = "repetir"> <label for = "repeatall"> Todo </ label>
</ Span>
</ Div>
</ Body>
</ Html>