Funcionalidad a drupal theme con jquery

Buenas, voy a mostrar algo sencillo para poder hacer “cositas” prácticas usando el mágico framework javascript Jquery que viene incorporado en drupal y en muchisimos proyectos interesantes como wordpress, symfony, etc.
Específicamente voy a mostrar código muy sencillo que me permitió implementar funcionalidades pedidas por un cliente sin tener que hacer muchos delirios y en un par de minutos.
Bueno vamos al centro de la cuestión, el theme de drupal por defecto utiliza el formulario de búsqueda como muestro en esta imagen.

El cliente quiere un formulario así:

Hasta ahí todo bien con la estética ya que hacemos uso de CSS y no es tan complejo, pero bueno también se necesita que por defecto aparezca “Buscar…”, que al hacer click ese texto desaparezca y al perder el foco chequee el campo y si está vacío volver a imprimir “Buscar…”.
Esto se podría lograr modificando el formulario directamente del módulo, pero no sería una solución óptima ya que es una cualidad “estética” y no debería interferir cuando necesite usar otro theme gráfico.
Por eso decidí incorporar la solución directamente en el theme…para eso vamos al archivo page.tpl.php del theme en cuestión dentro de la carpeta de themes e incorporamos el código Jquery(javascript) para agregar la funcionalidad, el código lo podemos insertar directamente a través del tag <script> o utilizando un link a un archivo javascript externo.
Vamos a la solución :P:

1. Averiguo el identificador del campo de texto de búsqueda: Para esto uso el complemente de Firefox (Webdeveloper) en Formularios->Mostrar detalles del formulario.

Excelente!!! el identificador del campo es “edit-search-theme-form-1”.

2. Escribo el script necesario, en este ejemplo se incluye el script javascript en el mismo documento PHP del theme.

<script type=”text/javascript”>

/*Mediante val() asigno el valor por defecto del campo*/

$(‘#edit-search-theme-form-1’).val(‘Buscar…’);

/*Al hacer click sobre el campo verifico si el texto es “Buscar…” borro el texto y lo dejo listo para usar*/

$(‘#edit-search-theme-form-1’).click(function() {
if ($(‘#edit-search-theme-form-1′).val()==’Buscar…’){
$(‘#edit-search-theme-form-1’).val(”);
}
});

/*Ahora al hacer foco, por ejemplo llegando al campo presionando tab verifico si el texto es “Buscar…” borro el texto y lo dejo listo para usar*/
$(‘#edit-search-theme-form-1’).focus(function() {
if ($(‘#edit-search-theme-form-1′).val()==’Buscar…’){
$(‘#edit-search-theme-form-1’).val(”);
}
});


/*Al perder el foco o salir del campo, verifico si el campo está vacío o solo se ingresaron espacios en blanco, entonces le asigno nuevamente “Buscar…”*/
$(‘#edit-search-theme-form-1’).blur(function() {
if ($.trim($(‘#edit-search-theme-form-1’).val())==”){
$(‘#edit-search-theme-form-1’).val(‘Buscar…’);
}
});
</script>

De esta sencilla manera ya se puede agregar muy fácil una funcionalidad, recuerden que pueden usar este código simplemente cambiando el #edit-search-theme-form-1 por el identificador que estén usando. Espero les sirva, abrazo de gol.

Dejá una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: