Share
Es duro. Lees tutorial tras tutorial, pero todos asumen que sabes más de lo que realmente sabes. Cuando terminas, te sientes más confundido de lo que inicialmente estabas. ¿Por qué creó un objeto vacío? ¿Qué significa cuando pasas "opciones" como parámetro? ¿Qué hacen realmente las "configuraciones predeterminadas"??
Nunca temas; Voy a mostrarte exactamente cómo crear tu propio complemento de "información sobre herramientas", a petición de uno de nuestros fieles lectores..
Podría ayudar pensar en los complementos de la misma manera que lo haría con las funciones. ¿Alguna vez te has encontrado repitiendo los mismos procedimientos?
para sitio tras sitio? Tal vez haya creado su propio sistema de pestañas que le gusta usar. En lugar de escribir el mismo código de tiempo y
una vez más, ¿no sería más fácil si pudiéramos convertir su bloque de código largo en una sola línea? Eso es esencialmente lo que un plugin hace por nosotros..
Permite la reutilización, que es de suma importancia, si desea mantener su salario por hora alto!
Cree un nuevo proyecto en su editor de código favorito y pegue el siguiente html.
Todavía no puedes crear un complemento jQuery? El punto de uso de Lorem Ipsum es que tiene una distribución más o menos normal de letras, en lugar de usar 'Contenido aquí, contenido aquí', lo que parece un inglés legible. Muchos paquetes de publicación de escritorio y editores de páginas web ahora usan Lorem Ipsum como su modelo de texto predeterminado, y una búsqueda de 'lorem ipsum' descubrirá muchos sitios web aún en su infancia. Varias versiones han evolucionado a lo largo de los años, a veces por accidente, a veces a propósito (humor inyectado y similares).
Este código es bastante simple; por lo que no requiere demasiado de una visión general.
Por lo general, encuentro que es más fácil compilar mi complemento si primero determino cómo lo llamaré. Considere el siguiente código.
Decidí que quiero que el nombre de mi complemento simplemente se llame "información sobre herramientas". También he determinado que quiero poder pasar en unos pocos
Parámetros para personalizar mi tooltip ligeramente. Esto será puramente opcional para el usuario sin embargo. Si lo prefiere, él o ella podría simplemente escribir:
En este caso, el defecto las opciones serán utilizadas.
Así que ahora que sabemos cómo se llamará el complemento, ¡sigamos adelante y hagámoslo! Cree un nuevo archivo en su proyecto y llámelo "jQuery.tooltip.js". Hay ciertas convenciones de nomenclatura al crear un complemento que potencialmente serán utilizados por otros. Comenzamos escribiendo 'jQuery', seguido del nombre de nuestro complemento. Sin embargo, estoy seguro de que te das cuenta de que miles de personas han creado su propio complemento de información sobre herramientas. Podría determinar que es necesario prefaciar "información sobre herramientas" con una cadena única; tal vez sus iniciales. En cualquier caso, no importa demasiado. Eres libre de nombrar tu plugin como desees.
(función ($) ... código) (jQuery);
Primero debemos asegurarnos de que el símbolo "$" no nos meta en ningún problema. ¿Y si también estuviéramos usando otras bibliotecas de Javascript en nuestra aplicación? ¿Alguna vez has pensado en eso? En tales casos, tendríamos que cambiar cada "$" en nuestro documento a "jQuery". El único problema es que esta es una solución bastante descuidada. En su lugar, vamos a crear una función anónima que invoque a uno mismo y pase "$" como un alias. De esa manera, somos libres de usar "$" todo lo que queramos sin tener que preocuparnos por ningún conflicto.
$ .fn.tooltip = function (opciones)
Dentro de nuestro envoltorio, debemos declarar nuestro nuevo complemento y hacerlo igual a la siguiente función. Podemos realizar esta tarea escribiendo jQuery.fn (abreviatura de prototipo).el nombre de nuestro plugin.
¿Recuerdas cuando especifiqué que el usuario debería poder hacer pequeñas modificaciones a la información sobre herramientas? Esas modificaciones serán almacenadas dentro del parámetro "opciones".
var defaults = background: '# e3e3e3', color: 'black', redondeado: false,
Es probable que el usuario no pueda especificar ninguna opción. Por lo tanto, vamos a establecer nuestras propias opciones "predeterminadas". Debido a que este es un tutorial para principiantes, no haremos demasiado aquí. Sobre todo, esto es demostrar lo que es posible. Estamos permitiendo que el usuario seleccione un color de fondo, un color y si la información sobre herramientas está redondeada o no.
Más adelante en nuestro código, cuando deseamos acceder a estos valores, simplemente podemos escribir: defaults.rounded.
Entonces, ¿cómo podemos determinar si el usuario agrega sus propias opciones? La respuesta es que debemos combinar 'valores predeterminados' con 'opciones'.
settings = $ .extend (, valores predeterminados, opciones);
Hemos creado una nueva variable llamada "configuración", y le hemos dicho a jQuery que combine 'valores predeterminados' y 'opciones', y que coloque los resultados en un nuevo objeto. Al fusionarse, las "opciones" seleccionadas por el usuario tendrán prioridad sobre los valores predeterminados.
Quizás se pregunte por qué no he agregado "var" antes de la configuración. Técnicamente, no es obligatorio, aunque se considera la mejor práctica. Si se desplaza un poco hacia arriba, verá que después de nuestro objeto predeterminado, agregué una coma. Al hacerlo, podemos continuar creando más variables sin la necesidad de 'var' cada vez. Por ejemplo…
var joe = ; var es = ; var bueno = ;
puede llegar a ser…
var joe = , es = , bueno = ;
this.each (function () var $ this = $ (this); var title = this.title;
Es importante tener en cuenta que el conjunto envuelto que el usuario pasa a este complemento puede contener muchos elementos, no solo uno. Debemos asegurarnos de que usamos un método para cada declaración (o el método "cada" de jQuery) para recorrer el código.
Comenzamos nuestra nueva función almacenando $ (esto). No solo nos ahorrará algunos caracteres, sino que también acelerará las cosas, aunque sea un poco. No es obligatorio, pero se considera una buena práctica. Mucha gente pregunta: "¿Por qué agrega el signo de dólar frente a su variable?". Hacemos esto para recordarnos que estamos trabajando con el objeto jQuery. Al hacerlo, recuerdo que puedo llamar a cosas como: $ this.click () ;. A continuación, estoy almacenando el valor del atributo de título en una variable llamada "título". Verás por qué debemos hacer esto en un momento..
Accentsconagua
if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (función (e) Es fácil olvidar a qué se refiere esto. Cuando olvide, simplemente regrese a la forma en que llama al método "información sobre herramientas".
$ ('a.tooltip'). tooltip (); Podemos ver aquí que $ se refiere a cada etiqueta de anclaje que tiene una clase de "información sobre herramientas".
Volver al código; si el elemento en el conjunto envuelto es, de hecho, una etiqueta de anclaje, Y su atributo 'título' no está vacío, entonces ejecute algún código. Esto es bastante autoexplicativo. No quiero ejecutar un montón de código si el usuario pasa accidentalmente una imagen. Además, no quiero crear mi cuadro de información sobre herramientas si no hay nada que mostrar!
Dentro de mi declaración "si", estoy configurando el atributo "título" de la etiqueta de anclaje igual a nada. Esto detendrá la carga de herramientas predeterminada del navegador. A continuación, estoy agregando un detector de eventos para cuando $ this, o la etiqueta de anclaje, se desplace el cursor sobre. Cuando lo es, creamos una nueva función y pasamos el objeto de evento como un parámetro. No te preocupes por esto por ahora, te lo explicaré más tarde..
var title = $ this.attr ('title'); PS') .appendTo (' body ') .hide () .text (title) .css (backgroundColor: settings.background, color: settings.color, top: e.pageY + 10, izquierda: e.pageX + 20 ) .fadeIn (350); He creado una variable llamada 'título' y la hice igual a cualquier valor que esté contenido dentro del atributo 'título' de la etiqueta de anclaje. Esto no es realmente necesario, pero me ayuda..
Cuando agregamos etiquetas html a nuestra declaración jQuery, podemos crear un nuevo elemento, en lugar de recuperar uno. Estamos creando una nueva etiqueta div con un id de 'información sobre herramientas'. A continuación, utilizaremos las maravillosas habilidades de cambio de jQuery para realizar un montón de procedimientos con facilidad..
if (defaults.rounded) $ ('# tooltip'). addClass ('rounded'); Por defecto, nuestra opción 'redondeada' está configurada en 'falso'. Sin embargo, si 'defaults.rounded' devuelve true (lo que significa que el usuario agregó este parámetro), debemos agregar una clase de 'redondeado' a nuestro archivo CSS. Vamos a crear ese archivo pronto.
, function () // mouse out $ ('# tooltip'). hide (); ); "Hover" acepta dos funciones: pasar el mouse por encima y el mouse por fuera. Hemos agregado el código apropiado para cuando el usuario se mueve sobre nuestra etiqueta de anclaje seleccionada. Pero, también necesitamos escribir algún código que elimine la información sobre herramientas una vez que el mouse haya dejado la etiqueta de anclaje.
Sería bueno forzar el cuadro de información sobre herramientas para que cambie cuando se mueva el mouse. Vamos a implementar eso rápidamente.
$ this.mousemove (function (e) $ ('# tooltip'). css (top: e.pageY + 10, izquierda: e.pageX + 20);); Cuando el mouse se mueve sobre la etiqueta de anclaje, cree una función y, una vez más, pase el objeto de evento como un parámetro. Encuentra el elemento 'tooltip', y ajusta su CSS. Debes darte cuenta de que es el código exacto que escribimos anteriormente. Simplemente estamos restableciendo estos valores a los nuevos. Ingenioso, eh?
Debemos permitir que el usuario continúe encadenando después de que se llame "información sobre herramientas". Por ejemplo:
$ ('a.tooltip'). tooltip (). css (…) .remove (); Para permitir este encadenamiento, debemos devolver "esto". Justo antes de que cierre la llave, agregue "devuelva esto";.
Acabas de crear con éxito un plugin completamente funcional. No es demasiado avanzado, pero nos permitió revisar algunas características clave. Aquí está el código final.
(función ($) $ .fn.tooltip = función (opciones) var defaults = background: '# e3e3e3', color: 'black', rounded: false, settings = $ .extend (, defaults, opciones); this.each (function () var $ this = $ (this); var title = this.title; if ($ this.is ('a') && $ this.attr ('title')! = ") this.title ="; $ this.hover (function (e) // mouse over $ ('') .appendTo (' body ') .text (title) .hide () .css (backgroundColor: settings.background, color: settings.color, top: e.pageY + 10, izquierda: e.pageX + 20 ) .fadeIn (350); if (settings.rounded) $ ('# tooltip'). addClass ('rounded'); , function () // mouse out $ ('# # tooltip'). remove (); ); $ this.mousemove (function (e) $ ('# tooltip'). css (top: e.pageY + 10, izquierda: e.pageX + 20);); ); // devuelve el objeto jQuery para permitir el encadenamiento. devuelve esto ) (jQuery); 
El último paso es agregar solo un poco de CSS para pretender nuestra información sobre herramientas. Cree un nuevo archivo CSS llamado 'default.css', y pegue lo siguiente en.
#tooltip background: # e3e3e3 url (… /images/search.png) no se repite 5px 50%; borde: 1px sólido #BFBFBF; flotador izquierdo; tamaño de fuente: 12px; ancho máximo: 160 px; Acolchado: 1em 1em 1em 3em; posición: absoluta; . redondeado -moz-border-radius: 3px; -webkit-border-radius: 3px;
Nada demasiado complicado aquí. Estoy haciendo referencia a una imagen de fondo que contiene la lupa estándar de 'búsqueda'. Le invitamos a descargar el código fuente para utilizarlo. Además, he agregado un poco de relleno, un ancho máximo y un tamaño de fuente. La mayor parte de esto se reduce a la preferencia. Eres libre de editarlo como quieras..
La única propiedad vital es "posición: absoluta". Anteriormente, establecimos los valores "top" y "left" con jQuery. ¡Para que esa posición tenga efecto, debemos establecer la posición en absoluta! Esto es importante. Si no lo haces, no funcionará..
Para todos aquellos que me han enviado un correo electrónico solicitando este tutorial, espero que haya sido de alguna manera una ayuda. Si no me expliqué lo suficientemente bien, asegúrese de ver el screencast asociado y / o hacer un comentario. Trataré de ayudarte lo mejor que pueda. Hasta la proxima vez…
Si tiene una comprensión sólida de las técnicas presentadas en este tutorial, ¡está listo para seguir adelante! Considere inscribirse en una membresía de Net Plus para ver un tutorial avanzado, de Dan Wellman, que le enseñará cómo crear un complemento jQuery más complicado. También viene con un screencast asociado. Asegúrate de registrarte ahora!
