Question

I have the following code, but I’m still pretty new to jQuery and I’m pretty sure this is messy code that can be made shorter or maybe use less variables to create a better dynamic plugin. I’m trying to experiment with different types of logic. Here’s the code.

$.pluginName = (function () {
    $(function () {
        var message = "Hello World!";
        var animSpeed = 300;
        var animType = 'fadeIn';
        var icon = "pin";
        var btnText = "Purchase";
        var btnColor = "pink";
        var btnLink = 'http://www.google.com';
        var content = '<div id="mn_close" class="light"></div>' + '<div id="mn_border"></div>' + '<i class="icon-' + icon + '"></i>' + '<span class="mn_message">' + message + '</span>' + '<a href="' + btnLink + '" class="button ' + btnColor + '">' + btnText + '</a>';
        $("#mn_close").live("click", function () {
            $('.mn_bar').animate({
                top: '-50'
            }, animSpeed, function () {});
        });
        $(".mn_bar").append(content);
        $(function () {
            $(".mn_bar").addClass("animated");
            $(".mn_bar").addClass(animType);
        })
    })
})(jQuery);

Any tips on how to pass these variables in to options that the user can change dynamically from a HTML source? I’m not expecting detailed answers, but I’d appreciate any help passed on.

EDI: JS Fiddle with CSS & HTML.

http://jsfiddle.net/QjFnf/8/

Thanks in advance!

Answer 1

See if this helps:

(function( $ ){

  var _defaults = {
    message = 'Hello World!',
    animSpeed = 300,
    animType = 'fadeIn',
    icon = 'pin',
    btnText = 'Purchase',
    btnColor = 'pink',
    btnLink = 'http://www.google.com'
  };

  $.pluginName = function( opts ) {

    var o = $.extend( {}, _defaults, opts )
      , $bar = $('.mn_bar').addClass('animated '+ animType)
      , $close = $('<div id="mn_close" class="light"/>')
      , $icon = $('<i class="icon-"'+ o.icon +'></i>')
      , $message = $('<span class="mn_message">'+ o.message +'</span>')
      , $link = $('<a href="'+ o.btnLink +'" class="button "'+ o.btnColor +'>'+ o.btnText +'</a>');

    $close.click(function(){
      $bar.animate({ top: '-50px' }, animSpeed );
    });

    $bar.append( $bar, $close, $icon, $message, $link );

  };

})( jQuery );