Para la utilización de este plugin tendremos, en primer lugar, que cargar la librería jquery y el fichero del plugin entre las etiquetas head de nuestro archivo. Puedes descargar el plugin pinchando en: descargar jquery.select.js.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.select.js"></script>
<script type="text/javascript" src="js/jquery.select.js"></script>
A continuación la llamada al plugin:
<script>
$(document).ready(function(){
$('select').customStyle();
})
</script>
$(document).ready(function(){
$('select').customStyle();
})
</script>
De esta forma, estamos aplicando el plugin a todos los select de la página. Tambien deberemos aplicar algunos estilos ya que el plugin lo que hace es encapsular las etiquetas select dentro de etiquetas span para aplicarles el aspecto deseado:
.customStyleSelectBox {
/* Styles For Your Select Box */
}
.customStyleSelectBox.changed {
/* You can use this if you want a different style after user has made a selection */
}
/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
height: 20px;
border-radius: 4px;
border: 1px solid #ccc;
padding: 3px 3px 3px 10px;
background:url(arrow.gif) no-repeat center right #FFF;
}
/* Styles For Your Select Box */
}
.customStyleSelectBox.changed {
/* You can use this if you want a different style after user has made a selection */
}
/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
height: 20px;
border-radius: 4px;
border: 1px solid #ccc;
padding: 3px 3px 3px 10px;
background:url(arrow.gif) no-repeat center right #FFF;
}
A continuación un ejemplo en funcionamiento:
saludos podrias hacer un tutorial de como insertar un contenido en una web con php, en mi caso tengo una pagina web y a diario necesito introducir full contenido y estar modificando en el html es tedioso. gracias por los aportes
ResponderEliminar