Mise à jour des paramètres du plugin jQuery après l'initialisation

Question

J'ai effectué une recherche sur le SO et je ne peux pas mettre à jour le plugin de ma mine correctement. J'ai mis les options de plugin sur init mais j'ai besoin de changer les valeurs de chaque paramètre après et réexécuter le plugin. Voici ce que j'ai jusqu'à présent:

(function ($) { 
 
    $.fn.testPlugin = function (options) { 
 
    \t \t // Default settings 
 
     var settings = $.extend({ 
 
      padding: '0', 
 
      margin: '0' 
 
     }, options); 
 

 
     return this.each(function() { 
 
     \t $(this).css({ 
 
      \t 'padding' : settings.padding, 
 
      'margin' : settings.margin 
 
      }); 
 
     }); 
 
    } 
 
}(jQuery)); 
 

 
// Initialize the plugin 
 
$('#main').testPlugin({ 
 
    padding: '20px', 
 
    margin: '20px 0' 
 
}); 
 

 
// Update the plugin settings with new values and change the padding/margin on click 
 
$('#update').on('click', function() { 
 
    var newPadding = $('#newPadding').val(); 
 
    var newMargin = $('#newMargin').val(); 
 
    console.log(newPadding, newMargin) 
 
    
 
    // Here is where i'm stuck. 
 
    // How to update the plugin settings and re-run it? 
 
    
 
})

#main { 
 
    width: 300px; 
 
    background: #333; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <p>Lorem ipsum dummy text</p> 
 
</div> 
 

 
<input type="text" id="newPadding" value="20px" /> 
 
<input type="text" id="newMargin" value="20px 0" /> 
 
<button id="update">Update</button>

Answer 1

Avez-vous essayé fonctionner de la même façon que vous initialisés?

$('#main').testPlugin({ 
    padding: newPadding, 
    margin: newMargin 
}); 

Answer 2

Votre plug-in ne pas vraiment faire quelque chose qui aurait toute utilisation pour les paramètres mis à jour, si vous voulez réinitialiser les valeurs CSS à quelque chose d'autre, vous auriez tout simplement appeler votre plugin une fois de plus avec d'autres valeurs .

Si vous avez eu un plug-in qui a utilisé les paramètres pour quelque chose où ils pourraient être mis à jour, il vous faudrait créer une sorte de système où le premier argument est vérifié, et les paramètres définis en conséquence, etc.

Ceci est un peu près de la façon dont jQuery UI il fait quand vous mettez à jour les paramètres

(function($) { 
 
    $.fn.testPlugin = function(options, value) { 
 
    if (typeof options === 'string' && value) { 
 
     this.data(options, value); 
 
    } else { 
 
     var opts = $.extend({ 
 
    \t \t text: 'This is a default text !' 
 
    \t \t }, options); 
 

 
     return this.each(function() { 
 
     $(this).on('click', function() { 
 
      console.log($(this).data('text')); 
 
     }) 
 
     }).data(opts); 
 
    } 
 
    } 
 
}(jQuery)); 
 
/* ------------------------------- */ 
 
// Initialize the plugin 
 
$('#main').testPlugin({ 
 
    text: 'This works just fine' 
 
}); 
 

 
// change the setting 
 
$('#change').on('click', function() { 
 
    $('#main').testPlugin('text', 'So does this !'); 
 
    /* ---- */ 
 
    $(this).css('color', 'red'); 
 
    $('#main').text('Click me again!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main">Click me !</div> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<button id="change">Now change the text</button>