Clever Geek Handbook

もう一度jQueryプラグインを作成するか、それを実行することについて

こんにちは、％habrauser％！



まえがき


私はプログラマとして働いており、会社の内部のニーズに合わせてプロジェクトを書いています。 プロジェクトは多様で興味深いものに出会います。

最近まで、私がよく知っていたjQuery UIで行った「可愛さ」の多く。 キットには必要なウィジェットなどがほぼすべて含まれており、それを使用することは簡単で便利です。 また、問題が発生した場合でも、質問に対する回答はネットワーク上で簡単に見つけることができます。

そして、デンマーク王国ではすべてではありませんが、1つではないにしても



発行


jQuery UIの素晴らしさにも関わらず、必要なウィジェットが1つだけの状況ではその使用は正当化されないという結論に達しました。

また、大規模プロジェクトで1つのウィジェットのスタイルを変更するだけでも大きな頭痛の種になります。

私は最近、jQuery UIを使用することになっていないプロジェクトの1つを終了しました。 しかし、ブロックの1つに、 スポイラー （クリックするとコンテンツでブロックを開閉するパネル）などのウィジェットを埋め込む必要がありました。 インターネットで解決策を検索したところ、驚いたことに、適切なプラグインが1つも見つかりませんでした。



叙情的な余談


白熱した議論を予想する
適切なプラグインが見つかりませんでした
次のように言いたいです。

Web上でネタバレを作成するためのプラグインは本当にたくさんありますが、

1.それらは完全に未加工であるか、1年以上放棄されています。

2.機能が「トリック」されています。

3.必要な種類のタグの操作方法がわからない。

4.など

JQuery UIには、スポイラーとして使用できるウィジェットもあります。 これはアコーディオンウィジェットです。 しかし、私の意見では、1つのウィジェットのjQuery UIパッケージの最小セットをドラッグすることは愚かです。

さて、プラグインを書くための最後の事実は、書いた後の自尊心を高めることです。



問題の声明


そのため、プラグインを作成するための要望、必要性、および時間があります。

考え直すことなく、Googleを開いて「jQueryのプラグイン」のような検索を入力しました。 最初の結果では、お気に入りのハブに関する記事を見て、 jQueryのプラグインを作成しています。 この記事の著者に感謝します。これは、プラグイン作成の基本原則を習得するのに大いに役立ったからです。

次に、プラグインの要件のリストを作成し始めました。

まず、彼は情報でブロックを隠したり発見したりできなければなりません。

次に、クリック可能なストリップ（ブロック）を生成して、スポイラーを制御できる必要があります（これがなければ、どんな種類のスポイラーができるのか）。

第三に、クリック可能なブロック（完全に成人向け）にテキストを書き込むことができるはずです。

第4に、プラグインが初期化されるときに、初期のオープン/クローズ状態を制御する機能が必要です。

さて、おいしいために、それをオフにする機能を備えたオープニング/クロージングアニメーションにしてみましょう。



はじめに


基礎は、 Rafael habrayuzerのトピックからのコードブロックです。

プラグインファイルを作成し、jquery.bestSpoiler.js（自尊心を高めるために+5）という名前を付けて、空白を入れます。 



(function ($) { var methods = { init: function (options) { settings = $.extend({}, options); return this.each(function () { }); $.fn.spoiler = function (method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('   ' + method + '    jQuery.spoiler'); } }; })(jQuery);




return this.each(function () { });



行に注意してくださいreturn this.each(function () { });



。 プラグインの初期化中に指定されたセレクターに対応するブロックごとにプラグインを初期化する必要があることを示します。



ワークの準備ができました。 これまでのところ、これは将来のプラグインの骨組みです。 したがって、筋肉やその他の成分で計量を開始します。

プラグインの要件は、タスクに応じて割り当てるパラメーターを示していました。

プラグインのパラメーターをいくつか追加し、次の行を追加します。 



 init: function (options) { settings = $.extend({ //   ,      .       "" text: '', // ,    .      collapsed: true, // .  ,      /  animationTimeout: 1000 }, options);




このブロックでは、プラグインのパラメーターを決定しました。これは、タスクとプラグインの使用場所に応じて変更できます。

コード内のコメントからすべてが明確になっていることを望んでいるので、先に進みましょう。 プラグインの主なパラメーターを決定しました。今度は、プラグインに魔法をかける時間を取ります。 しかし、最初に、小さな余談。

プラグインに必要なすべてのブロックをプログラマーに描画させるというアイデアは利己的です。 これはもちろんプラグインの作成を容易にしますが、その使用は不便です。 したがって、プラグインロジックの作業を開始する前に、いくつかのテストテストを考えて実施する必要がありました。 その結果、スポイラーのメインコンテナー, . , , ... , . , .

return this.each(function () {}); :



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, .











する要素になるという結論に達しました, . , , ... , . , .

return this.each(function () {}); :



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, .











, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, . 







 ,      .         ,   ,  ...   ,           . ,   . 
      

        
        
        
      

         return this.each(function () {});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     : 
      

        
        
        
      

     
      

        
        
        
      

      //     var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; //   data     $(this).data('hasSpoiler',true); //       $(this).prepend(spoilerControl); //   $(this).data('defaultHeight', $(this).height()); //   \ $(this).data('collapsed',settings['collapsed']); //    $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); //     ,     true if ($(this).data('collapsed') == true) { //       $(this).css('height', $(Control).css('height')); //     $(Control).addClass('plus'); } else { //       $(this).css('height',$(this).data('defaultHeight')); //     $(this).addClass('minus'); } //         $(Control).click(function () { var spoiler = $(this).parent(); var animation; //      \ if($(spoiler).data('currentAnimation')!=undefined){ // ,   $(spoiler).data('currentAnimation').stop(); } //    if ($(spoiler).data('collapsed') != true) { //       $(this).removeClass('minus'); $(this).addClass('plus'); //       animation   animation=$(spoiler).animate({ //       height: $(this).css('height') }, //   settings['animationTimeout'], //     animation, ,    function(){ $(spoiler).data('currentAnimation',undefined) }); //    "" $(spoiler).data('collapsed',true); } else { //       $(this).removeClass('plus'); $(this).addClass('minus'); //       animation   animation=$(spoiler).animate({ //       height: $(spoiler).data('defaultHeight') }, //   settings['animationTimeout'], //     animation, ,    function(){ $(spoiler).data('currentAnimation',undefined) }); //    "" $(spoiler).data('collapsed',false); } //    data ,       $(spoiler).data('currentAnimation',animation); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

        , ,   .    ,        ,             .       ,   ,       . 
      

        
        
        
      

     
      

        
        
        
      

          .          . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

      ,           -    .               ,       ..      .          var spoilerControl = '' + settings['text'] + '';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     //    if($(this).data('hasSpoiler')!=undefined) return false;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

          .        ,       .    "",     . 
      

        
        
        
      

     
      

        
        
        
      

     ,   .  ?      ,   "  ". 
      

        
        
        
      

         : 
      

        
        
        
      

      init: function (options) { //       .... }, destroy: function(){ //    ,   return this.each(function () { //    data  $(this).removeData(); //   var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); //   $(control).remove(); //    $(this).css('height', defaultHeight); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

          ,      (      ). 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .    ,    jQuery UI       .          ,   ,    +10    +5  . 
      

        
        
        
      

     , -           . 
      

        
        
        
      

     
      

        
        
        
      

        
      

        
        
        
      

     
      

        
        
        
      

       github 
      

        
        
        
      

          data,     .
, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, .







, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, .







, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, . 







 ,      .         ,   ,  ...   ,           . ,   . 
      

        
        
        
      

         return this.each(function () {});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     : 
      

        
        
        
      

     
      

        
        
        
      

      //     var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; //   data     $(this).data('hasSpoiler',true); //       $(this).prepend(spoilerControl); //   $(this).data('defaultHeight', $(this).height()); //   \ $(this).data('collapsed',settings['collapsed']); //    $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); //     ,     true if ($(this).data('collapsed') == true) { //       $(this).css('height', $(Control).css('height')); //     $(Control).addClass('plus'); } else { //       $(this).css('height',$(this).data('defaultHeight')); //     $(this).addClass('minus'); } //         $(Control).click(function () { var spoiler = $(this).parent(); var animation; //      \ if($(spoiler).data('currentAnimation')!=undefined){ // ,   $(spoiler).data('currentAnimation').stop(); } //    if ($(spoiler).data('collapsed') != true) { //       $(this).removeClass('minus'); $(this).addClass('plus'); //       animation   animation=$(spoiler).animate({ //       height: $(this).css('height') }, //   settings['animationTimeout'], //     animation, ,    function(){ $(spoiler).data('currentAnimation',undefined) }); //    "" $(spoiler).data('collapsed',true); } else { //       $(this).removeClass('plus'); $(this).addClass('minus'); //       animation   animation=$(spoiler).animate({ //       height: $(spoiler).data('defaultHeight') }, //   settings['animationTimeout'], //     animation, ,    function(){ $(spoiler).data('currentAnimation',undefined) }); //    "" $(spoiler).data('collapsed',false); } //    data ,       $(spoiler).data('currentAnimation',animation); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

        , ,   .    ,        ,             .       ,   ,       . 
      

        
        
        
      

     
      

        
        
        
      

          .          . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

      ,           -    .               ,       ..      .          var spoilerControl = '' + settings['text'] + '';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     //    if($(this).data('hasSpoiler')!=undefined) return false;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

          .        ,       .    "",     . 
      

        
        
        
      

     
      

        
        
        
      

     ,   .  ?      ,   "  ". 
      

        
        
        
      

         : 
      

        
        
        
      

      init: function (options) { //       .... }, destroy: function(){ //    ,   return this.each(function () { //    data  $(this).removeData(); //   var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); //   $(control).remove(); //    $(this).css('height', defaultHeight); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

          ,      (      ). 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .    ,    jQuery UI       .          ,   ,    +10    +5  . 
      

        
        
        
      

     , -           . 
      

        
        
        
      

     
      

        
        
        
      

        
      

        
        
        
      

     
      

        
        
        
      

       github 
      

        
        
        
      

          data,     .
, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, . 







 ,      .         ,   ,  ...   ,           . ,   . 
      

        
        
        
      

         return this.each(function () {});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     : 
      

        
        
        
      

     
      

        
        
        
      

      //     var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; //   data     $(this).data('hasSpoiler',true); //       $(this).prepend(spoilerControl); //   $(this).data('defaultHeight', $(this).height()); //   \ $(this).data('collapsed',settings['collapsed']); //    $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); //     ,     true if ($(this).data('collapsed') == true) { //       $(this).css('height', $(Control).css('height')); //     $(Control).addClass('plus'); } else { //       $(this).css('height',$(this).data('defaultHeight')); //     $(this).addClass('minus'); } //         $(Control).click(function () { var spoiler = $(this).parent(); var animation; //      \ if($(spoiler).data('currentAnimation')!=undefined){ // ,   $(spoiler).data('currentAnimation').stop(); } //    if ($(spoiler).data('collapsed') != true) { //       $(this).removeClass('minus'); $(this).addClass('plus'); //       animation   animation=$(spoiler).animate({ //       height: $(this).css('height') }, //   settings['animationTimeout'], //     animation, ,    function(){ $(spoiler).data('currentAnimation',undefined) }); //    "" $(spoiler).data('collapsed',true); } else { //       $(this).removeClass('plus'); $(this).addClass('minus'); //       animation   animation=$(spoiler).animate({ //       height: $(spoiler).data('defaultHeight') }, //   settings['animationTimeout'], //     animation, ,    function(){ $(spoiler).data('currentAnimation',undefined) }); //    "" $(spoiler).data('collapsed',false); } //    data ,       $(spoiler).data('currentAnimation',animation); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

        , ,   .    ,        ,             .       ,   ,       . 
      

        
        
        
      

     
      

        
        
        
      

          .          . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

      ,           -    .               ,       ..      .          var spoilerControl = '' + settings['text'] + '';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     //    if($(this).data('hasSpoiler')!=undefined) return false;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

          .        ,       .    "",     . 
      

        
        
        
      

     
      

        
        
        
      

     ,   .  ?      ,   "  ". 
      

        
        
        
      

         : 
      

        
        
        
      

      init: function (options) { //       .... }, destroy: function(){ //    ,   return this.each(function () { //    data  $(this).removeData(); //   var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); //   $(control).remove(); //    $(this).css('height', defaultHeight); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

          ,      (      ). 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .    ,    jQuery UI       .          ,   ,    +10    +5  . 
      

        
        
        
      

     , -           . 
      

        
        
        
      

     
      

        
        
        
      

        
      

        
        
        
      

     
      

        
        
        
      

       github 
      

        
        
        
      

          data,     .
, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, .







, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, .







, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, .







, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, .







, . , , ... , . , .

return this.each(function () {});



:



// var spoilerControl = '<div class="spoilerControl">' + settings['text'] + '</div>'; // data $(this).data('hasSpoiler',true); // $(this).prepend(spoilerControl); // $(this).data('defaultHeight', $(this).height()); // \ $(this).data('collapsed',settings['collapsed']); // $(this).addClass('spoilerContainer'); var Control = $(this).find('.spoilerControl'); $(this).css('height', $(Control).css('height')); // , true if ($(this).data('collapsed') == true) { // $(this).css('height', $(Control).css('height')); // $(Control).addClass('plus'); } else { // $(this).css('height',$(this).data('defaultHeight')); // $(this).addClass('minus'); } // $(Control).click(function () { var spoiler = $(this).parent(); var animation; // \ if($(spoiler).data('currentAnimation')!=undefined){ // , $(spoiler).data('currentAnimation').stop(); } // if ($(spoiler).data('collapsed') != true) { // $(this).removeClass('minus'); $(this).addClass('plus'); // animation animation=$(spoiler).animate({ // height: $(this).css('height') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',true); } else { // $(this).removeClass('plus'); $(this).addClass('minus'); // animation animation=$(spoiler).animate({ // height: $(spoiler).data('defaultHeight') }, // settings['animationTimeout'], // animation, , function(){ $(spoiler).data('currentAnimation',undefined) }); // "" $(spoiler).data('collapsed',false); } // data , $(spoiler).data('currentAnimation',animation); });







, , . , , . , , .



. .





, - . , .. . var spoilerControl = '' + settings['text'] + '';





// if($(this).data('hasSpoiler')!=undefined) return false;







. , . "", .



, . ? , " ".

:

init: function (options) { // .... }, destroy: function(){ // , return this.each(function () { // data $(this).removeData(); // var control = $(this).find('.spoilerControl'); var defaultHeight = $(control).data('defaultHeight'); $(this).removeClass('spoilerContainer'); // $(control).remove(); // $(this).css('height', defaultHeight); }); }







, ( ).





. , jQuery UI . , , +10 +5 .

, - .







github

data, .









More articles:


All Articles