jQuery-プラグイン

プラグインは、標準のJavaScriptファイルで記述されたコードです。これらのファイルは、jQueryライブラリメソッドとともに使用できる便利なjQueryメソッドを提供します。

プラグインの使用方法

プラグインのメソッドを利用できるようにするために、ドキュメントの<head>にjQueryライブラリファイルに非常に類似したプラグインファイルを含めます。

メインのjQueryソースファイルの後、カスタムJavaScriptコードの前に表示されるようにする必要があります。

次の例は、 jquery.plug-in.js プラグインを含める方法を示しています-

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

プラグインを開発する方法

これは、独自のプラグインを書くのは非常に簡単です。以下は、メソッドを作成するための構文です-

jQuery.fn.methodName = methodDefinition;

ここで、_methodNameM_は新しいメソッドの名前であり、_methodDefinition_は実際のメソッド定義です。

jQueryチームが推奨するガイドラインは次のとおりです-

接続するメソッドまたは関数には、最後にセミコロン（;）が必要です。
特に明記しない限り、メソッドはjQueryオブジェクトを返す必要があります。
this.eachを使用して、一致した要素の現在のセットを反復処理する必要があります。そうすることで、クリーンで互換性のあるコードが生成されます。
ファイル名の前にjqueryを付け、その後ろにプラグインの名前を付けて、.jsで終了します。
ユーザーはnoConflict（）メソッドを介してカスタムエイリアスを使用できるように、常に$ではなくjQueryに直接プラグインを添付してください。

たとえば、_debug_という名前のプラグインを作成する場合、このプラグインのJavaScriptファイル名は-

jquery.debug.js

jquery。*プレフィックスを使用すると、他のライブラリでの使用を目的としたファイルとの名前の衝突を排除できます。

例

以下はデバッグ目的のための警告方法を持つための小さなプラグインです。このコードを_jquery.debug.js_ファイルに保管してください-

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

warning（）メソッドの使用方法を示す例は次のとおりです。 _jquery.debug.js_ファイルを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>

これは、次の結果であなたに警告します-

This is paragraph
This is division

Jquery-plugins

目次

jQuery-プラグイン

プラグインの使用方法

プラグインを開発する方法

例