How to turn variables in to options?
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/14048723/how-would-you-change-this-kind-of-code">How would you change this kind of code?</a>  </p>
</blockquote>



<p>How would I pass these variables in to options through jQuery, so that when the user uses the plugin, they must initialize the plugin from the HTML like so:</p>

<pre><code> &lt;script&gt;
    $('.elem').pluginName({
       theme: 'blue',
       animSpeed: 200
    });
 &lt;/script&gt;
</code></pre>

<p>Here's my jQuery code. Pretty messy, but have a look. How could I change the variables to options?</p>

<pre><code>$(function () {

    var theme = "sunburst";
    var btnColor = "yellow";
    var icon = "power";
    var message = "Hello World";
    var animSpeed = 300;
    var animType = 'fadeIn';
    var btnText = "Purchase";
    var btnLink = 'http://www.google.com';
    var closeStyle = "dark";

    var content =
        '&lt;div id="mn_close" class="' + closeStyle + '"&gt;&lt;/div&gt;' +
        '&lt;div id="mn_border"&gt;&lt;/div&gt;' +
        '&lt;i class="icon-' + icon + '"&gt;&lt;/i&gt;' +
        '&lt;span class="mn_message"&gt;' + message + '&lt;/span&gt;';
        //  '&lt;a href="' + btnLink + '" class="button ' + btnColor + '"&gt;' + btnText + '&lt;/a&gt;';


    $("#mn_close").live("click", function () {
        $('.mn_bar').animate({
            height: '0'
        }, animSpeed, function () {});
    });
    var mn_bar = $(".mn_bar");
    mn_bar.append(content);
    $(function () {
        mn_bar.addClass("animated");
        mn_bar.addClass(animType);
        mn_bar.addClass(theme)
    });
});
</code></pre>

<p>Or here is the jsfiddle. <a href="http://jsfiddle.net/LwGRV/6/" rel="nofollow">http://jsfiddle.net/LwGRV/6/</a></p>

<p>I've being trying to implement the code in to this standard type of jQuery code too, but failing to merge:</p>

<pre><code>;(function ( $, window, document, undefined ) {
    var pluginName = "defaultPluginName",
        defaults = {
            propertyName: "value"
        };

    function Plugin( element, options ) {
        this.element = element;

        this.options = $.extend( {}, defaults, options );

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {

        init: function() {
        },

        yourOtherFunction: function(el, options) {
            // some logic
        }
    };

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
            }
        });
    };

})( jQuery, window, document );
</code></pre>

<p>Many thanks in advance if anyone can shed some light on to this. </p>
