[英]jQuery Plugin | Why doesn't this part of it work?
我有下面的代码,它有点长,并且忽略了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属性时,您的代码将进行故障转移,因为您无法对无法首先转换为字符串的方法进行串联。
在整个代码中,“长度”一词的拼写错误是“长度”
除此之外,我已经遍历了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');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.