2009-08-22 14 views
5

Así que en este momento me estoy golpeando la cabeza: en este momento usamos un elemento para un botón para darle nuestra propia fuente personalizada, bien, esto funciona, pero como usamos Cufon en el resto del sitio, Me pregunto si es posible hacer que Cufon trabaje en un botón.¿Es posible hacer que Cufon funcione con un botón?

Hasta ahora he cambiado el botón a an y el uso de estilos de CSS estándar en un elemento 'entrada' o 'entrada [tipo =' enviar ']' funciona bien, pero he intentado ambos en cufon para Sin resultado.

Este es un botón - por lo que Cufon genera imágenes, esto debería funcionar, pero quizás lo estoy haciendo mal - ¿alguien puede ayudarme?

+2

Supongo que funcionará dentro de un '

+0

He intentado un hasta ahora - no sabía sobre el elemento

Respuesta

5

Usando el elemento de la siguiente manera:

<button type="buton">value</button> 

trabajaron al aplicar el estilo Cufón:

Cufon.replace('button', {color: '-linear-gradient(#999, 0.45=#666, 0.45=#555, #999)'}); 

Muchas gracias :)

1

La única solución que encontré para usar Cufón en los botones <input type="submit"/> debía usar Javascript (jQuery personalmente).

  1. Copie el texto del botón de entrada (el atributo "valor") en un lapso.
  2. Reemplazar el lapso usando Cufon.replace()
  3. Retire el texto del botón de entrada
  4. Posición del vano sobre el botón
  5. propagar el evento click() desde el lapso al botón

Hecho !

3

Creo que no hay forma de que Cufon funcione con <input type="submit" />. siendo que no hay lugar para insertar el lienzo La razón principal ...

Sin embargo, usted puede simplemente cambiar a la más semánticamente ajuste <button>, que el cierre necesidad </button> y por lo tanto crea el lugar para el lienzo.

Sin embargo, muy importante, asegúrese de especificar también el tipo, ya que IE7 y siguientes no enviarán el formulario si no lo hace. También parece que especificar el tipo conduce a un comportamiento uniforme en todos los navegadores.

¡Avísame si lo anterior ayudó! Saludos

7
$('.input-button').each(function(){ 
    $(this).hide().after('<span class="input-button">').next('span.input-button').text($(this).val()).click(function(){ 
     $(this).prev('input.input-button').click(); 
    }); 
}); 

que utilizan el código anterior para copiar el valor de mi insumos en un lapso, lo que me permite usar Cufon. Funciona muy bien y aún vuelve a la entrada 'enviar' con javascript desactivado.

Cuestiones relacionadas