您将如何更改这种代码? [英] How would you change this kind of code?

问题描述

我有以下代码，但是对于jQuery来说我还是很陌生，并且我敢肯定这是一堆凌乱的代码，可以将其缩短或使用更少的变量来创建更好的动态插件.我正在尝试使用不同类型的逻辑.这是代码.

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

关于如何将这些变量传递到用户可以从HTML源动态更改的选项的任何技巧?我不希望得到详细的答案，但不胜感激.

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与CSS& HTML.

EDI: JS Fiddle with CSS & HTML.

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

提前谢谢！

推荐答案

看看是否有帮助:

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

这篇关于您将如何更改这种代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！