jQueryカスタムラジオとチェックボックス

いつものように、それはすべて、貧弱な検索の欠如、または私が必要とするものの不完全な実装のために始まりました。

そして、私が必要としていたのは、レイアウト中に日常業務で使用できるカスタムラジオとチェックボックスでした。 ただし、IE6 +およびすべての主要なブラウザーで動作するはずです。

また、要素はラベルをクリックして応答する必要がありました。 そして、それらのうちのもう1つは、さまざまなスタイルで必要な数だけページ1に配置できます（そうです、そのようなメゴデザインが起こることもあります）。

そのため、JSでのチェックボックスとラジオバトンの実装で出会ったすべてを最大限に活用することにしました。 そして、私のニーズを満たす独自のjQueryプラグインを作成します。



要素のタイプは、4つの状態を持つスプライトを使用して実装されました。

-非アクティブビュー。

-非アクティブなマウスが押されました。

-アクティブ;

-アクティブなマウスが押されています。





なぜなら スプライトを使用する必要がある場合は、スプライト内の画像の垂直方向の混合を知る必要があります。 これを行うには、要素の高さをプラグインに渡し、それらが同じ高さのスペースを占めるようにスプライトに配置します。

また、プラグインが呼び出されたときに、要素をスタイルできるクラスが渡されることも必要です。

最初の実装後、プラグインが正しく機能しない条件がさらに2つ必要であることに気付きました。 これは、要素の状態（アクティブ/非アクティブ）を変更する機能と、動的に作成された要素の様式です。



まず、プラグインコード全体を提供します。

(function ($) { $.CustomData = { elements:$() }; $.fn.extend({ Custom:function (options) { var elements = this; $.CustomData.elements = $.CustomData.elements.add(elements); /*  */ var defaults = { customStyleClass:"checkbox", customHeight:"16" }; /*       */ options = $.extend(defaults, options); /*       */ var pushed = function () { var element = $(this).children('input'); if (element.is(':checked')) { /*  */ $(this).css('backgroundPosition', "0px -" + options.customHeight * 3 + "px"); } else { $(this).css('backgroundPosition', "0px -" + options.customHeight + "px"); } }; /*     ,    (radio)*/ var check = function () { var element = $(this).children('input'); if (element.is(':checked') && element.attr('type') === 'checkbox') {/* */ $(this).css('backgroundPosition', '0px 0px'); $(this).children('input').attr('checked', false).change(); /*         */ } else { if (element.attr('type') === 'checkbox') {/* */ $(this).css('backgroundPosition', "0px -" + options.customHeight * 2 + "px"); } else { /**/ $(this).css('backgroundPosition', "0px -" + options.customHeight * 2 + "px"); $('input[name=' + element.attr('name') + ']').not(element).parent().css('backgroundPosition', '0px 0px'); } $(this).children('input').attr('checked', 'checked').change(); } }; /*        */ var update = function () { $.CustomData.elements.each(function () { /*       */ if ($(this).is(':checked')) { $(this).parent().css('backgroundPosition', "0px -" + $(this).attr('data-height') * 2 + "px"); } else { $(this).parent().css('backgroundPosition', "0px 0px"); } }); }; /*    disabled/enabled */ var refresh = function () { if (!$(this).prop('disabled')) { $(this).parent().mousedown(pushed); $(this).parent().mouseup(check); $(this).parent().removeClass('disabled'); } else { $(this).parent().addClass('disabled'); $(this).parent().unbind('mousedown', pushed); $(this).parent().unbind('mouseup', check); } }; return this.each(function () { if ($(this).attr('data-init') != '1') { $(this).attr('data-init', '1'); $(this).attr('data-height', options.customHeight); /*  <span></span>*/ $(this).wrap('<span/>'); /*     */ var span = $(this).parent().addClass(options.customStyleClass); if ($(this).is(':checked') === true) { /*    */ span.css('backgroundPosition', "0px -" + (options.customHeight * 2) + "px"); } /*              */ $(this).bind('change', update); $(this).bind('custom.refresh', refresh); if (!$(this).prop('disabled')) { /*   span*/ span.mousedown(pushed); span.mouseup(check); } else { /*    */ span.addClass('disabled'); } } }); } }); })(jQuery);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグイン構造の実装から始めました。次のようになります。

 (function ($) { $.fn.extend({ Custom:function (options) { /*  */ var defaults = { customStyleClass:"checkbox", customHeight:"16" }; /*       */ options = $.extend(defaults, options); }; return this.each(function () { }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のような説明が印刷されています-「典型的なjQueryアドオンの作成に使用」。



最後から始めましょう：

 return this.each(function () { if ($(this).attr('data-init') != '1') { $(this).attr('data-init', '1'); $(this).attr('data-height', options.customHeight); /*  <span></span>*/ $(this).wrap('<span/>'); /*     */ var span = $(this).parent().addClass(options.customStyleClass); if ($(this).is(':checked') === true) { /*    */ span.css('backgroundPosition', "0px -" + (options.customHeight * 2) + "px"); } /*              */ $(this).bind('change', update); $(this).bind('custom.refresh', refresh); if (!$(this).prop('disabled')) { /*   span*/ span.mousedown(pushed); span.mouseup(check); } else { /*    */ span.addClass('disabled'); } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

原則として、すべてがコードへのコメントで説明されていますが、追加できるのは

 $(this).attr('data-init', '1');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素が既に様式化されているかどうかを知るために使用します（もちろん、親を通して調べることもできますが、そのようなメソッドをテストすることにしました）。

 $(this).attr('data-height', options.customHeight);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで要素の高さを保存します さまざまなスプライトを持つ要素をいくつでも持つことができます。

 $(this).bind('custom.refresh', refresh);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、カスタムイベント「custom.refresh」に関連付けられている興味深いメソッドは、更新関数の呼び出しです。

たとえば、要素の状態が非アクティブに変更された場合、要素の外観を変更し、すべてのイベントを削除する必要があります。

例：

 $('#radio3').removeAttr('disabled').trigger('custom.refresh');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素が非アクティブになり、イベント「custom.refresh」が発生したため、リフレッシュ機能が実行されました。



このパートで説明する機能は次のとおりです。

 Custom:function (options) {...};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

機能プッシュ -アクティブビューと非アクティブビューのスプライトにオフセットを設定します。これは非常に簡単です。

 var pushed = function () { var element = $(this).children('input'); if (element.is(':checked')) { /*  */ $(this).css('backgroundPosition', "0px -" + options.customHeight * 3 + "px"); } else { $(this).css('backgroundPosition', "0px -" + options.customHeight + "px"); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

機能チェック：

 /*     ,     (radio)*/ var check = function () { var element = $(this).children('input'); if (element.is(':checked') && element.attr('type') === 'checkbox') {/* */ $(this).css('backgroundPosition', '0px 0px'); $(this).children('input').attr('checked', false).change(); /*         */ } else { if (element.attr('type') === 'checkbox') {/* */ $(this).css('backgroundPosition', "0px -" + options.customHeight * 2 + "px"); } else { /**/ $(this).css('backgroundPosition', "0px -" + options.customHeight * 2 + "px"); $('input[name=' + element.attr('name') + ']').not(element).parent().css('backgroundPosition', '0px 0px'); } $(this).children('input').attr('checked', 'checked').change(); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、コード内のコメントからすべてが明確になっています。これについてのみ追加します

 $(this).children('input').attr('checked', false).change();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.attr（ 'checked'、false）.change（）-change（）イベントが発生し、checked属性が変更される必要があります。 stackoverflowでこれを探す必要がありました。



更新機能：

 /*     */ var update = function () { $.CustomData.elements.each(function () { /*       */ if ($(this).is(':checked')) { $(this).parent().css('backgroundPosition', "0px -" + $(this).attr('data-height') * 2 + "px"); } else { $(this).parent().css('backgroundPosition', "0px 0px"); } }); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインが呼び出されるすべての要素（$ .CustomData.elements）を保存できる変数なしでは機能しませんでした。 上記の$ .fn.extend（{...}）

 $.CustomData = { elements:$() };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プラグインが呼び出されると、要素のセットがプラグインに配置されます

 var elements = this; $.CustomData.elements = $.CustomData.elements.add(elements);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、 リフレッシュ要素が状態を変更するときに必要な最後の機能：

 /*    disabled/enabled */ var refresh = function () { if (!$(this).prop('disabled')) { $(this).parent().mousedown(pushed); $(this).parent().mouseup(check); $(this).parent().removeClass('disabled'); } else { $(this).parent().addClass('disabled'); $(this).parent().unbind('mousedown', pushed); $(this).parent().unbind('mouseup', check); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

理解するのは非常に簡単です。ハンドラーを削除するか、再度追加して「無効」クラスを追加/削除します。これにより、非アクティブ状態の要素の外観を設定できます（通常は透明度が変更されます）。



無線バトンのタイプの説明を含むクラスの例：

 .radio { display:block; height: 25px; width: 19px; overflow:hidden; background: url("radio.png") no-repeat 0 0 transparent; position:relative; } .radio.disabled{ opacity:0.5; filter:Alpha(opacity="50"); } .radio input{ position:absolute; right:-400px; top:0px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

呼び出しプラグイン：

 $("input[type='radio']").Custom({ customStyleClass:'radio', customHeight:'25' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これが私のような他の人が私の最初のjQueryプラグインを書くのに役立つことを願っています。



これが、必要なプラグインの貧弱な検索について伝えたかったことのすべてです。 jQueryの学習とプラグインの作成に協力してくれた善人のAndrei、およびこのプラグインの開発者http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/に感謝します。必要なチップを使って自分で書く機会を与えてくれました。 私はプラチナの仕事を改善するためのコメントと批判に喜んでいるでしょう。



プラグインはこちらhttps://github.com/n0r8/Custom-radio-checkbox