Los tooltips o mensajes de ayuda son pequeños esa pequeñas cosas que juegan un gran rol en el diseño y en la atracción del usuario, por lo que si están bien diseñados e integrados en una web, y resultan realmente útiles al usuario dejaran en éstos una buena sensación sobre tu web. Aquí es donde entra JQuery para ayudarnos a hacer los tooltips. Hay muchos plugins de Jquery para hacer tooltips o éstos mensajes de ayuda, pero el que mas me ha gustado a mi es “SimpleTip”. Permite crear tooltips de manera muy sencilla usando cualquier elemento de la pagina con los selectores y gestores de eventos de Jquery. Los tooltips pueden ser estáticos, dinámicos, o se pueden cargar por AJAX con una variedad diferentes de efectos visuales. Ejemplo sencillo de integración de un tooltip estático $("#panel_usuario_cuenta").simpletip ({ content:’Bienvenido usuario este es tu panel de control!!!’, fixed:true, position: ‘top’ }); Sobre el elemento html que tiene el id=”panel_usuario_cuenta” aparecerá en la parte superior el mensaje indicado en la variable content Mas información y descargas de las librerías en la web oficial: http://craigsworks.com/projects/simpletip/
Hoy he aprendido una cosita bastante sencilla pero muy util con jquery. Estaba haciendo un pequeño desarrollo con PHP y AJAX para que un usuario pudiese seleccionar su nick en un simple input text. El tema es que cuando el nick estuviese ocupado me tendría que mostrar un mensaje en un div y cambiar el class para que se mostrase una clase css determinada. Esto yo sabía como hacerlo en javascript, pero resulta que en IE 6 peta, como siempre!!! Para lo que no lo sepan se haría con la siguiente sentencia: document.getElementById("xxxxxxxxxx").setAttribute("class", "error"); donde: xxxxxxxxxx es el id de mi div, tambien puede ser un p, o un span. class, es el atributo que queremos cambiar de la etiqueta html que estamos usando, en mi caso es el div, pero repito, puede ser un p o un span. error es el nombre de la clase css que he definido en mi hoja de estilos, que tiene un background y una imagen de fondo que muestra el look & feel de un mensajito de error. Pero bueno lo que he aprendido es a hacerlo con jquery, lo cual es una pasada porque en sólo una linea puedes añadir, modificar o [...]
Como hacer un Autocomplementador simple en AJAX Pasos para la implementación de éste módulo: incluir el siguiente .js entre las etiquetas <head></head> Ver .js y las funciones javascript que podréis ver en la Demo Online Incluir también los estilos predeterminados, también los podréis ver en el código fuente de éste archivo. En la carpeta donde se encuentra éste ejemplo hay un php “rpc.php” que contiene la llamada a la base de datos y el cual devuelve el contenido. <?php // PHP5 Implementation – uses MySQLi. // mysqli(‘localhost’, ‘yourUsername’, ‘yourPassword’, ‘yourDatabase’); $db = new mysqli(‘localhost’, ‘USERNAME’ ,’PASSWORD’, ‘DATABASE’); if(!$db) { // Show error if we cannot connect. echo ‘ERROR: Could not connect to the database.’; } else { // Is there a posted query string? if(isset($_POST['queryString'])) { $queryString = $db->real_escape_string($_POST['queryString']); // Is the string length greater than 0? if(strlen($queryString) >0) { // Run the query: We use LIKE ‘$queryString%’ // The percentage sign is a wild-card, in my example of countries it works like this… // $queryString = ‘Uni’; // Returned data = ‘United States, United Kindom’; // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE. // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE ‘$queryString%’ LIMIT 10 $query [...]
