mjcarrascosa.com » JavaScript http://mjcarrascosa.com Desarrollo web y otras hierbas Fri, 08 Jul 2011 07:41:10 +0000 en hourly 1 Autofocus en campos de formulario http://mjcarrascosa.com/autofocus-en-campos-de-formulario/ http://mjcarrascosa.com/autofocus-en-campos-de-formulario/#comments Mon, 23 May 2011 11:12:24 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=732 Las webs pueden usar JavaScript para situar el foco en un campo concreto de un formulario, normalmente el primero, como por ejemplo hace Google. Para facilitar esto, HTML 5 introduce una nueva propiedad en los campos de formulario, la propiedad autofocus, que nos permite hacer que un campo de formulario tenga el foco por defecto.

Veamos como se usa esta propiedad:

<!DOCTYPE html>
<html>
<head>
 <title>Autofocus</title>
</head>
<body>
 <form>
 <input type="text" name="buscar" id="buscar" autofocus/> <input type="submit" value="buscar"/>
 </form>
</body>
</html>

Sencilla de usar, pero ¿qué pasa si el navegador no soporta esta propiedad? Podemos hacer uso de JavaScript para ello:

<!DOCTYPE html>
<html>
<head>
 <title>Autofocus</title>
</head>
<body>
 <form>
 <input type="text" name="buscar" id="buscar" autofocus/> <input type="submit" value="buscar"/>
 <script>
 if( ! ("autofocus" in document.createElement( "input" ) ) )
 {
 document.getElementById( "buscar" ).focus();
 }
 </script>
 </form>
</body>
</html>

Comprobamos si el elemento input soporta la propiedad “autofocus” y si no la soporta se asignamos el foco al elemento mediante JavaScript.

Si usamos jQuery como framework JavaScript podemos hacer:

<!DOCTYPE html>
<html>
<head>
 <title>Autofocus</title>
 <script src="jquery.min.js"></script>
 <script>
 $(document).ready(function() {
 if( ! ("autofocus" in document.createElement( "input" ) ) )
 {
 $( "#buscar" ).focus();
 }
 });
 </script>
</head>
<body>
 <form>
 <input type="text" name="buscar" id="buscar" autofocus/> <input type="submit" value="buscar"/>
 </form>
</body>
</html>

Como podemos es muy fácil implementar esta funcionalidad, tanto si el navegador soporta esta propiedad como si no. Como suele ser habitual esta funcionalidad no es una panacea que haya que implementar en todos los proyectos, dependerá de las características del mismo y tendremos que saber cuando es conveniente y cuando no utilizarla.

]]> http://mjcarrascosa.com/autofocus-en-campos-de-formulario/feed/ 0 Tutorial de CKEditor. Parte IV. http://mjcarrascosa.com/tutorial-de-ckeditor-parte-iv/ http://mjcarrascosa.com/tutorial-de-ckeditor-parte-iv/#comments Sun, 06 Jun 2010 19:40:48 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=614 Entre las funcionalidades de CKEditor se encuentra una muy interesante, la posibilidad de usar plantillas en el editor. Además es bastante fácil de implementar.  Vamos a ver como configurar nuestro CKEditor para que nos permita mostrar plantillas:

<html>
  <head>
    <title>ckeditor test</title>
    <script src="ckeditor/ckeditor.js"></script>
    <script src="editor.js"></script>
  </head>
  <body>
    <textarea id="editor"></textarea>
  </body>
</html>

Esta es nuestra página con el editor. Hemos añadido el script de ckeditor y otro más llamado editor.js. En ese archivo está el código siguiente:

window.onload = function() {
  CKEDITOR.replace( 'editor',
  {
    toolbar : 'Full',
    templates_files : [ './templates.js' ]
  });
}

Hemos añadido una barra completa para que aparezca el botón de plantilla aunque, esto no es estrictamente necesario, bastaba con añadir el botón Templates a la barra de herramientas, como vimos en la segunda parte del tutorial. Vemos que hay una nueva propiedad (templates_files). Esta propiedad es un array en el que indicaremos los nombres de los ficheros donde definimos las plantillas. En este caso solo un archivo, llamado templates.js.

El archivo templates.js tendrá el siguiente código:

// Registramos las plantillas
CKEDITOR.addTemplates( 'default',
{
  // La ruta donde están las imágenes de las plantillas
  imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

  // Definición de las plantillas
  templates :
  [
    {
      title: 'Plantilla 1',
      image: 'template1.gif',
      description: 'Descripci&oacute;n de la plantilla 1.',
      html:
        '<h2>Pantilla 1</h2>' +
        '<p>Inserte el texto aqu&iacute;.</p>'
    },
    {
      title: 'Plantilla 2',
      html:
      '<h3>Plantilla 2</h3>' +
      '<p>Inserte el texto aqu&iacute;.</p>'
    }
  ]
});

Ahora vamos a la parte interesante. Para añadir plantillas llamamos al addTemplates, al que le pasamos un nombre y un objeto con los datos necesarios para mostrar las plantillas. El objeto tiene los campos imagePath, donde le indicamos la ruta de la imágenes que aparecerán como vista previa de la plantilla, y templates, un array de objetos que tienen los datos de la plantilla. Estos datos son:

  • title: Título de la plantilla.
  • image: imagen de vista previa de la plantilla.
  • description: descripción de la plantilla.
  • html: La plantilla propiamente dicha.

De esta sencilla forma podemos añadir plantillas a nuestro editor. Cuando pulsemos sobre el botón de plantillas nos aparecerá la siguiente ventana:

Ahora solo toca seleccionar nuestra plantilla y esta aparecerá como contenido de nuestro editor, reemplazándolo o añadiéndolo según hayamos indicado en la ventana,

]]> http://mjcarrascosa.com/tutorial-de-ckeditor-parte-iv/feed/ 12 Hacer visible un campo password con jQuery http://mjcarrascosa.com/hacer-visible-un-campo-password-con-jquery/ http://mjcarrascosa.com/hacer-visible-un-campo-password-con-jquery/#comments Mon, 26 Apr 2010 00:20:06 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=597 Los campos de tipo password no muestran el contenido que tecleamos, evidentemente para evitar que alguien pueda ver nuestras contraseñas. Pero en ocasiones, por ejemplo cuando estamos en casa y no hay nadie cerca, nos puede interesar mostrar el contenido de estos. Usando la librería jQuery podemos hacer esto de forma muy sencilla.

Vamos a ver primero el código de nuestro formulario:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>Login</title>
      <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="login.js"></script>
   </head>
   <body>
      <form onsubmit="return false;">
         <label for="user">Usuario:</label><input type="text" name="user" id="user"/><br/>
         <label for="password">Password:</label><input type="password" name="password" id="password"/><br/>
         <input type="checkbox" id="show"/> <label for="show">Mostrar password.</label><br/>
         <input type="submit" value="login"/>
      </form>
   </body>
</html>

Es un formulario muy sencillo, ni siquiera envia datos, pero nos sirve como ejemplo. Podemos ver que añadimos dos scripts a la página, el de jQuery y el que contendrá el código para mostrar el campo password. También observamos que hay un campo checkbox que tendremos que seleccionar para ver el contenido de campo password.

Ahora vamos con el código para mostrar el valor del campo, que está en el archivo login.js:

$(document).ready( function(){

   $('#show').attr('checked', false);

   $('#show').click(function(){

      name = $('#password').attr('name');
      value = $('#password').attr('value');
      if($(this).attr('checked'))
      {
         html = '<input type="text" name="'+ name + '" value="' + value + '" id="password"/>';
         $('#password').after(html).remove();
      }
      else
      {
         html = '<input type="password" name="'+ name + '" value="' + value + '" id="password"/>';
         $('#password').after(html).remove();
      }
   });
});

Básicamente lo que hacemos es añadir un evento click al campo checkbox. Cuando se hace click sobre el checkbox este comprueba su valor y sustituye el campo, por otro igual del tipo que corresponda, password cuando no está seleccionando y text cuando lo está, dándole el mismo valor a los atributos de este.

Podéis ver una demo en el siguiente enlace:

Demostración de como hacer visible un campo password con jQuery

Y también podéis descargar los archivos de la demo:

Archivos para hacer visibe un campo password con jQuery

]]> http://mjcarrascosa.com/hacer-visible-un-campo-password-con-jquery/feed/ 1 Como utilizar Lightbox 2 http://mjcarrascosa.com/como-utilizar-lightbox-2/ http://mjcarrascosa.com/como-utilizar-lightbox-2/#comments Thu, 11 Mar 2010 13:56:32 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=506 Lightbox es un script escrito en JavaScript que nos permite mostrar una “popup” con una imagen de una forma bastante elegante. Para hacer uso de Lightbox lo primero que vamos a hacer es descargarnos el script desde su página web.

Una vez que tenemos esto ya podemos incluirlo en nuestra página. Lo primero que tendremos que incluir es el framework Prototype y la librería de efectos Scriptaculous, ambas vienen con Lightbox, ya que Lightbox hace uso de estas. Una vez incluidas añadiremos también el script de Lightbox:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Tras añadir los script tenemos que incluir el archivo con los estilos de Lightbox:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Una vez hecho esto ya tenemos Lightbox listo para usarlo. Para ello tendremos que añadir el atributo rel con el valor “lightbox” al enlace que queremos que muestre nuestra imagen. Veamos un ejemplo:

<a href="images/image1.jpg" rel="lightbox" title="Imagen 1">imagen 1</a>

De ese modo al hacer click sobre el enlace se abrirá la imagen indicada en la propiedad href, pero lo hará mediante Lightbox. Si a la etiqueta <a> le añadimos el atributo title, en el ejemplo está, Lightbox nos mostrará también el título.

Podemos crear conjuntos añadiendo el nombre del conjunto entre corchetes en el atributo rel, de la siguiente forma:

<a href="images/image1.jpg" rel="lightbox[set]">imagen 1</a>
<a href="images/image2.jpg" rel="lightbox[set]">imagen 2</a>
<a href="images/image3.jpg" rel="lightbox[set]">imagen 3</a>

Como se ha podido ver con Lightbox podemos mostrar nuestras imágenes de una forma más elegante que mostrando solo la imagen en el navegador.

Podéis descargar un pequeño ejemplo en el siguiente enlace:

Demo de LightBox 2

]]> http://mjcarrascosa.com/como-utilizar-lightbox-2/feed/ 2 Tutorial de CKEditor. Parte III. http://mjcarrascosa.com/tutorial-de-ckeditor-parte-iii/ http://mjcarrascosa.com/tutorial-de-ckeditor-parte-iii/#comments Thu, 03 Dec 2009 09:27:19 +0000 Manuel Jesús Carrascosa de la Blanca http://mjcarrascosa.com/?p=434 Hoy, por petición de un lector, vamos a ver como añadir a CKEditor un navegador de archivos que nos permite subir archivos e insertar imágenes al servidor. Para ello vamos a hacer uso de CKFinder, el navegador en cuestión.

Así se ve CKFinder

Así se ve CKFinder

Lo primero que tenemos que hacer es descargarnos CKFinder y colocarlo en el mismo sitio donde tenemos la carpeta de CKEditor, aunque esto no es obligatorio si es recomendable. Para el tutorial vamos a usar la versión para PHP. Tiene que quedar de la siguiente manera:

Disposición de los archivos

Disposición de los archivos

Una vez que tenemos esto solo tenemos que incluir la librería de CKFinder y hacer que este sea el navegador y gestor de nuestros archivos. Para ello nos basta con el código siguiente (corregido gracias a los lectores):

<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="./ckfinder/ckfinder.js"></script>
<script type="text/javascript">
window.onload = function()
{
 editor = CKEDITOR.replace('editor');
 CKFinder.setupCKEditor( editor, '/ckfinder/' );
}
</script>

De esta forma usamos CKFinder para que nos configure el editor, sin tener que tocar la configuración de este. Hay también métodos para hacer mediante la configuración de CKEditor, pero son más complejos y esto tampoco es un tutorial extensivo.

Así se ve el Pop Up de imagen

Así se ve el Pop Up de imagen

Si probamos esto veremos que no funciona, que nos da un error de configuración. Para solucionar esto tenemos que editar el archivo config.php. Buscaremos una función que se llama CheckAuthentication. Esta función devuelve true si el usuario tiene permiso para usar CKFinder y false si no lo tiene. Como podemos ver por defecto devuelve false. Aquí deberiamos comprobar si el usuario ha iniciado sesión, los permisos o roles que tiene asignado, etcétera; y en función de esto devolver lo que corresponda. Para hacer la prueba vamos simplemente a hacer que devuelva true:

function CheckAuthentication()
{
return true;
}

Ahora si nos dejará tanto subir archivos como seleccionar estos una vez subidos.

]]> http://mjcarrascosa.com/tutorial-de-ckeditor-parte-iii/feed/ 30