'JQuery' Categoría


WordPress: cómo escribir una respuesta al comentario utilizando jQuery

Recientemente Cristiano Up ha lanzado un plugin útil para WordPress que pueden aggiugere dos enlaces a cada comentario en un post (tal vez se ha instalado una similar, ya que en el directorio de WordPress.org me sonrió un par, sin embargo, al ser un software italiano se el evento en honor a la excelente labor realizada por los cristianos). Estos enlaces (respuesta y presupuesto), se reúnen y / o con indicación del autor de un comentario, mediante la realización de la tediosa tarea de introducir el signo de arroba (@) para indicar a quién va dirigida. En este tutorial voy a explicar - a medio-usuarios expertos - cómo agregar características tales dos "mano", sin necesidad de recurrir a la instalación de ningún plugin. Por otra parte a sabiendas explotar las capacidades de jQuery JavaScript partido. La técnica que presentamos es la misma que he utilizado para introducir esta característica en este blog.

Nota: El uso de un plug-in es la mejor solución para aquellos que tienden a cambiar con frecuencia la plantilla de WordPress, o por lo menos, tiene planes de implementar esto. Este tutorial es sólo para mostrar cómo llevar a cabo intervenciones específicas dentro del código de WordPress y está dedicada a los más curiosos.

Edita tu comments.php

El primer cambio que hacemos es insertar el enlace "Responder" y "acciones" en cada comentario. Para ello, editar el archivo comments.php encuentra en la carpeta de nuestro tema. Este archivo contiene todas las instrucciones que aparecen los comentarios al final de un mensaje. La sección que se refiere (que puede variar ligeramente de un tema a otro) es el lazo para la creación de diferentes comentarios, identificados por:

Más información ...

jQuery: cómo construir un complemento de extensión

Al igual que todas las bibliotecas de este tipo también jQuery le permite extender su funcionalidad básica usando el plugin real. Respetar las reglas de su funcionamiento, es decir, restituiendo siempre un puntero al elemento seleccionado o el jQuery misma, puede escribir un plugin con unas pocas líneas de código. Tomemos como ejemplo el proyecto de código de jQuery en contra de todos: un punto de referencia con 5 explorador , que era (después de la corrección reportado por Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). Css ('cursor', 'puntero'). Haga clic en (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) siguiente () es (': oculto')) $ (this) siguiente () slideDown (); else $ (this) siguiente () slideUp ();....
}
);

Más información ...

jQuery en contra de todos: un punto de referencia con 5 navegador

imagen Un buen desarrollador no tiene ningún problema para cambiar de lenguaje de programación a otro. La decisión de centrarse en un idioma determinado marco o entorno de desarrollo, obedece más a la disponibilidad de tiempo y el tipo de trabajo que se realiza. Sin embargo, un factor importante que puede influir en la elección de "marco" como es la simpatía y el afecto que puede madurar con el tiempo.
En concreto, quería analizar algunos - no todos - los marcos de JavaScript disponibles en la actualidad, ya que incluso le "aconsejó" a echar un vistazo sobre todo en jQuery .
Los creadores de mootools (uno de los frameworks de JavaScript más populares) han puesto a disposición una herramienta para ejecutar una prueba de velocidad y la validez de los cinco conocidos frameworks de JavaScript: Slickspeed . Esta prueba, el resultado no es del todo obvio, es importante como trabajar en el lado cliente frameworks de JavaScript, que son realizados por nuestro navegador. Es precisamente por esta razón que algunos encuentran Safari más rápido que Internet Explorer o Google Chrome más rápido que Firefox . Sin embargo, esto a menudo depende del tipo de página que está viendo. En efecto, bien puede ocurrir que un sitio en particular es realmente "más rápido" cuando se ve en Safari, pero esto no quiere decir que "todos los sitios" será más rápida con Safari! Obviamente esto es cierto para cualquier otro navegador.

El índice de referencia

En las pruebas que he hecho con Slickspeed he comparado los navegadores disponibles en mi equipo (Windows Vista 64bit Utilmate - Intel Core 2 Quad 2,4 GHz con 8 GB de RAM).
Desafortunadamente, las pruebas no son capaces de funcionar con Internet Explorer 7, ya que el coche se estrelló, incluso yendo fuera de escala con los resultados! Una vez más, felicitaciones de Microsoft.
Yo crercato para mantener el mismo estado de la PC durante la ejecución de la prueba, abrir el navegador y no de forma individual mediante el envío de ningún otro proceso en ejecución.

Nota: Si usted siente que también se ejecutan uno o más de estas pruebas, se puede comentar en este blog en caso de resultados "extraños" y diferente.

imagen

Google Chrome fue muy rápido, con un valor de 68 (promedio) en el ensayo con jQuery . El más lento, sin embargo, fue Rebaño , a pesar de venir de la misma "madre" de Mozilla. Este pobre desempeño de Flock es realmente curioso como sus redes sociales de corte, ya que es precisamente la red social de la Web 2.0 para tomar ventaja de los marcos de JavaScript disponibles muchos, a fin de proporcionar una experiencia de navegación verdaderamente innovador y la interacción.
Sorprendentemente mejor que Firefox y Opera también tiene un "poco agradable, incluso conseguir un 74 en el rendimiento de Dojo ! Firefox y Safari, después de todo, son similares, con Safari más rápido en las pruebas con Mootools y jQuery.

¿Qué marco para elegir?

Si no nos importa poner a prueba la velocidad de ejecución y no nos importa Dimesion en Kbytes del mismo marco, la respuesta puede ser "lo que quiera", o, si se quiere, "lo que usted sabe mejor o es más armoniosa con su estilo de programación. "
En última instancia, estos marcos se verá todo un poco "(ver por ejemplo el uso de $), a pesar de algunas diferencias importantes y sustanciales que pueden saltar a los ojos de un experto o realmente empujó el uso de una biblioteca en particular. En principio, de hecho, todo lo que se puede hacer con jQuery, por ejemplo, usted puede hacer bien con mootools o prototipo! Si jQuery tiene una sintaxis muy compacto, ya que todos los métodos siempre devuelven la base objeto jQuery, creando así interminables filas de oggetto.metodo().metodo().metodo()... dijo que esto no es en absoluto cuesta un punto fuerte, especialmente para aquellos que tendrán que depurar!
Las bibliotecas como prototype.js pecado, tal vez en la ausencia de efectos, incluso simple, obligando al desarrollador de implementar como un spin-off scriptaculous.js , pesados ​​y de distancia de la elección de la primera biblioteca.

Un ejemplo

Precisamente por eso, por ejemplo, me llevó a cambiar el prototipo unido / Scriptaculous con jQuery para crear paneles interactivos o undolog.com animados aquí en la barra lateral. De hecho, incluso utilizando la API de Google para importar bibliotecas, es una carga de residuos toda la biblioteca scriptaculous para un slideDown y slideUp. Para más información y un ejemplo, aquí está el código Javascript, ya que se acopló con el prototipo / Scriptaculous:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ / Prototipo / scriptaculous
) . each ( $ $ ('H2.dropdown'). Cada uno (
element ) { función (elemento) {
= "pointer" ; .. elemento de estilo del cursor = "puntero";
'click' , elemento. observar ('click',
event ) { función (evento) {
this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. this. siguiente () el estilo de visualización == "") Efecto nueva BlindUp (this. next (), {duration: 0.5});.
Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Efecto otra nueva BlindDown (this. next (), {duration: 0.3}).;
event ) ; . Evento Stop (evento);
}
)
}
);

y ahora es con jQuery:

1
2
3
4
5
6
7
8
9
10
/ / JQuery
) . each ( $ ('H2.dropdown'). Cada uno (
i ) { función (s) {
) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ('cursor', 'puntero'). Haga clic en (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) siguiente () es (': oculto')) $ (this) siguiente () slideDown (); else $ (this) siguiente () slideUp ();....
}
);
}
);

En definitiva, una mirada más cercana, no creo que hay una gran diferencia! Pero como he dicho antes ... la pregunta es "bien" de gusto personal.

Más información ...

jQuery cambio de imagen

Esta misma semana (bajo la dirección ...) yo estaba navegando en jQuery , una gran biblioteca en el estilo de prototype.js y scriptaculous.js y MooTools , por así decirlo ... y eso es que hoy todo el sitio ha sido completamente rediseñada:

imagen

Gran comenzar a ampliar mis horizontes en este tipo de bibliotecas! Poco a publicar algunos artículos interesantes, especialmente sobre las diferencias entre jQuery bibliotecas y otros "similares".

Más información ...

Shadowbox 2.0: la versión Release Candidate 1

shadowbox Fue puesta en libertad de la Release Candidate 1 (RC1) de la versión 2.0 de la biblioteca Javascript Shadowbox , por Michael Jackson, AC , útil para abrir las ventanas dedicadas a las opiniones de los distintos tipos de medios de comunicación, desde Flash a QuickTime en páginas HTML. En esta nueva versión son:

  • El sitio está lleno de información y ahora incluye un asistente (en el estilo de mootools) para crear "sobre la marcha" un paquete de biblioteca personalizada para las necesidades de nuestros
  • Capacidad para utilizar un módulo independiente de base, sin que necesariamente se incluyen - adaptador específico - bibliotecas externas como prototype.js, jQuery, etc ...
  • Mejoras en la gestión y ejecución de Skins
  • Ubicación

La biblioteca también está disponible en SVN en:

  http://michaeljackson.googlecode.com/svn/trunk/shadowbox 

Más información ...

Google AJAX API Biblioteca: un gran avance para los desarrolladores

Bibliotecas AJAX API Google , en el último período, ha lanzado una gran cantidad de herramientas para desarrolladores, la actualización constante de sus lanzamientos. Ahora tiene un acuerdo con el popular marco de AJAX, y no sólo para centralizar la distribución de la librería jQuery , Prototype , script.aculo.us , MooTools y Dojo !

En la práctica, es posible acceder a estas bibliotecas que aprovechan la infraestructura y la red de Google, con ventajas significativas en términos de velocidad y seguridad.

La velocidad en la carga, está garantizada por la misma red que Google, que, además de proporcionar una estructura en sí de servidores distribuidos, permite (por defecto) de carga comprimido (gzip / minify) de las bibliotecas. El alojamiento más cercano a Google la solicitud será utilizada para enviar el código y, si no se cumplen o temporalmente, Google proporcionará a la red, sin embargo, enviando el código Javascript!

Más información ...

La luz de la Biblioteca: Slimbox por un Shadowbox, galerías en Javascript

Algunos podrían decir - y con razón - lo suficiente! Librerías Javascript (discreto - no intrusiva, o parcialmente) para gestionar imágenes y galerías que hay tantos. De todos modos aquí está la lista, con los pros y los contras, lo mejor que he probado.

Slimbox 01:41

Extremadamente mínimo, 7K (versión 1.41), requiere mootools para trabajar. Como se indica en la página principal es un clon gráfico real la mesa de luz , veremos más adelante. Sinceramente, aparte del tamaño compacto de la biblioteca tiene características peculiares, no propios. En el mismo sitio, sin embargo, también se puede encontrar un script para generar reflexiones en tiempo de ejecución ... es posible que desee limitar este ;)

Rating: -6 - Página principal Slimbox, Reflection.js Home Page para MooTools

Lightbox2

Lightbox2 Uno de los más conocidos y simple. Administra las imágenes contenidas en este comunicado son (por lo que no funciona con QuickTime, Flash, etc.) Para su funcionamiento, requiere de Prototype y Scriptaculous . Utilice el atributo rel para identificar los vínculos de las imágenes a procesar:

1
"images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < un href = "images/image-1.jpg" rel = "lightbox" title = "mi leyenda"> de la imagen # 1 </ un >

Al igual que las otras bibliotecas que vamos a ver, es compatible con el modo de presentación, mediante la inserción de soportes de cualquier identificador en una serie de enlace / imagen:

1
2
3
"images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < un href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> de la imagen # 1 </ un >
"images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < un href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> de la imagen # 2 </ un >
"images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < un href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> de la imagen # 3 </ un >

Calificación: 6 - Página de inicio Lightbox2

LightWindow 2,0

LightWindow 2,0 Incluso esto es bastante común! Después de todo, ¿cómo entender lo que es el más utilizado? ;) . Sin embargo, es muy completo y versátil. En el sitio se encuentra la solicitud de donaciones para la compra de un Mac ... un poco invasivo y urgente ... De todos modos, al igual que la anterior, para su funcionamiento, requiere la presencia de Prototype y Scriptaculous . A diferencia de su predecesor, sin embargo, esto le permite ver los tipos de archivos moltisiimi: a partir de las imágenes, películas QuickTime, películas Flash, páginas externas HTML y PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). Por el contrario, utiliza varios atributos, algunos opcionales ( author, caption y title ) que no obligatoria ( class y params - para establecer el comportamiento de la biblioteca). Por ejemplo, para ver una exposición en una galería o una diapositiva con el atributo rel :

1
2
3
"gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < un href = "gallery/0-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Left Behind" caption = "Mira el súper sabroso!" title = "Desconocido"> de la imagen # 1 </ a >
"gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < un href = "gallery/1-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Guardaos de los warewolves ..." caption = "Yo no debería estar haciendo esto cuando tengo hambre" title = "Desconocido"> de la imagen # 2 </ un >
"gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < un href = "gallery/2-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Eso era bueno!" caption = "Tome ese sushi!" title = "Desconocido"> de la imagen # 3 </ un >

Puntuación: 8 - Página de inicio LightWindow 2,0

Shadowbox base 10

Shadowbox Aunque la versión beta de la versión 1.0, esta es quizás la biblioteca más completa, tanto desde el punto de vista funcional, tanto para las bibliotecas compatibles. Para su funcionamiento, de hecho, se puede elegir entre una variedad de marcos, con el archivo "adaptadores" especialmente fabricados y suministrados por el autor:

El efecto visual (se puede configurar a través de la piel / css), entonces, a diferencia de los otros, es definitivamente más atractivo. Los atributos se utilizan sólo rel donde, en su interior, encontrar espacio todos los demás parámetros de configuración. Por ejemplo, para realizar una galería, el uso justo;

1
2
"beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < un href = "beach.jpg" rel = "shadowbox [de vacaciones]"> La Playa </ un >
"pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < un href = "pier.jpg" rel = "shadowbox [de vacaciones]"> The Pier </ un >

Si desea configurar algunas opciones ( véase el sitio web para la lista completa ) sólo tiene que utilizar la siguiente sintaxis:

1
"myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < un href = "myimage.jpg" rel = "shadowbox; opciones = {overlayOpacity: 0.5, tamaño: false}"> Mi imagen </ un >

En Internet se puede encontrar otro, como Highslide JS . De hecho, si alguna otra biblioteca que me quieren informar ... De todos modos, personalmente, prefiero Shadowbox por la sencillez, la escalabilidad y la cruz-marco.

Nota: 9 - Top base 10 Shadowbox

Más información ...



Deje de SOPA