Once again about creating jQuery plugin or using it in practice

Good day,% habrauser%!

Foreword

I work as a programmer and write projects for the internal needs of the company. Projects come across diverse and interesting.
Until recently, many "beautiful" I did with the help of the notorious jQuery UI. The set has almost all the necessary widgets, etc., it is easy and convenient to use it. And even if there are problems, the answers to the questions can be easily found on the network.
And everything would be fine in the Danish kingdom, if not one BUT

Problematics

Despite all the magnificence of jQuery UI, I came to the conclusion that its use is not justified in a situation when you need only one widget.
Yes, and simply changing the style for one widget in a large project can be a big headache.
Recently, I finished one of the projects in which it was not supposed to use jQuery UI. But in one of the blocks, I met with the need to embed such a widget as a spoiler (a bar that opens / hides a block with content when clicked). Searching the solution on the Internet, to my surprise, I did not find any suitable plug-in.

Lyrical digression

Anticipating a heated discussion about

did not find any suitable plugin

I want to say the following.
There are indeed many plugins in the network for creating spoilers, but:
1. They are either completely raw or abandoned for over a year.
2. I have too “hard-boiled” functionality.
3. Do not know how to work with the types of tags that are needed.
4. etc.
JQuery UI also has a widget that can be used as a spoiler. This is an accordion widget. But to drag even the minimal set from the jQuery UI package for the sake of one widget is, in my opinion, stupid.
Well, the last fact FOR writing a plugin - increasing self-esteem after writing.
')

Formulation of the problem

So, there is a desire, necessity and time for writing a plugin.
Without thinking twice, I opened Google and typed something like a “plugin for jQuery” in the search. In the first results I saw an article on your favorite habr. We write a plugin for jQuery . A separate thank you to the author for the article, as it greatly helped in mastering the basic principles of writing plugins.
Then I began to make a list of requirements for the plugin.
First, he must be able to hide / reveal blocks with information.
Secondly, he should be able to generate a clickable strip (block) to control the spoiler (well, what kind of spoiler will do without it).
Thirdly, it should be possible to write text on the clickable block (which was all for an adult).
Fourth, it should be possible to control the initial state of open / closed when initializing the plug-in.
Well, on the tasty, let there be an open / close animation with the ability to turn off.

Getting started

The block of code is taken from the topic of the habraser Rafael .
Create a plug-in file and name it jquery.bestSpoiler.js (+5 to self-assessment) and put the stock in it:

(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); 

Pay attention to the line return this.each(function () { }); . It indicates that the plugin must be initialized for each block that corresponds to the selector specified during initialization of the plugin.

The stock is ready. So far this is the bare skeleton of our future plugin. Therefore, it is time to start weighing it with muscles and other components.
The requirements for the plugin indicated the parameters that we want to assign depending on the task.
Let's add a couple of parameters for our plugin and add the following lines:

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

In this block, we have defined the parameters of our plugin, which we can change depending on the task and place of use of the plugin.
I hope everything is clear from the comments in the code, so let's move on. We defined the main parameters of the plugin and it's time to make it do magic. But first, a small digression.
The idea of ​​forcing a programmer to draw all the necessary blocks for a plugin is selfish. This will certainly make it easier to create a plugin, but its use will be inconvenient. Therefore, before starting work on the logic of the plug-in, I had to think and carry out several test tests. As a result, I came to the conclusion that the main container for the spoiler will be the element , . , , ... , . , .
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, .