Sikbox: Live Search en tu Web

  • 17/11/2008
  • 12:08 am
  • unijimpe

Sikbox es un servicio que te permitirá incluir un buscador que uso de AJAX para mostrar los resultados automáticamente, se pueden configurar la interface y los resultados ademas de tener búsqueda de texto o de imágenes.

Sikbox esta basado en Yahoo! Search BOSS para obtener los resultados y jQuery para los efectos y AJAX. Incluye dos tipos de búsqueda: texto e imágenes además de mostrar los resultados con paginación en una misma interfaz.

Como utilizar Sikbox
El uso de este servicio es muy sencillo para ello solo hace falta incluir una línea de código en nuestro web. El código consiste en una llamada a un archivo Javascript de la forma:

  1. <script src="http://sikbox.com/magic.js?d=domain.com&r=5&s=grey"
  2.  type="text/javascript"></script>

Donde se tienen los siguientes parámetros URL los cuales sirven para configuración:

  • d: es el nombre dominio donde se realizará la búsqueda
  • r: numero de resultados a mostrar por pagina.
  • s: estilo a aplicar para los resultados (default, bezel, dark, grey, minimalist).

Como pueden ver el servicio es muy potente y muy sencillo de implementar, en definitiva una excelente herramienta que facilitará la búsqueda de información para nuestros visitantes.

Posts Relacionados

TableSorter jQuery Plugin

  • 16/10/2008
  • 1:08 am
  • unijimpe

TableSorter es un plugin para jQuery que te pemitirá convertir las tradicionales tablas de datos en tablas interactivas con la posibilidad de ordenar los datos por columnas y todo ello con pocas líneas de código.

Entre las características mas destacables tenemos: ordenamiento por múltiples columnas, interpreta y ordena por texto, URLs, enteros, moneda, números flotantes, direcciones IP, fecha, hora entre otros. Adicionalmente es soportado en la mayoría de browsers (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+).

Utilizando TableSorter
Para utilizar esta librería lo primero es descargar la ultima versión de jQuery y luego el archivo jquery.tablesorter.js. Luego de ello incluimos estas librerías en el header de nuestro HTML.

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.tablesorter.js"></script>

Lo siguiente es incluir nuestra tabla de forma normal, teniendo cuidado en asignarle un identificador y utilizar los tags thead y tbody para separar los títulos del contenido en la tabla como se muestra a continuación.

  1. <table id="myTable">
  4.     <th>Last Name</th>
  5.     <th>First Name</th>
  6.     <th>Email</th>
  7.     <th>Due</th>
  8.     <th>Web Site</th>
  9. </tr>
  10. </thead>
  13.     <td>Smith</td>
  14.     <td>John</td>
  15.     <td>jsmith@gmail.com</td>
  16.     <td>$50.00</td>
  17.     <td>http://www.jsmith.com</td>
  18. </tr>
  20.     <td>Bach</td>
  21.     <td>Frank</td>
  22.     <td>fbach@yahoo.com</td>
  23.     <td>$50.00</td>
  24.     <td>http://www.frank.com</td>
  25. </tr>
  27.     <td>Doe</td>
  28.     <td>Jason</td>
  29.     <td>jdoe@hotmail.com</td>
  30.     <td>$100.00</td>
  31.     <td>http://www.jdoe.com</td>
  32. </tr>
  34.     <td>Conway</td>
  35.     <td>Tim</td>
  36.     <td>tconway@earthlink.net</td>
  37.     <td>$50.00</td>
  38.     <td>http://www.timconway.com</td>
  39. </tr>
  40. </tbody>
  41. </table>

Para finalizar hacemos un llamado a la función tablesorter indicando mediante el identificador a que tabla le aplicamos el ordenamiento.

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3.     {
  4.         $("#myTable").tablesorter();
  5.     }
  6. );
  7. </script>

Con esto ya tenemos nuestra tabla con las opciones para ordenar, obviamente lo que le hace falta es aplicarlo estilos para mejorar la apariencia con lo cual logramos obtener un buen resultado como el mostrado a continuación.

Obviamente este plugin tiene muchas opciones adicionales como definir ordenamientos iniciales, funciones para llamar al ordenamiento desde otros elementos entre otros, todo ello muy detallado y con ejemplos en el web original de TableSorter. Sin duda esta será una herramienta para mejorar la interactividad con la información que deseamos mostrar en nuestros webs.

Posts Relacionados

jqPuzzle: Puzzles con jQuery

  • 29/09/2008
  • 1:23 pm
  • unijimpe

jqPuzzle es un plugin para jQuery que te permitirá crear rápidamente Puzzles o rompecabezas utilizando cualquier imagen y así sorprender y entretener a tus amigos y familiares.

Utilizando jqPuzzle
Lo primero es descargar la librería jQuery y luego jqPuzzle en encontrarás los archivos jquery.jqpuzzle.js y la hoja de estilos jquery.jqpuzzle.css. Entonces el siguiente paso es incluir estos archivos en el header de nuestro HTML que deseamos.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.jqpuzzle.js"></script>
  3. <link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

Luego de ello, incluimos una imagen en nuestro HTML y le asignamos el estilo jqPuzzle de la siguiente forma:

  1. <img src="photo.jpg" alt="My Desktop" class="jqPuzzle" />

Con esto ya tenemos nuestro puzzle funcionado, el cual tiene las opciones de mezclar los bloques, previsualizar la imagen original y mostrar los números con la posición de cada imagen. Una versión funcionando la pueden ver en jqPuzzle.

El puzzle generado por defecto es de 4x4, si quieres modificar estos valores o modificar otras opciones adicionales puedes visitar la documentación de este plugin en jqPuzzle: How to Use

Posts Relacionados