jQuery - Complementos

Un complemento es un fragmento de código escrito en un archivo JavaScript estándar. Estos archivos proporcionan métodos jQuery útiles que se pueden utilizar junto con los métodos de la biblioteca jQuery.

Hay muchos complementos de jQuery disponibles que puede descargar desde el enlace del repositorio en https://jquery.com/plugins.

Cómo usar complementos

Para que los métodos de un complemento estén disponibles para nosotros, incluimos un archivo de complemento muy similar al archivo de la biblioteca jQuery en el <head> del documento.

Debemos asegurarnos de que aparezca después del archivo fuente principal de jQuery y antes de nuestro código JavaScript personalizado.

El siguiente ejemplo muestra cómo incluir jquery.plug-in.js complemento -

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script src = "jquery.plug-in.js" type = "text/javascript"></script>
      <script src = "custom.js" type = "text/javascript"></script>
      
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            .......your custom code.....
         });
      </script>
   </head>
	
   <body>
      .............................
   </body>
</html>

Cómo desarrollar un complemento

Es muy sencillo escribir su propio complemento. A continuación se muestra la sintaxis para crear un método:

jQuery.fn.methodName = methodDefinition;

Aquí methodNameM es el nombre del nuevo método y methodDefinition es la definición real del método.

La pauta recomendada por el equipo de jQuery es la siguiente:

Cualquier método o función que adjunte debe tener un punto y coma (;) al final.
Su método debe devolver el objeto jQuery, a menos que se indique explícitamente lo contrario.
Debe usar this.each para iterar sobre el conjunto actual de elementos coincidentes; de esa manera produce código limpio y compatible.
Prefije el nombre del archivo con jquery, siga con el nombre del complemento y concluya con .js.
Adjunte siempre el complemento a jQuery directamente en lugar de $, para que los usuarios puedan usar un alias personalizado a través del método noConflict ().

Por ejemplo, si escribimos un complemento al que queremos llamar depuración , nuestro nombre de archivo JavaScript para este complemento es:

jquery.debug.js

El uso de la jquery. prefix elimina cualquier posible colisión de nombres con archivos destinados a ser utilizados con otras bibliotecas.

Ejemplo

A continuación se muestra un pequeño complemento para tener un método de advertencia con fines de depuración. Mantenga este código en el archivo jquery.debug.js -

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

Aquí está el ejemplo que muestra el uso del método warning (). Suponiendo que colocamos el archivo jquery.debug.js en el mismo directorio de la página html.

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script src = "jquery.debug.js" type = "text/javascript">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script>	
   </head>
	
   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>
</html>

Esto lo alertaría con el siguiente resultado:

This is paragraph
This is division

Next page ↱