関数を別ファイルとして作成したものをhtml内のjsに読み込む
この場合headに作成したjsファイルへのリンクを作成することを忘れないように
この場合headに作成したjsファイルへのリンクを作成することを忘れないように
DIVでtestClassです
DIVでnoTestClassです
PでtestClassです
jQueryのメソッドチェーンのつなぎ方
http://allabout.co.jp/gm/gc/24166/2/
このページでは、 前ページのようにライブラリ側へ 直接書き込まなくても、自作関数をjQueryへ組み込める方法を試します。
実は、jQueryには、自作の関数やオブジェクトをjQueryへ取り込んで利用するための仕組みが用意されています。 ここでは、まず、その簡単な使い方から紹介します。
jQueryプラグイン
jQueryには、プラグインといって、jQuery自身へユーザーが機能を追加できる仕組みが用意されています。
jQueryサイトのPluginsページをみると、すでに多くのプラグインが、ユーザーによって 登録されていることがわかります。
また、Authoring には、その プラグインを作成する際のポイントが書かれています。
上記ページには、まず、jQueryオブジェクト(または$ショートカット)配下の jQuery.fnへ jQuery.fn.test などのように追加する方法と、jQuery(または$)直下へ直接 jQuery.test のように追加する方法とが書かれています。
今回は、このうち、jQuery.fnへの代入によってメソッドチェーンをつなぐプラグインを実現してみます。
さて、それでは、さっそく試してみましょう。 jQuery.fn.sampleというメソッドを作ってみます。
→サンプル
$("#testId").sample()で接続していきなり機能しています。 簡単ですね。
$("#testId")で検索した要素内の文字列をjQueryメソッドtext()で取得し、ダイアログ表示しています。
つまり、jQuery.fn以下へ自作関数を登録するだけで、 前回作った jQueryメソッドとしてメソッドチェーンの中で利用できるようになるということです。
なんと簡単に目標が達成されてしまいました。
さて、それでは、懸案のdrawRedをこの仕組みに当てはめてみます。
→サンプル
できました。 「DIVでtestClassです」だけが赤くなり、成功です。
では、animeteも連結してみましょう。
jQuery.fn.drawRed = function() {
return this.css("color","red");
};
$("DIV.testClass")
.drawRed()
.animate({fontSize: "5em"},1000 );
→サンプル
大きくなりましたね。これで、もう drawRed は jQuery メソッドとして、メソッドチェーンの中で自由に 使うことができるようになりました。
少し簡単すぎて拍子抜けな気もしますが、このシンプルさがjQueryなのです。
自作の関数をプラグインとして作成することで、 jQueryの機能そのものを簡単に拡張することができ、 コードはさらにシンプルに、 再利用も楽になります。
次回は、プラグインを作成する作法といいますか、いくつかのTipsを少し試してみます。
http://allabout.co.jp/gm/gc/24166/2/
このページでは、 前ページのようにライブラリ側へ 直接書き込まなくても、自作関数をjQueryへ組み込める方法を試します。
実は、jQueryには、自作の関数やオブジェクトをjQueryへ取り込んで利用するための仕組みが用意されています。 ここでは、まず、その簡単な使い方から紹介します。
jQueryプラグイン
jQueryには、プラグインといって、jQuery自身へユーザーが機能を追加できる仕組みが用意されています。
jQueryサイトのPluginsページをみると、すでに多くのプラグインが、ユーザーによって 登録されていることがわかります。
また、Authoring には、その プラグインを作成する際のポイントが書かれています。
上記ページには、まず、jQueryオブジェクト(または$ショートカット)配下の jQuery.fnへ jQuery.fn.test などのように追加する方法と、jQuery(または$)直下へ直接 jQuery.test のように追加する方法とが書かれています。
今回は、このうち、jQuery.fnへの代入によってメソッドチェーンをつなぐプラグインを実現してみます。
さて、それでは、さっそく試してみましょう。 jQuery.fn.sampleというメソッドを作ってみます。
id="testId">testIdです
→サンプル
$("#testId").sample()で接続していきなり機能しています。 簡単ですね。
$("#testId")で検索した要素内の文字列をjQueryメソッドtext()で取得し、ダイアログ表示しています。
つまり、jQuery.fn以下へ自作関数を登録するだけで、 前回作った jQueryメソッドとしてメソッドチェーンの中で利用できるようになるということです。
なんと簡単に目標が達成されてしまいました。
さて、それでは、懸案のdrawRedをこの仕組みに当てはめてみます。
DIVでtestClassです
DIVでnoTestClassです
P
でtestClassです→サンプル
できました。 「DIVでtestClassです」だけが赤くなり、成功です。
では、animeteも連結してみましょう。
jQuery.fn.drawRed = function() {
return this.css("color","red");
};
$("DIV.testClass")
.drawRed()
.animate({fontSize: "5em"},1000 );
→サンプル
大きくなりましたね。これで、もう drawRed は jQuery メソッドとして、メソッドチェーンの中で自由に 使うことができるようになりました。
少し簡単すぎて拍子抜けな気もしますが、このシンプルさがjQueryなのです。
自作の関数をプラグインとして作成することで、 jQueryの機能そのものを簡単に拡張することができ、 コードはさらにシンプルに、 再利用も楽になります。
次回は、プラグインを作成する作法といいますか、いくつかのTipsを少し試してみます。
http://www.webopixel.net/javascript/392.html
自作のjQueryスクリプトをプラグイン化しよう
ツイート
10
このページは10回共有されました。これらのツイートを見る。
2011-06-13 
javascript 
jQuery, Plugin
自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。 そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。
外部ファイル化
たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。
jQuery script
まずは外部ファイル化しましょう。
jQueryプラグインは「jquery.プラグイン名.js」というファイル名にするのが基本なようです。
ここでは「jquery.hoge.js」としました。
上記のコードをそのまま外部ファイルにしただけだと、読み込むだけで実行されてしまうので、jQuery.fn拡張しメソッドで実行できるようにします。
jquery.hoge.js
先頭に「;」があるのは他のプラグインと併用した場合に、最後に「;」を付けてないプラグインがまれにあるそうで、それが原因でのエラーを回避できます。
「$.fn.」の後に続くのがメソッド名です。これで「jquery.hoge.js」を読み込み「hoge」を呼び出せばこのスクリプトが実行されます。
html
柔軟性のあるスクリプト
「$(‘#hide-btn’).hoge();」としていますが、実際は何を指定しても「#hide-btn」をクリックしないと実行されないのであまり柔軟性がよろしくないですね。 html側で動作するボタンを指定するにはスクリプトの「$(‘#hide-btn’)」を「$(this)」に変更します。
jquery.hoge.js
こうすることで「$(‘#hide-btn2′).hoge();」と指定すれば、「#hide-btn2」から実行できるようになります。
オプションを変更できるようにする
サンプルのスクリプトは「fadeOut(1000)」とフェードアウトの速度を直接指定しています。 こういった設定はhtml側で変更できた方がいいですよね。 たとえばhtmlで「fadeSpeed」というオプションを設定します。
html
この値を使用するには下記のようになります。
jquery.hoge.js
しかし受け取った値をそのまま使用すると、必ずオプションを設定しないといけないので、使用側としてはめんどくさいですね。
できればオプションを記述しないでも動作して、さらにオプションを指定することができるようにしたいものです。
そのために、デフォルトオプションというのを作成します。
で、そのデフォルトオプションと指定されたオプションを「extend」でマージするということを行います。
jquery.hoge.js
こうすることで何も指定がなかった場合「$.fn.hoge.defaults」がデフォルトの値として使用されることになります。
複数のオプションを変更できるようにする
複数のオプションを設定するには「,」で区切るだけです。 「#view」を非表示していましたが、これも変更できるようにしてみましょう。
html
jquery.hoge.js
これくらい単純なスクリプトだとあまり意味ないですが、これを機に積極的にプラグイン化していきたいなとか。
ということで以上です。
自作のjQueryスクリプトをプラグイン化しよう
ツイート
10
このページは10回共有されました。これらのツイートを見る。
| いいね！ | 8 |
2011-06-13 javascript jQuery, Plugin自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。 そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。
たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。
jQuery script
1 | $( |
2 | $( |
3 | $( |
4 | }); |
5 | }); |
上記のコードをそのまま外部ファイルにしただけだと、読み込むだけで実行されてしまうので、jQuery.fn拡張しメソッドで実行できるようにします。
jquery.hoge.js
1 | ;( |
2 | $.fn.hoge = |
3 | $( |
4 | $( |
5 | }); |
6 | } |
7 | })(jQuery); |
html
1 | < |
2 | < |
3 | < |
4 | $(function() { |
5 | $('#hide-btn').hoge(); |
6 | }); |
7 |
「$(‘#hide-btn’).hoge();」としていますが、実際は何を指定しても「#hide-btn」をクリックしないと実行されないのであまり柔軟性がよろしくないですね。 html側で動作するボタンを指定するにはスクリプトの「$(‘#hide-btn’)」を「$(this)」に変更します。
jquery.hoge.js
1 | $.fn.hoge = |
2 | $( |
3 | $( |
4 | }); |
5 | } |
オプションを変更できるようにする
サンプルのスクリプトは「fadeOut(1000)」とフェードアウトの速度を直接指定しています。 こういった設定はhtml側で変更できた方がいいですよね。 たとえばhtmlで「fadeSpeed」というオプションを設定します。
html
1 | $( |
2 | $( |
3 | fadeSpeed: 5000 |
4 | }); |
5 | }); |
jquery.hoge.js
1 | $.fn.hoge = |
2 | alert(options.fadeSpeed); |
3 | }; |
jquery.hoge.js
1 | $.fn.hoge = |
2 |
|
3 | $( |
4 | $( |
5 | }); |
6 | }; |
7 | $.fn.hoge.defaults = { |
8 | fadeSpeed: 1000 |
9 | }; |
複数のオプションを変更できるようにする
複数のオプションを設定するには「,」で区切るだけです。 「#view」を非表示していましたが、これも変更できるようにしてみましょう。
html
1 | $( |
2 | $( |
3 | fadeSpeed: 5000, |
4 | hideEle: |
5 | }); |
6 | }); |
01 | $.fn.hoge = |
02 |
|
03 | $( |
04 | $(opts.hideEle).fadeOut(opts.fadeSpeed); |
05 | }); |
06 | }; |
07 | $.fn.hoge.defaults = { |
08 | fadeSpeed: 1000, |
09 | hideEle: |
10 | }; |