Identifícate...

...o regístrate

codeando.net

Categoría: Javascript

jue, 13 sep 2012 - Archivado en Javascript y Diseño

Hoy presentamos otro plugin jQuery que nos permitirá crear diseños al más puro estilo Pinterest, con apenas unas pocas líneas de código: Freetile.js

http://yconst.com/web/freetile/

Por Jose. Han entrado 4278 veces.  Comentarios
mar, 04 sep 2012 - Archivado en Javascript y Enlaces

Os presento un plugin jQuery para generar diálogos o popups con unos interesantes efectos:

http://labs.voronianski.com/jquery.avgrund.js/

Por Jose. Han entrado 3796 veces.  Comentarios
vie, 15 oct 2010 - Archivado en Javascript, CSS, Libs, Diseño y Tutoriales

Una excelente recopilación de plugins, tutoriales y técnicas de jQuery:

All About jQuery: Plugins, Tutorials and Resources

http://www.noupe.com/jquery/all-about-jquery-plugins-tutorials-and-resources.html

Por Jose. Han entrado 4588 veces.  Comentarios
mar, 03 feb 2009 - Archivado en Javascript, CSS, Diseño y Tutoriales

Hola de nuevo, esta vez hemos estado más tiempo del que habríamos querido sin actualizar, pero aquí estamos de nuevo. Hoy vamos a explicar cómo hemos implementado el nuevo formulario de login (y de registro) que podéis ver si pulsais sobre el enlace que deberíais ver en la parte derecha de la cabecera y que está basado en el que podéis encontrar en este estupendo post de NETTUTS.

Bueno, para empezar crearemos la estructura HTML:

<div id="wrapper">
    <div id="panel">
        <div id="panel_contents">
        </div>
    </div>
    <div id="show_button"><a href="#">Login</a></div>
    <div id="hide_button"><a href="#">Esconder</a></div>
</div>

Como podéis ver, el código HTML es totalmente limpio, ni siquiera los enlaces llaman a funciones javascript (esto lo arreglamos luego gracias a las virtudes de jQuery). El contenido del panel irá, como ya habreis supuesto, en #panel_contents; en codeando.net hemos decidido incluir dos formularios, el de login y el de registro, pero cada uno puede colocar lo que desee.

El siguiente paso, será definir los estilos básicos (visibilidad, tamaño y posicionamiento):

#wrapper{
	text-align: center;
}
 
#toppanel {
	position: absolute;
	top: 134px;
	width: 612px;
	z-index: 25;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
 
#panel {
	width: 612px;
	position: relative;
	top: 1px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	height: 0px;
	z-index: 10;
	overflow: hidden;
	text-align: left;
}
 
#panel_contents {
	height: 100%;
	width: 616px;
	position: absolute;
	z-index: -1;
}
 
#show_button {
	position: relative;
	top: -30px;
	left: 460px;
}
 
#hide_button {
	position: relative;
	font-size: 90%;
	font-weight: bold;
	z-index: 26;
	margin-top: -36px;
}

Por supuesto, el aspecto y el posicionamiento final dependerá de vuestras necesidades de diseño; este ejemplo está basado en la implementación que hemos hecho en codeando.net.

Y por último el código javascript que hará que funcione nuestro panel desplegable:

<script type="text/javascript"><!--
	$(document).ready(function() {
		$("div#show_button").click(function(){
			$("div#show_button").toggle();
			$("div#panel").animate({
				height: "460px"
			}, "fast", "swing", function() {$("div#hide_button").toggle();});
 
		});
 
		$("div#hide_button").click(function(){
			$("div#hide_button").toggle();
			$("div#panel").animate({
				height: "0px"
			}, "fast", "swing", function(){$("div#show_button").toggle();});
 
		});
 
	});
--></script>

Y con esto ya deberíamos tener nuestro panel funcionando, todo comentario será bien recibido. En otra entrega veremos cómo implementar un sistema de registro de usuarios con activación por email.

Por Jose. Han entrado 32398 veces. Hay 13 comentarios       
mié, 05 nov 2008 - Archivado en PHP, Javascript y Tutoriales

Sigamos con el ejercicio que empezamos la semana pasada, hoy vamos a retocar el ejemplo para que nuestro script no nos muestre las etiquetas ya seleccionadas. Para ello, modificaremos las opciones del plugin "autocomplete" para que envíe el contenido ya seleccionado a nuestro script PHP, quedando así nuestro código en javascript:

  1. <script type="text/javascript"><!--
  2. $().ready(function(){
  3. $("#tags").autocomplete('gettags.php', { multiple: true, cacheLength: 0, autoFill: true, selectFirst: true, extraParams: { t: function() { return $("#tags").val() } }, formatItem: formatItem, formatResult: formatResult } );
  4. });
  5. function formatItem(row) {
  6. return row[0] + " (" + row[1] + ")";
  7. }
  8. function formatResult(row) {
  9. return row[0];
  10. }
  11. --></script>

Como vereis, hemos añadido un nuevo parámetro en la llamada a la función autocomplete:

extraParams: { t: function() { return $("#tags").val() } }

Con esto, hacemos que el plugin entregue el valor del campo "#tags" en el parámetro "t" en cada llamada (para que esto funcione, debemos también desactivar la caché con el parámetro: cacheLength: 0) el cual utilizaremos para crear un filtro en nuestra sentencia SQL:

  1. <?php
  2.  
  3. $db = mysql_connect( 'localhost', 'user', 'password' );
  4. mysql_select_db( 'my_db', $db );
  5. if ($_GET['t'] > '') {
  6. $filter = ' AND tag NOT IN ("' . str_replace( ', ', '", "', $_GET['t'] ) . '")';
  7. } else {
  8. $filter = '';
  9. }
  10. $result = mysql_query( 'SELECT tag, COUNT(tag) FROM blogs_arts_tags WHERE tag LIKE "' . $_GET['q'] . '%"' . $filter . ' GROUP BY tag ORDER BY tag', $db );
  11. while ($row = mysql_fetch_row( $result )) {
  12. echo $row[0], "|", $row[1], "\n";
  13. }
  14.  
  15. ?>

Y ya lo tenemos, podéis volver a pasar por la página de demostración para comprobar su funcionamiento, espero que lo disfrutéis ;)

Ver demostración.

Por Jose. Han entrado 5399 veces. Hay 1 comentario       
mar, 28 oct 2008 - Archivado en Javascript y Tutoriales

En el primer artículo técnico de codeando.net vamos a explicar como hemos implementado en el motor de este blog un sistema de "tags" o "etiquetas", utilizando un "autocomplete" (en este caso un plugin para jQuery).

El primer paso es incluir los ficheros necesarios para la librería y el plugin:

  1. <link rel="stylesheet" type="text/css" href="/javascript/jquery/plugins/jquery-autocomplete/jquery.autocomplete.css" />
  2. <script type="text/javascript" src="/javascript/jquery.js"></script>
  3. <script type="text/javascript" src="/javascript/jquery/plugins/jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
  4. <script type="text/javascript" src="/javascript/jquery/plugins/jquery-autocomplete/jquery.autocomplete.pack.js"></script>

Ahora inicializaremos el plugin para el campo deseado:

  1. $().ready(function(){
  2. $("#tags").autocomplete('gettags.php', { multiple: true, autoFill: true, selectFirst: true, formatItem: formatItem, formatResult: formatResult } );
  3. });
  4. function formatItem(row) {
  5. return row[0] + " (" + row[1] + ")";
  6. }
  7. function formatResult(row) {
  8. return row[0];
  9. }

Pasemos ahora a explicar las opciones que definimos en el segundo parámetro que pasamos a la función autocomplete:

  • multiple: true
    Permite que la función sea llamada múltiples veces en un mismo campo, utilizando un separador, que por defecto es ", ".
  • autoFill: true
    Completa la palabra con texto resaltado, de manera que si pulsamos intro o tabulador se inserta el tag automáticamente.
  • selectFirst: true
    Automáticamente selecciona el primer elemento de la lista al pulsar intro o tabulador, aunque no haya ninguno seleccionado.
  • formatItem: formatItem
    Llama a la función especificada (en este caso "formatItem") en la que se puede manipular el texto visible en el desplegable del autoselect.
  • formatResult: formatResult
    Como el anterior, pero aplicable al valor de la opción.

Con esto queda hecha la parte del cliente, ahora pasemos al lado del servidor: el fichero gettags.php. Este fichero está recibiendo los caracteres tecleados por el usuario en el parámetro GET "q", que utilizaremos para realizar una consulta a la base de datos y devolver el resultado:

  1. $db = mysql_connect( 'localhost', 'user', 'password' );
  2. mysql_select_db( 'my_db', $db );
  3. $result = mysql_query( 'SELECT tag, COUNT(tag) FROM tags WHERE tag LIKE "' . $_GET['q'] . '%" GROUP BY tag ORDER BY tag', $db );
  4. while ($row = mysql_fetch_row( $result )) {
  5. echo $row[0], "|", $row[1], "\n";
  6. }

Y ya sólo queda mostraros el resultado final:

Ver demostración

Por Jose. Han entrado 11617 veces. Hay 6 comentarios