jQuery - Plugins

Um plug-in é um pedaço de código escrito em um arquivo JavaScript padrão. Esses arquivos fornecem métodos jQuery úteis que podem ser usados junto com métodos de biblioteca jQuery.

Existem muitos plug-ins jQuery disponíveis que você pode baixar do link do repositório em https://jquery.com/plugins.

Como usar Plugins

Para tornar os métodos de um plug-in disponíveis para nós, incluímos um arquivo de plug-in muito semelhante ao arquivo de biblioteca jQuery no <head> do documento.

Devemos garantir que ele apareça após o arquivo-fonte jQuery principal e antes de nosso código JavaScript personalizado.

O exemplo a seguir mostra como incluir jquery.plug-in.js plugin -

<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>

Como desenvolver um plug-in

É muito simples escrever seu próprio plug-in. A seguir está a sintaxe para criar um método -

jQuery.fn.methodName = methodDefinition;

Aqui, methodNameM é o nome do novo método e methodDefinition é a definição de método real.

A diretriz recomendada pela equipe jQuery é a seguinte -

Quaisquer métodos ou funções anexadas devem ter um ponto e vírgula (;) no final.
Seu método deve retornar o objeto jQuery, a menos que explicitamente indicado de outra forma.
Você deve usar this.each para iterar sobre o conjunto atual de elementos correspondentes - ele produz código limpo e compatível dessa maneira.
Prefixe o nome do arquivo com jquery, depois disso com o nome do plugin e conclua com .js.
Sempre anexe o plugin ao jQuery diretamente em vez de $, para que os usuários possam usar um alias personalizado por meio do método noConflict ().

Por exemplo, se escrevermos um plugin que queremos nomear debug , nosso nome de arquivo JavaScript para este plugin é -

jquery.debug.js

O uso do jquery. prefix elimina qualquer possível conflito de nomes com arquivos destinados ao uso com outras bibliotecas.

Exemplo

A seguir está um pequeno plug-in para ter um método de aviso para fins de depuração. Mantenha este código no arquivo jquery.debug.js -

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

Aqui está o exemplo que mostra o uso do método warning (). Assumindo que colocamos o arquivo jquery.debug.js no mesmo diretório da 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>

Isso o alertaria com o seguinte resultado -

This is paragraph
This is division

Next page ↱