カテゴリー別アーカイブ: jQuery Plugin

jQueryプラグイン フリップスイッチのバージョンアップ

jQueryプラグイン フリップスイッチ

最初のバージョンでは, <div>タグなど, ブロックレベルのタグにしか適用できなかったのですが, 今回のバージョンからは, チェックボックス, つまり, <input type=”checkbox” />に対しても適用できるようになりました. といっても, 使い方は変わりません.

近い将来, セレクトメニュー (<select>タグ) に対しても適用できるようにする予定です.

jQueryプラグイン作成のテンプレート

jQueryのプラグインといっても, 大きくはクラスメソッド型とインスタンスメソッド型に分類されます.

作成方法としては, クラスメソッド型のほうが簡単なのでまずはそちらのテンプレートから

クラスメソッド型

クラスメソッド型とは, 具体的には, $.ajaxや$.eachなど, DOMに依存しないメソッドのことです.

(function($) {
    $.myplugin = function() {
        // プラグインの処理
    };
})(jQuery);

以上がクラスメソッド型のテンプレートです.

インスタンスメソッド型

インスタンスメソッド型とは, 具体的には, htmlやaddClassなど, DOMに依存するメソッドのことです.

インスタンスメソド型のテンプレートはクラスメソッドよりは少々複雑になります.

(function($) {

    // プラグイン本体
    $.fn.myplugin= function() {
        // プラグインメソッド内のthisは,
        // セレクタのDOMではなく, 
        // セレクタのjQueryオブジェクト
        var self = this;
        // プラグインメソッドのハッシュ
        var methods = {
              // プラグインの初期化処理
             create : function(options) {
                 // オプションをマージ
                 self.fn.myplugin.settings = $.extend(true, {}, self.fn.myplugin.defaults, options);

                  // セレクタで選択した要素が複数ある場合を考慮して,
                  // 初期化処理をイテレーションする
                  // いわゆる, コンポジットパターンを実現するために
                  // 必要な処理
                  // また, jQueryのメソッドと同様に,
                  // メソッドチェーンで記述可能なように, 
                  // (ゲッターでなければ) this参照を返す
                  return self.each(function(index, element) {
                      // プラグインの初期化処理
                  });
             },
             // オプションのゲッター・セッター
            option : function(key, value) {
                 if (value === undefined) {
                     // ゲッター
                     return self.fn.myplugin.settings[key];
                 } else {
                     // セッター
                     self.fn.myplugin.settings[key] = value;
                     return self;
                 }
            }
             // 初期化処理以外のメソッドが必要な場合
             something : function() {
                 // do something ...
             }
        }

        if (String(arguments[0]) in methods) {
            // 初期化以外のメソッド
           methods[String(arguments[0])].apply(this, Array.prototype.slice.call(arguments, 1)); } else if ($.isPlainObject(arguments[0]) || (arguments[0] === undefined)) { //初期化処理 methods.create(arguments[0]); } else { // 引数エラー $.error(); } }; $.fn.myplugin.defaults = { // デフォルトのセッティングのハッシュ }; // プラグインユーザーが指定したオプションとデフォルトのオプションをマージした結果を格納するハッシュ. $.fn.myplugin.settings = {} })(jQuery);

クラスメソッド型 / インスタンスメソッド型共通の重要なポイントは,

  • 名前空間の汚染をできるだけ防ぐためにクロージャを使う
  • クロージャの実引数には, jQueryオブジェクトのエイリアスである$ではなく, jQueryのほうを渡します (noConflictメソッドが実行されてもプラグインを利用可能にするため). ただし, クロージャ内部では, タイプ量を少なく, かつ, jQueryオブジェクトだとわかりやすいように, $で参照します.

jQueryプラグイン フリップスイッチを作成してみた

jQueryのプラグインでフリップスイッチを検索すると, どうしてもjQuery Mobileのフリップスイッチばかりヒットしてしまい….

もしかしたら, 意外とjQueryプラグインとしてのフリップスイッチでないのかな (まあ, jQuery UI Sliderをむりやりフリップスイッチにできなくはないですが…)〜と思ったので自分で作成しました.

jQuery プラグイン フリップスイッチ

フリップスイッチとしては, とりあえず最低限の機能を実装下という感じなので, 今後もバージョンアップ (オプションやイベント, メソッドの追加) していく予定です.

余力があれば, Web Componentsとしても実装したいと思っています (まあ, Web Componentsではすでに誰かが作成してそうですが…).