オリジナルjQuery プラグインの作り方 2/2

[`brogumura` not found]

<< 前回の記事 次の記事(実践編Sliderプラグイン)>>

jQueryのプラグインを自作する方法を前回に引き続きご紹介します。

*ここで制作したプラグインのサンプルはGitHubで見ることが出来ます。

今回は、前回作成したプラグインにオプションを指定する機能を追加してみたいと思います。

前回の使い方は、HTMLのhead内に以下のように設定すると、任意のタグ内の文字がすべて中央揃えになるというものでしたが、今回はオプションを設定しないデフォルトでは中央揃え、オプションを追加すると右揃え、左揃えに出来るものを作りたいと思います。

まずはプラグイン名がcenterではおかしいので、textAlignとします。

*使用イメージ

プラグイン名をtextAlignとしたので今回のファイル名は、jquery.textAlign-1.0.jsとしてみましょう。

まず、二行目の引数をfunctionにoptionを指定します。ここにオプションの連想配列のオブジェクト、上の設定例の場合、{align:”right”}が渡されます。

jquery.textAlign-1.0.js

ですので、今まで渡されたオブジェクトの値を三行目のreturn this.css('text-align','center');でcenterと固定値を設定したところを、以下のように引数のオブジェクトの値を入れてあげます。

jquery.textAlign-1.0.js

でもちょっと待って下さい、これではオプションを設定しない場合、エラーになってしまいます。また、ユーザーがオプションに渡すオブジェクトでスペルミスをしていた場合も下記のようにエラーになってしまいます。

これはあまりよいプラグラムとはいえません。

そこで、引数がunderfindの時はデフォルトの値を、そうでない場合は引数の値を設定するというように変えてみましょう。

まず、デフォルトの値を持ったオブジェクト、settingを作成します。

次に、以下のようにjQueryのextendメソッドを用いてデフォルトの値を引数の値でエクステンドしてあげましょう。

$.extend()は第一引数の連想配列のオブジェクトを第二匹数以降の値で上書きしてくれます。そして第一引数に該当のキーがない場合は追加されます。

例えば・・

ただし、これでは引数がない場合エラーに成ってしまいますので、引数がunderfindの時は第二引数に空のオブジェクとを渡したいと思います。それには、Javascript独特の書き方をします。

Javascriptでは論理演算子 || の左辺がfalseの時、右辺が返されます。

Javascriptではunderfindはfalseですので、option || {} とした場合、左辺がfalseになりますので、右辺の{}が返されます。

これを利用して以下のように修正したのが最終完成形です。

お疲れ様でした。たった7行のコードを解説するのにこれだけかかってしまいました(汗)

次回はもう少し実用的なプラグインの作成をしてみましょう

*ここで制作したプラグインのサンプルはGitHubで見ることが出来ます。

<< 前回の記事 次の記事(実践編Sliderプラグイン)>>

Please follow and like us:
20

andy

プログラマ、フロントエンドエンジニアです。 1988年生まれ Java(JavaEE,JavaFX,Android),Javascript,TypeScript,Angularjs,Backbone.jsなど使っています フリーランスです。 ご相談お待ちしております。 GitHub github.com/kotaroyamame *イラスト制作moom

オリジナルjQuery プラグインの作り方 2/2」への4件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*