jQuery submitCSS
Este script lo he creado por la necesidad de hacer “bonitos” los input del tipo submit, ya que por ahora, todos son de sistema y cada navegador pone el suyo, pues bien, con el script jquey.submitCSS.js podemos hacer botones pero con input del tipo submit. En ejemplo que os muestro más a bajo he jugado con capas para modificar vía CSS las imágenes de fondo, lo he hecho para tener más de un botón de otro color de fondo. Si queréis poner vuestras própias imágenes tendréis que jugar con los estilos.
El script es el siguiente:
/*
* jQuery submitCSS v1.0
* http://dixso.net/
*
* Copyright (c) 2010 Julio De La Calle Palanques
* Date: 2010-02-04 12:34:00 - (Jueves, 04 Feb 2010)
*
*/
function submitCSS(){
$("input[type=submit]").each(function(){
if($(this).hasClass("submitCSS")){
var theclass = $(this).parent().parent("div").attr("class");
if(theclass != "btnSubmitCSS"){
$(this).wrap("<div class='btnSubmitCSS'><div></div></div>");
}
}
});
isIE = !$.support.opacity,
isIE6 = isIE && !window.XMLHttpRequest
if (isIE6) {
$(".btnSubmitCSS").mouseover(function() {
$(this).addClass("btnSubmitCSS-ie6");
}).mouseout(function() {
$(this).removeClass("btnSubmitCSS-ie6");
});
}
}
El script necesita una hoja de estilos para añadir estilos al input:
/**************************************************************************
submitCSS 20100204@JCP
***************************************************************************/
#btn-1 .btnSubmitCSS {background:url(../imagenes/btn-left-gris.gif) no-repeat 0 0;}
#btn-1 .btnSubmitCSS div {background:url(../imagenes/btn-right-gris.gif) no-repeat right top;}
#btn-2 .btnSubmitCSS {background:url(../imagenes/btn-left-amarillo.gif) no-repeat 0 0;}
#btn-2 .btnSubmitCSS div {background:url(../imagenes/btn-right-amarillo.gif) no-repeat right top;}
#btn-3 .btnSubmitCSS {background:url(../imagenes/btn-left-rojo.gif) no-repeat 0 0;}
#btn-3 .btnSubmitCSS div {background:url(../imagenes/btn-right-rojo.gif) no-repeat right top;}
.btnSubmitCSS {padding-left:12px;}
.btnSubmitCSS div {padding-right:18px; padding-left:6px;}
.btnSubmitCSS, .btnSubmitCSS div {height:32px; float:left; display:block; line-height:28px; text-decoration:none; color:#FFF; cursor:pointer; font-weight:bold;}
.btnSubmitCSS div input {background:none; color:#FFF; border:none; width:auto; float:left; height:32px; padding:0; font-family:Verdana, Geneva, sans-serif; display:block; font-size:11px; cursor:pointer; font-weight:bold; margin:-3px 0 0 0;}
#container .btnSubmitCSS-active,
#container .btnSubmitCSS:hover {background-position:bottom left;}
#container .btnSubmitCSS-active div,
#container .btnSubmitCSS:hover div {background-position:bottom right;}
Para que el script funcione tenéis que añadir la clase ‘submitCSS’ al input submit.
<input type="submit" class="submitCSS" value="Esto es un boton submit" />
Para finalizar, tenéis que inicializar el script:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
submitCSS();
});
</script>
Este script funciona para todos los navegadores, lo único a tener en cuenta es que cada navegador interpreta una tipografía diferente al igual que el tamaño, por lo demás todo perfecto.