jQuery插件|为什么不;这部分不起作用

jQuery Plugin | Why doesn't this part of it work?

本文关键字：这部分 不起作用 为什么不 插件 jQuery      更新时间：2023-09-26

我有下面的代码，它有点长，忽略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/。

当没有设置opts属性时，您的代码会失败，因为您无法对无法首先转换为字符串的内容进行串联。

在整个代码中，单词"length"拼写错误为"lenght"

除此之外，我还浏览了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');
相关文章：