jQuery Plugin | 왜이 부분이 작동하지 않습니까?

Question

나는 다음과 같은 코드를 가지고있다. 조금 길어서 opts을 무시하면, 그것도 없이도 작동하지만, 아무 일도 일어나지 않기 때문에 내가 잘못하고있는 것처럼 보인다. 그것을 할 생각 이죠

var container = 'body'; 

var structureWrapper = '<div class="content-login"></div>'; 

var structure = [ 
'<form name="', opts.formClass, '" class="', opts.formClass, '" method="post" action="#">', 
    '<fieldset class="', opts.fieldsWrapper, '">', 
     '<fieldset class="', opts.userWrapper, '">', 
      '<label for="', opts.userInt, '" class="', opts.userLbl, '"><img src="', opts.userIcon, '" alt="', opts.userName, '" /></label>', 
      '<input type="text" name="', opts.userInt, '" class="', opts.userInt, '" placeholder="', checkNameLenght(opts.userName, namesLenght.userNameLenght, 16, 'Username'), '" value="" autocomplete="off" />', 
     '</fieldset>', 
     '<fieldset class="', opts.passWrapper, '">', 
      '<label for="', opts.passInt, '" class="', opts.passLbl, '"><img src="', opts.passIcon, '" alt="', opts.passName, '" /></label>', 
      '<input type="password" name="', opts.passInt, '" class="', opts.passInt, '" placeholder="', checkNameLenght(opts.passName, namesLenght.passNameLenght, 16, 'Password'), '" value="" autocomplete="off" />', 
     '</fieldset>', 
     '<fieldset class="', opts.btnWrapper, '">', 
      '<button type="submit" name="', opts.btnInt, '" class="', opts.btnInt, '">', checkNameLenght(opts.btnName, namesLenght.btnNameLenght, 7, 'Login'), '</button>', 
     '</fieldset>', 
    '</fieldset>', 
    '<div class="toogle-button">', 
     '<ul class="inside">', 
      '<li class="toogle"><a><img src="assets/gfx/toogle.png" alt="Back" /></a></li>', 
     '</ul>', 
    '</div>', 
'</form>', 
'<div class="toogle-buttons">', 
'</div>' 
]; 





var getProps = function(obj) { 
return { 
    'position': 'absolute', 
    'top': (($(window).height() - $(obj).outerHeight())/2) + 'px', 
    'left': (($(window).width() - $(obj).outerWidth())/2) + 'px' 
} 
} 

var showObj = function(obj, callback) { 
return setTimeout(function() { 
    if (opts.centerObj === true) { 
     var cssProps = getProps(obj); 
     obj.css(cssProps).fadeIn('slow'); 
    } 
    else { 
     obj.fadeIn('slow'); 
    } 
    if (typeof callback == 'function') { 
     callback.call(this); 
    } 
}, 1500); 
} 


var appendStructure = function(wrapper, structure, cls) { 

return $(wrapper).appendTo(container).hide(function() { 
    var obj = $(container).find(cls); 
    $(structure.join('')).appendTo(obj); 
    showObj(obj, function() { 
     if (opts.centerObj === true) { 
      $(window).resize(function() { 
       var cssProps = getProps(obj); 
       obj.css(cssProps); 
      }); 
     } 
    }); 
}); 
} 

appendStructure(structureWrapper, structure, '.content-login'); 

는 해당 배열을 가지고 그것을 연결하고 내 경우, 컨테이너에 body 그것을 추가, 다음의 내용을 페이드입니다. 당신은 내가 잘못 아무것도 발견 할 수 있습니까?

도와 주셔서 감사합니다. :) 여기에 도우미가 있습니다. http://jsfiddle.net/VUjMH/.

Answer 1

첫 번째 문자열로 변환 할 수있는 방법이없는 문자열에 대해 결합을 수행 할 수 없으므로 선택 기능이 설정되지 않은 경우 코드가 실패합니다. 코드 전반에 걸쳐

단어 "길이" "아이폰에"그렇다 나는 코드 형태의 jsfiddle 겪은 것을에서

철자를 잘못하고 작동 지점에 자랐다.

나는 "checkNameLength"기능에 작은 변경 한

은 "namesLength"매개 변수를 제거하고 "name.length"문제에서 제외

var container = 'body'; 
var opts = { 
    debug: true, 
    formClass:"", 
    userWrapper:"", 
    userInt:"", 
    userLbl:"", 
    userIcon:"" , 
    userName:"", 
    passName:"", 
    btnName:"" 
} 

    /*Removed redundant namesLength var*/ 
var checkNameLength = function(name, allowedLength, defaultName) { 
    if ((name.length<= allowedLength) && !(/\s[^a-z]/i.test(name))) { 
     return name; 
    } 
    else { 
     if (opts.debug === true) { 
      console.log(name + ' is to long or contains special characters/numbers | Please  choose a name shorter than ' + allowedLength+ ' characters or remove any character/number'); 
     } 
     return defaultName; 
    } 
} 


var structureWrapper = '<div class="content-login"></div>'; 

var structure = [ 
    '<form name="', opts.formClass, '" class="', opts.formClass, '" method="post" action="#">', 
    '<fieldset class="', opts.fieldsWrapper, '">', 
     '<fieldset class="', opts.userWrapper, '">', 
      '<label for="', opts.userInt, '" class="', opts.userLbl, '"><img src="', opts.userIcon, '" alt="', opts.userName, '" /></label>', 
      '<input type="text" name="', opts.userInt, '" class="', opts. 
userInt, '" placeholder="', checkNameLength(opts.userName, 16, 'Username'), '" value="" autocomplete="off" />', 
     '</fieldset>', 
     '<fieldset class="', opts.passWrapper, '">', 
      '<label for="', opts.passInt, '" class="', opts.passLbl, '"><img src="', opts.passIcon, '" alt="', opts.passName, '" /></label>', 
      '<input type="password" name="', opts.passInt, '" class="', opts.passInt, '" placeholder="', checkNameLength(opts.passName, 16, 'Password'), '" value="" autocomplete="off" />', 
     '</fieldset>', 
     '<fieldset class="', opts.btnWrapper, '">', 
      '<button type="submit" name="', opts.btnInt, '" class="', opts.btnInt, '">', checkNameLength(opts.btnName, 7, 'Login'), '</button>', 
     '</fieldset>', 
    '</fieldset>', 
    '<div class="toogle-button">', 
     '<ul class="inside">', 
      '<li class="toogle"><a><img src="assets/gfx/toogle.png" alt="Back" /></a></li>', 
     '</ul>', 
    '</div>', 
'</form>', 
'<div class="toogle-buttons">', 
'</div>' 
]; 





var getProps = function(obj) { 
    return { 
     'position': 'absolute', 
     'top': (($(window).height() - $(obj).outerHeight())/2) + 'px', 
     'left': (($(window).width() - $(obj).outerWidth())/2) + 'px' 
    } 
} 

var showObj = function(obj, callback) { 
    return setTimeout(function() { 
     if (opts.centerObj === true) { 
      var cssProps = getProps(obj); 
      obj.css(cssProps).fadeIn('slow'); 
     } 
     else { 
      obj.fadeIn('slow'); 
     } 
     if (typeof callback == 'function') { 
      callback.call(this); 
     } 
    }, 1500); 
} 


var appendStructure = function(wrapper, structure, cls) { 

    return $(wrapper).appendTo(container).hide(function() { 
     var obj = $(container).find(cls); 
     $(structure.join('')).appendTo(obj); 
     showObj(obj, function() { 
      if (opts.centerObj === true) { 
       $(window).resize(function() { 
        var cssProps = getProps(obj); 
        obj.css(cssProps); 
       }); 
      } 
     }); 
    }); 
} 

appendStructure(structureWrapper, structure, '.content-login');