Búsqueda personalizada
noviembre 16, 2008

jTagEditor

jTagEditor es un ligero plugin jQuery que permite crees o transformes tus textareas en un rápido redactor con quick tag. Muy completo, fácil de utilizar y completamente personalizable.

Demos – Descarga

Ejemplo Editor Html

Codigo

PLAIN TEXT
JavaScript:

  1. <script src=“jquery.js”></script>
  2. <script src=“jquery.jtageditor.js”></script>
  3. <script>
  4. $(document).ready(function() {
  5. $(“#html”).jTagEditor();
  6. });
  7. </script>
  8. <textarea id=“html”></textarea>

Resultado

html.jpg

Ejemplo Editor Wiki syntax

Codigo:

PLAIN TEXT
JavaScript:

  1. <script src=“jquery.js”></script>
  2. <script src=“jquery.jtageditor.js”></script>
  3. <script>
  4. $(document).ready(function() {
  5. $(“#wiki”).jTagEditor({
  6. tagSet:“wikiTagset.js”,
  7. tagMask:“”,
  8. insertOnShiftEnter:“”,
  9. insertOnCtrlEnter:“”,
  10. previewParser:“yourWikiParser.php”
  11. });
  12. });
  13. </script>
  14. <textarea id=“wiki”></textarea>

Resultado

wiki.jpg

Ejemplo editor Textile

Codigo:

PLAIN TEXT
JavaScript:

  1. <script src=“jquery.js”></script>
  2. <script src=“jquery.jtageditor.js”></script>
  3. <script>
  4. $(document).ready(function() {
  5. $(“#textile”).jTagEditor({
  6. tagSet:“textileTagset.js”,
  7. tagMask:“”,
  8. insertOnShiftEnter:“”,
  9. insertOnCtrlEnter:“”,
  10. previewParser:“yourTextileParser.php”
  11. });
  12. });
  13. </script>
  14. <textarea id=“textile”></textarea>

Resultado

texlie.jpg

Ejemplo editor BBCode

PLAIN TEXT
JavaScript:

  1. <script src=“jquery.js”></script>
  2. <script src=“jquery.jtageditor.js”></script>
  3. <script>
  4. $(document).ready(function() {
  5. $(“#bbcode”).jTagEditor({
  6. tagSet:“bbcodeTagset.js”,
  7. tagMask:“\\[)\\]“,
  8. insertOnShiftEnter:“”,
  9. insertOnCtrlEnter:“”,
  10. previewParser:“yourBbcodeParser.php”
  11. });
  12. });
  13. </script>
  14. <textarea id=“bbcode”></textarea>

Resultado

bbcode.jpg

Demos – Descarga

Publicado en Diseño,Herramientas,scripts | Responder
noviembre 16, 2008

Ventanas flotantes para web

GreyBox, es una pequeña utilidad Javascript que mediante ajax nos permite cargar en una ventana emergente diferentes enlaces, entre ellos una web, imágenes, y otras cosas. El efecto logrado es muy similar al que obtenemos utilizando lightbox.

Demos – Descarga

¿Para que podría usarlo?

  • Exhibir páginas externas
  • Exhibir páginas internas (preferencia de usuario, características, formularios de contacto, etc)
  • Exhibir un vídeo o una animación
  • Exhibir imágenes
  • Exhibir información de un producto
  • etc

¿Con que navegadores funciona?

  • Safari
  • Firefox 1.5+
  • Internet Explorer 5.5+
  • Ópera 8.5+

Instalación

Paso 1

Añadir a la sección de tu header; “GB_ROOT_DIR” donde espeficicaremos la URL donde se localizaran los archivos estáticos de GreyBox:

PLAIN TEXT
JavaScript:

  1. <script type=“text/javascript”>
  2. var GB_ROOT_DIR = “http://midominio.com/greybox/”;
  3. </script>

Paso 2

Añadir también después los scripts y un stylesheet:

PLAIN TEXT
JavaScript:

  1. <script type=“text/javascript” src=“greybox/AJS.js”></script>
  2. <script type=“text/javascript” src=“greybox/AJS_fx.js”></script>
  3. <script type=“text/javascript” src=“greybox/gb_scripts.js”></script>
  4. <link href=“greybox/gb_styles.css” rel=“stylesheet” type=“text/css” />

Ejemplos de uso

Exhibir una Web

Para accionar GreyBox solamente necesitarás añadir una etiqueta “rel” al enlace.

Ej.

PLAIN TEXT
HTML:

  1. <a href=“http://google.com/” title=“Google” rel=“gb_page_fs[]“>
  2. Abrir Google en ventana</a>

Ejemplo Visual

web.jpg

Exhibir galería de imágenes

Para accionar GreyBox añadimos una etiqueta “rel”. También utilizaremos para la galería dos imágenes por cada una. La imagen en miniatura en la exhibición de la galería y la otra en tamaño natural que se mostrara al hacer click sobre ellas.

Ej.

PLAIN TEXT
HTML:

  1. <a href=“imagenes/foto_grande.jpg” rel=“gb_imageset[nice_pics]“ title=“Night valley”>
  2. <img src=“imagenes/foto_pequeña.jpg” />
  3. </a>
  4. <a href=“imagenes/foto_grande2.jpg “ rel=“gb_imageset[nice_pics]“ title=“Salt flats in Chile”>
  5. <img src=“imagenes/foto_pequeña2.gif” />
  6. </a>

Ejemplo Visual

imagenes1.jpg

imagenes.jpg

Demos – Descarga

Otra alternativa mediante plugin

Si utilizas wordpress y deseas lograr esto de otra manera, otra alternativa entonces será el plugin GreyBox cumpliendo con las mismas funcionalidades.

Instalación

1. Descarga Plugin GreyBox

2. Descomprimir el fichero

3. Subir al FTP a la carpeta /wp-content/plugins/ todo el contenido (carpeta greybox y gb_plugin.php)

4. Activar desde el menu administrador

5. Ir a Opciones >> GreyBox para configurar las opciones del plugin. (entre otras cosas aquí podremos configurar el tamaño de la ventana que abriremos)

Modo de uso

PLAIN TEXT
HTML:

  1. <a class=”GB” href=”DIRECCION URL” title=”TITULO” …>TEXTO… </a>
Publicado en Diseño,scripts | 6 Comments
noviembre 16, 2008

Hojas de estilos para usuarios

estilos2.jpg

Style Sheet Switcher es un interesante Script que permite que nuestros usuarios puedan cambiar la hoja de estilo de nuestro blog por otra hoja de estilo alternativa que previamente diseñaremos. Dando así la posibilidad de que elijan las tonalidad que mas les agrade a la hora de navegar en nuestro sitio.

1- Descargamos el Script

2- Lo llamamos desde nuestro header entre las etiquetas < HEAD > y < / HEAD >

PLAIN TEXT
JavaScript:

  1. <script type=“text/javascript” src=“styleswitcher.js”></script>

3- Crear los varios stylesheets

Hacemos una copia de nuestra hoja de estilo y alteramos los colores y de mas cosas para crear el nuevo esquema de color para nuestra web. Le daremos a este estilo un nuevo nombre Ej: “style-alternativo.css” , creamos todos los que queremos.

4- Llamamos los stylesheets desde nuestro header. El primero será el estilo default, el que se mostrara al ingresar por primera vez al sitio.

PLAIN TEXT
HTML:

  1. <link rel=“stylesheet” type=“text/css” href=“style.css” title=“default” />

y luego llamaremos todos los estilos alternativos que hemos creado

PLAIN TEXT
HTML:

  1. <link rel=“alternate stylesheet” type=“text/css” href=“style-alternativo.css” title=“alternativo” />

4- Ahora agregaremos en nuestro sitio, el link que le permitirá a nuestros usuarios realizar el click para cambiar los estilos.

PLAIN TEXT
HTML:

  1. <a href=“/” onclick=“setActiveStyleSheet(’default’); return false;”>Default</a>
  2. <a href=“/” onclick=“setActiveStyleSheet(’alternativo’); return false;”>Alternativo</a>

Ver demo

Via designshack

Publicado en scripts | Responder
Página 14 de 14« Primera...1011121314
goto top

Novedades