Tutorial de jQuery

Comentarios

Traducción de Primeros pasos con jQuery

Este tutorial es una introducción a la biblioteca jQuery. Usted necesita conocimientos básicos de JavaScript y Document Object Model (DOM). Vamos a empezar desde el principio y explicar los detalles cuando sea necesario. Cubren un simple hola ejemplo del mundo, la selección y las bases de eventos, AJAX, FX, y la producción y el uso de plugins.

El tutorial no tiene ", haga clic aquí" para ver el funcionalides. La intención es que copia el código y probarlo usted mismo. Copiar, ver lo que hace, y modificar.

  1. Instalación
  2. Hola jQuery
  3. Encuéntrame: El uso de selectores y eventos
  4. Grado mí: Uso de Ajax
  5. Me animé: Uso de los efectos
  6. Puedo pedir: Uso del plugin tablesorter
  7. Abrázame: Escribir sus propios plugins

Instalación

Para empezar, necesitamos una copia de la biblioteca jQuery, disponible en el sitio oficial . El Starterkit jQuery viene con algo de código CSS y para facilitar. Después de tirar y extraer el archivo seleccionado, coloque el archivo jquery.js el mismo directorio, y basta con abrir el correo custom.js starterkit.html en tu editor favorito, y starterkit.html con el navegador.

Tenemos todo para empezar con el ejemplo infame "Hello World".

Hola jQuery

Comenzamos con una página HTML esqueleto:

HTML:
  1. src = "jquery.js" > </script> <Script type = "text / javascript" src = "jquery.js"> </ script>
  2. > <Script type = "text / javascript">
  3. / / Añadir nuestro código Javascript aquí
  4. </ Script>
  5. </ Head>
  6. <--- Añadir nuestro contenido HTML aquí ->
  7. </ BODY>
  8. </ Html>

Esto sólo carga la página de la biblioteca jquery.js esqueleto (asegúrese de que la dirección, la parte interior de los puntos de atributo src de la copia local del archivo jquery.js! En este ejemplo vamos a suponer que está en el mismo directorio para esta página muestra). Ambos comentarios indicar dónde vamos a añadir nuevo código.

Como casi todo hecho con jQuery lee o manipula el modelo de objetos de documento (DOM), debemos estar seguros de que estamos agregando eventos (u otras acciones) para que el DOM está listo.

Para ello, se registró un caso en el documento preparado:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. / / Hacer algo cuando el DOM está listo
  3. ));

Sólo hay que poner un alert () función que no tiene mucho sentido, ya que el alert () no requiere cargar el DOM. Así que vamos a intentar algo más sofisticado: Alerta de llamada () cuando se hace clic en un enlace.

Agregue lo siguiente en <body>:

HTML:
  1. > Link </a> <A href = ""> Link </ a>

Ahora modificar el $ (document). Ready:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . click ( function ( ) { $ ("A"). Haga clic en (función () (
  3. "Olá Mundo!" ) ; alert ("Hola Mundo!");
  4. ));
  5. ));

Y por lo que debería ver la alerta para que al hacer clic en el enlace.

Vamos a ver lo que estamos haciendo mejor: $ ("a") es un selector de jQuery, en cuyo caso, se selecciona todos los elementos. $ Es un alias para la función de jQuery, entonces $ () construye un nuevo objeto jQuery. haga clic en la función () llame a continuación, es un método del objeto jQuery. Mete un evento click a todos los elementos seleccionados (en el caso de nuestro ejemplo, un solo enlace / link) y realiza la función especificada cuando se produce el evento.

Todo esto es similar al código siguiente:

HTML:
  1. onclick = "alert('Olá Mundo!')" > Link </a> <A href = "" onclick = "alert ('Hola Mundo')"> Link </ a>

Pero nuestro camino, no necesitamos escribir onclick () para cada elemento. Nosotros estructura separada (HTML) el comportamiento (JS), así como la estructura y la presentación por separado usando CSS.

Dicho esto, vamos a explorar más selectores y eventos.

Encuéntrame: El uso de selectores y eventos

jQuery nos ofrece dos formas de seleccionar elementos. El primero utiliza una combinación de selectores CSS y XPath pasa como texto al constructor de jQuery (por ejemplo: $ ("div> ul un")). El segundo enfoque utiliza diversos métodos del objeto jQuery. Y las dos maneras se pueden mezclar.

Para experimentar con algunos de estos selectores, que elegir y modificar la primera lista ordenada de Starterkit.

Para empezar, seleccione la lista en sí. La lista tiene el id "orderedlist. En puro JavaScript, puede seleccionar con document.getElementById ("orderedlist). Con jQuery, lo hacemos:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . addClass ( "red" ) ; $ ("# Orderedlist). AddClass (" rojo ");
  3. ));

El Starterkit viene con una hoja de estilo (CSS) con una clase llamada "rojo", que sólo tiene que especificar un color de fondo rojo. Así que cuando usted vuelva a cargar la página en el navegador, debería ver la primera lista con un fondo de color rojo. Y la segunda lista, con modificaciones.

Ahora vamos a añadir algunos más clases a los elementos secundarios de esta lista:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . addClass ( "blue" ) ; $ ("# Orderedlist> li"). AddClass ("azul");
  3. ));

El código anterior selecciona el elemento li niños todos con id orderedlist ellos y agrega la clase "azul".

Ahora algo un poco más sofisticado. Queremos agregar y quitar a la clase cuando el usuario se desplaza sobre el elemento li, pero sólo el último elemento de la lista.

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . hover ( function ( ) { $ ("# Orderedlist li: last"). Hover (función () (
  3. ) . addClass ( "green" ) ; $ (Este). AddClass ("verde");
  4. ( ) { ), Función () (
  5. ) . removeClass ( "green" ) ; $ (Este). RemoveClass ("verde");
  6. ));
  7. ));

Para cada onXYZ evento como onclick, onchange, onsubmit existe un equivalente de jQuery. Algunos otros elementos tales como preparados y revolotean, están disponibles como métodos convenientes para determinadas tareas.

Con estos selectores y eventos que ya se pueden hacer muchas cosas, pero hay más.

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . find ( "li" ) . each ( function ( i ) { $ ("# Orderedlist). Find (" LI "). Cada función ((i) (
  3. ) . append ( " BAM! " + i ) ; $ (Este). Append ("BAM!" + I);
  4. ));
  5. ));

El método find () le permite buscar en los descendientes del elemento ya está seleccionado, entonces $ ("# orderedlist). Find (" LI ") es similar a $ (" # li orderedlist ").

El método de cada iteración () a través de cada elemento y permitir su posterior procesamiento. Muy métodos como addClass (), utilizando cada uno () ellos mismos.

En el ejemplo anterior, append () utiliza para concatenar texto en el elemento.

Otra de las tareas comúnmente encontrado es para llamar a métodos en los elementos DOM que no existen en jQuery. Imagine una forma que le gustaría que lo presentara de nuevo después de éxito a través de AJAX.

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. / / Use esto para iniciar un formulario único
  3. ) . click ( function ( ) { $ ("# Reset"). Haga clic en (función () (
  4. ) [ 0 ] . reset ( ) ; $ ("Formulario") [0]. Reset ();
  5. ));
  6. ));

El código anterior selecciona el elemento del formulario primero y luego llama a reset () él. Si usted tiene más de un formulario en la página, también puedes hacer lo siguiente:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. / / Use esto para empezar a múltiples formas a la vez
  3. ) . click ( function ( ) { $ ("# Reset"). Haga clic en (función () (
  4. ) . each ( function ( ) { $ ("Formulario"). Cada función (() (
  5. ( ) ; este. reset ();
  6. ));
  7. ));
  8. ));

El ejemplo anterior selecciona todas las formas en el documento, reitera ellos y llamar a reset () para cada uno. Tenga en cuenta que dentro de cada una) función (, esto se refiere al elemento actual. También tenga en cuenta lo siguiente, desde el restablecimiento del function () pertenece al elemento de forma y no al objeto jQuery, simplemente no puede llamar a $ ("forma"). Restablecer () para reanudar todas las formas de la página.

Un desafío común es seleccionar sólo los componentes de un grupo de similares o idénticos. jQuery tiene filtro métodos () y no () para ello. Si bien el filtro () reduce la selección de elementos a los que se encuentran en la expresión de filtro utilizado, y no () hace lo contrario y elimina todos los elementos encontrados en la expresión. Imagine una lista desordenada en la que desea seleccionar todos los elementos li que no tienen hijos ul.

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . not ( ":has(ul)" ) . css ( "border" , "1px solid black" ) ; $ ("LI"). (No ": ¿Ha (ul)"). Css ("border", "1px solid negro");
  3. ));

Este código selecciona todos los elementos li, eliminar a aquellos que tienen hijos ul, y aplicar un borde negro en ellos.

El] [expresión se deriva de la sintaxis XPath y se puede utilizar para filtrar por atributos. Es posible que desee seleccionar todos los vínculos que tienen el nombre del atributo:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . css ( "background" , "#eee" ) ; ("A [@ name] $"). Css ("fondo", "# eee");
  3. ));

Probablemente más común para seleccionar los enlaces por su nombre, los vínculos que desea seleccionar el atributo "href" ellos. Esto puede ser un problema, ya que los navegadores tratar lo que es incompatible "href" cada uno a su manera. Para seleccionar parte de un valor, podemos utilizar el selector contiene "*=" en lugar de igualdad "=":

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . click ( function ( ) { $ ("A [@ href *= / content / galería]"). Haga clic en (función () (
  3. / / Hacer algo con todos los vínculos que han / / galería de contenido
  4. ));
  5. ));

Hasta ahora, todos los selectores se utilizaron para seleccionar a los niños o filtrar la opción actual. Hay situaciones en las que tiene que elegir los elementos siguientes o anteriores, conocidos como hermanos. Imagine una página de preguntas frecuentes cuando las cuestiones son inicialmente oculta, sino que se presentan cuando la pregunta se hace clic. El código de jQuery para esto es:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . find ( 'dd' ) . hide ( ) . end ( ) . find ( 'dt' ) . click ( function ( ) { $ ('# FAQ »). Find (' dd '). Hide (). Fin (). Find (' dt '). Haga clic en (función () (
  3. ) . next ( ) . slideToggle ( ) ; $ (Este). Siguiente (). SlideToggle ();
  4. ));
  5. ));

Aquí usamos la cascada para reducir el tamaño del código y mejorar el rendimiento, ya que '# faq' esté seleccionada una sola vez. Cuando se utiliza end (), el primer find () está roto, podemos mirar a otro find () sobre el elemento # faq lugar de los hijos de los DD.

Dentro de un click (), usamos $ (este). Siguiente () para encontrar el siguiente hermano de la actual dt. Esto nos permite seleccionar rápidamente la siguiente respuesta a la cuestión de hacer clic.

Además de los hermanos, también puede seleccionar los padres elementos. Tal vez usted quiere poner de relieve el párrafo vínculo de los padres de que el usuario pasa el ratón por encima. Pruebe lo siguiente:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . hover ( function ( ) { $ ("A"). Hover (función () (
  3. ) . parents ( "p" ) . addClass ( "highlight" ) ; $ (Este). Los padres ("p"). AddClass ("resaltar");
  4. ( ) { ), Función () (
  5. ) . parents ( "p" ) . removeClass ( "highlight" ) ; $ (Este). Los padres ("p"). RemoveClass ("resaltar");
  6. ));
  7. ));

Vamos a retroceder un paso antes de continuar: jQuery se enfoca en hacer el código más pequeño y por lo tanto más fáciles de leer y mantener. La siguiente línea es una abreviatura de $ (document). Ready (de devolución de llamada):

JAVASCRIPT:
  1. ( ) { $ (Función () (
  2. / / Código a correr cuando el DOM está listo
  3. ));

Aplicando el ejemplo Hello World, tenemos esto:

JAVASCRIPT:
  1. ( ) { $ (Función () (
  2. ) . click ( function ( ) { $ ("A"). Haga clic en (función () (
  3. "Olá Mundo!" ) ; alert ("Hola Mundo!");
  4. ));
  5. ));

Cubierto lo básico, vamos a explorar otros aspectos, comenzando con AJAX.

Grado mí: Uso de Ajax

En esta parte se escribe una pequeña aplicación Ajax, para hacer notas sobre algo, como se hace con los videos en youtube.com.

No queremos que este ejemplo funcione sin Ajax, aunque es posible, entonces generamos el código y el texto con jQuery para concatenar en un div con id "de calificación.

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. / / Generar código
  3. ) . append ( "Por favor dê nota: " ) ; $ ("# Clasificación"). Append ("Por favor tome nota:");
  4. var i = 1 ; i <= 5 ; i++ ) for (var i = 1; i <= 5; i + +)
  5. ) . append ( "<a href='#'>" + i + "</a> " ) ; $ ("# Clasificación"). Append ("<a href='#'>" + i + "</ a> ');
  6. / / Añadir código en el div y aplicar los clics en los enlaces directivos
  7. ) . click ( function ( e ) { $ ("# Recomendación a"). Haga clic en (función (e) (
  8. / / Prevenir normales, haga clic en los enlaces
  9. ; e. preventDefault ();
  10. / / Solicita más información
  11. "exemplo.php" , { rating: $ ( this ) . html ( ) } , function ( xml ) { $. Post (exemplo.php ", (Nota: $ (este). Html ()), función (XML) (
  12. / / Formato de visualización y el resultado
  13. ) . html ( $ ("# Clasificación"). Html (
  14. "Gracias por la nota, el promedio actual:" +
  15. , xml ) . text ( ) + $ ("Promedio", xml). Texto (), +
  16. "Número de votos:" +
  17. , xml ) . text ( ) ("Count", xml). Texto $ ()
  18. );
  19. ));
  20. ));
  21. ));

Este fragmento de código genera los cinco elementos y concatenar ellos en el elemento con id "de calificación. Entonces, para cada eslabón de la div, también fue director, se añade. Cuando se hace clic en el enlace, una solicitud POST se envía a exemplo.php con el contenido de la relación como un parámetro. Los resultados devueltos como XML se agrega a la div, en sustitución de los enlaces.

Uno de los problemas encontrados con frecuencia cuando el contenido de carga a través de Ajax es el siguiente: Mediante la adición de controladores de eventos en ese documento también debería ser emprendido en el contenido, usted debe aplicar después de cargar el contenido. Para evitar la duplicación de código, puede delegar a una función. Ejemplo:

JAVASCRIPT:
  1. addClickHandlers función () (
  2. , this ) . click ( function ( ) { $ ("A.remote", este). Haga clic en (función () (
  3. ) . load ( this . href , addClickHandlers ) ; $ ("# Target"). Carga (this. Href, addClickHandlers);
  4. ));
  5. )
  6. . ready ( addClickHandlers ) ; $ (Document). Ready (addClickHandlers);

Ahora addClickHandlers se llama sólo una vez cuando el DOM está listo y cada vez que el usuario hace clic en un vínculo con la clase a distancia y el contenido ha terminado de cargar.

La atención a los $ ("a.remote", este), se pasa como un contexto: En el caso de que el documento listo, esto se refiere al documento, y por lo tanto la demanda de todo el documento para los vínculos a la clase a distancia. Cuando addClickHandlers se utiliza como una devolución de llamada a load (), esto se refiere a un elemento diferente: En nuestro ejemplo, el elemento con id "objetivo". Esto evita que el evento de clic se aplica varias veces para los mismos enlaces.

Otro problema común con las devoluciones de llamada son parámetros. Se especifica su devolución de llamada, sino que debe pasar un parámetro adicional. La forma más sencilla de hacerlo es poner dentro de otra función de devolución de llamada:

JAVASCRIPT:
  1. / / Obtener los datos
  2. foobar var = ...;
  3. / / Especificar gerente, usted necesita hasta la fecha como parámetro
  4. data ) { controlador de función (de datos) (
  5. //...
  6. )
  7. / / Haga clic en Agregar () y pasar foobar
  8. ) . click ( function ( ) { $ ('A'). Haga clic en (función () (
  9. ; controlador (foobar);
  10. ));
  11. / / Si usted necesita el contexto original del administrador, utiliza apply ():
  12. ) . click ( function ( ) { $ ('A'). Haga clic en (función () (
  13. this , [ foobar ] ) ; controlador. aplican (esto, [foobar]);
  14. ));

Ahora que hemos visto un poco de Ajax, vamos a añadir algunos efectos simples y animaciones a la página.

Me animé: Uso de los efectos

animaciones simples se hacen con show () de jQuery y ocultar ():
[JavaScipt] $ (document). Ready (función () (
$ ("A"). Activar (función () (
$ (". Stuff".) Ocultar ('lento');
), Función () (
$ (". Stuff"). Mostrar ('rápido');
));
});[/] JavaScipt

Usted puede crear cualquier combinación de animaciones para animar (), por ejemplo, la diapositiva con la opacidad:
$ (Document). Ready (función () (
$ ("A"). Activar (función () (
$ (". Stuff"). Animar ((altura: 'hide', la opacidad: 'ocultar'), 'lento');
), Función () (
mostrar $ (". Stuff"). Animar ((altura: ", la opacidad: 'show'), 'lento');
));
));

Muchos otros efectos legales se pueden hacer con una colección de plugins interfaz . Aunque la interfaz de estar en la cima de la lista de plugins para jQuery, hay muchos otros. La siguiente parte utiliza el plugin tablesorter .

Puedo pedir: Uso del plugin tablesorter

El plug-in permite tablesorter tablas tipo directamente en el navegador. ¿Incluye la biblioteca jQuery y el archivo del plugin, simplemente decir lo que las tablas que desea ordenar.

Por ejemplo, este trabajo tiene que tirar del enchufe tablesorter y añadir la siguiente línea en starterkit.html (por debajo del cual incluye el jQuery):

HTML:
  1. > </script> <Script src = "jquery.tablesorter.js"> </ script>

Después de añadir el plug-in, usted puede llamar así:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . tablesorter ( ) ; $ ("# Large"). Tablesorter ();
  3. ));

Intenta hacer clic en los encabezados de tabla del archivo de ejemplo y ver cómo se ordena hacia arriba y hacia abajo en la primera posición en la segunda.

Una tabla puede tener filas de relieve, y podemos hacer esto pasando algunas opciones:

JAVASCRIPT:
  1. . ready ( function ( ) { $ (Document). Ready (función () (
  2. ) . tablesorter ( { $ ("# Large"). Tablesorter ((
  3. / / Visual rayas
  4. ] reproductores: cebra '] [
  5. ));
  6. ));

La mayoría de plugins se puede utilizar también. Incluya el archivo de plugins y llamar a sus métodos en algunos elementos, pasando configuraciones adicionales de personalización.

Una lista actualizada de los plugins se puede encontrar en jQuery Plugin .

Cuando está utilizando jQuery con frecuencia, puede ser útil para envolver el código como un plugin, o para su reutilización usted o su empresa, o para compartir con la comunidad. El siguiente capítulo da algunos consejos sobre cómo estructurar un plugin.

Abrázame: Escribir sus propios plugins

Escriba su propio plugin para jQuery es muy fácil. Y yo respondo a las siguientes reglas, que sea más fácil para otras personas para integrar su plugin.

Nombre del plugin

Buscar un nombre para él, vamos a llamar al nuestro "foobar". Crear un archivo llamado jquery.nomedoplugin.js, por ejemplo, jquery.foobar.js

Añadir sus propios métodos

Crear uno o más métodos de plugins ampliar el objeto jQuery, por ejemplo,

JAVASCRIPT:
  1. = function ( ) { jQuery. fn. foobar = function () (
  2. / / Hacer algo
  3. );

Que estará disponible la siguiente orden:

JAVASCRIPT:
  1. . foobar ( ) ; $ (...). Foobar ();

Confirguração estándar

Crear valores predeterminados que pueden ser modificados por los usuarios, por ejemplo:

JAVASCRIPT:
  1. = function ( options ) { jQuery. fn. foobar = function (opciones) (
  2. ( { = Ajuste de jQuery var. Ampliar ((
  3. : "pete" , bar: 655 Valor: 5, nombre: "Pete", un bar: 655
  4. ; ), Opciones);
  5. );

Usted puede llamar el plugin sin opciones, utilizando las normas:

JAVASCRIPT:
  1. ) . foobar ( ) ; $ ("..."). Foobar ();

O con algunas opciones:

JAVASCRIPT:
  1. ) . foobar ( { value: 123 , bar: 9 } ) ; $ ("..."). Foobar ((valor: 123, bar: 9));

Documentación

Si usted proporciona su plug-in, puede dar algunos ejemplos y documentación. Hay varios plugins disponibles que puede utilizar como referencia.

Conocimientos básicos para escribir plugins que es. Vamos a escribir nuestro único.

Plugin casilla

Muchas personas, para manejar formularios con jQuery, signo de interrogación y anular la selección de botones de opción o casillas de verificación. El código es el siguiente:

JAVASCRIPT:
  1. ) . each ( function ( ) { ("Input [@ type = $ casilla de verificación"']"). Cada función (() (
  2. = true ; este. checked = true;
  3. = false ; // ou, para desmarcar este. comprobarse = false; / o claro
  4. = ! this . checked ; // ou, para inverter este. checked =! esto. controlarán / o para invertir
  5. ));

Como un plugin es directa:

JAVASCRIPT:
  1. = function ( ) { jQuery. fn. cheque = function () (
  2. ( function ( ) { devolver este. cada función (() (
  3. = true ; este. checked = true;
  4. ));
  5. );

Y ahora se puede utilizar:

JAVASCRIPT:
  1. ) . check ( ) ; ("Input [@ type = $ casilla de verificación"']"). Marque ();

También puede escribir plugins para desactivar () y inverterCheck (). Pero en vez vamos a ampliar nuestros plugins para aceptar algunas de las opciones.

JAVASCRIPT:
  1. = function ( mode ) { jQuery. fn. check = función (modo) (
  2. / / Si el modo no se establece, utilizamos "on" por defecto
  3. ; modo var = modo | | 'en';
  4. ( function ( ) { devolver este. cada función (() (
  5. mode ) { switch (modo) (
  6. : caso 'n':
  7. = true ; este. checked = true;
  8. break;
  9. : caso de "apagado":
  10. = false ; este. checked = false;
  11. break;
  12. : case 'alternar':
  13. = ! this . checked ; este. checked =! esto. facturado;
  14. break;
  15. )
  16. ));
  17. );

Teniendo en cuenta una opción estándar, el usuario puede omitir la opción o pasar a otro: "en la" u "off" y "cambiar", ej.:

JAVASCRIPT:
  1. ) . check ( ) ; ("Input [@ type = $ casilla de verificación"']"). Marque ();
  2. ) . check ( 'on' ) ; ("Input [@ type = $ casilla de verificación"']"). Check ('on');
  3. ) . check ( 'off' ) ; ("Input [@ type = $ casilla de verificación"']"). Check ('off');
  4. ) . check ( 'toggle' ) ; ("Input [@ type = $ casilla de verificación" Comprobar']"). ('cambiar');

Ajustes opcionales

Con más de una opción opcional, de esta manera se complica porque el usuario tendría que pasar valores nulos en la que se quiere omitir.

El uso de tablesorter anteriormente demuestra la aplicación de un objeto de resolver este problema. Puede omitir todos los parámetros o pasar un objeto con la clave / valor para cada configuración a sobrescribir.

Como ejercicio, puede intentar volver a escribir el código como plugin nota anterior. El esqueleto del código sería el resultado:

JAVASCRIPT:
  1. = function ( options ) { jQuery. fn. rateMe = function (opciones) (
  2. / / En lugar de seleccionar un contenedor con fijos
  3. / / $ ("# Rating"), se utiliza el contexto jQuery
  4. ; var contenedor = esto;
  5. ( { = Ajuste de jQuery var. Ampliar ((
  6. url: "exemplo.php"
  7. / / Más patrones que aquí se
  8. ; ), Opciones);
  9. / / ... resto del código ...
  10. / / Si es posible, el regreso "esto" no para romper la cascada
  11. devuelva esta;
  12. ));
  13. Que le permitirá ejecutar el plugin de la siguiente manera:
  14. $ ( ... ) . rateMe ( { url: "test.php" } ) ; [Javascript] $ (...). RateMe ((url: "test.php"));

  • Anderson
    Hola, he encontrado tu mt tutorial interesante y tengo una pregunta ...

    Tengo este y seleccione una que llamar a la misma función en ambos eventos OnClick onchage y ahora se ve así:

    $ ("# Profesión"). Cambio (función () (
    $. Post ('buscaEspecialidade.php «especialidad (: $ (este). Val ()), función (respuesta) (
    if (! respuesta == "") (
    $ ("# Especial"). Show ();
    $ ("# Contenido"). Html (respuesta);
    Otras ()
    $ ("# Especial"). Hide ();
    (""); $ ("# Contenido"). Html
    )
    ));
    ))

    sino que debe asociar la misma función para el evento click, usted puede usar la misma función que hace referencia a los dos eventos y Haga clic en Cambiar??

    Espero su respuesta!

    Valeuuu
blog alimentado por los comentarios Disqus

Português flagItaliano flagCoreano flagChinês (simplificado) flagEnglish flagAlemâo flagFrancês flagEspanhol flag
Japonês flagÁrabe flagRusso flagHolandês flagBúlgaro flagTcheco flagCroata flagDinamarquês flag
Finlandês flagHindu flagPolonês flagRomeno flagSueco flagGrego flagNorueguês flag 
By N2H
Dolet 96 de descuento en alojamiento DreamHost!
Utilice el PROMO "CODE" inercia. LAMP con 20GB de espacio y 1 TB de transferencia.

Artículos Relacionados

  • No hay publicaciones relacionadas

Categorías