我正在编写自己的jQuery插件。而且我有些奇怪让我感到困惑。
我在我的插件中使用jQuery UI datepicker。
;(function($){
var newMW = 1,
mwZIndex = 0;
// IgtoMW contructor
Igtomw = function(elem , options){
var activePanel,
lastPanel,
daysWithRecords,
sliding; // used to check the animation below is executed to the end.
// used to access the plugin's default configuration
this.opts = $.extend({}, $.fn.igtomw.defaults, options);
// intial the model window
this.intialMW();
};
$.extend(Igtomw.prototype, {
// intial model window
intialMW : function(){
this.sliding = false;
//this.daysWithRecords = [];
this.igtoMW = $('<div />',{'id':'igto'+newMW,'class':'igtoMW',})
.css({'z-index':mwZIndex}) // make it in front of all exist model window;
.appendTo('body')
.draggable({ containment: 'parent' , handle: '.dragHandle' , distance: 5 });
//var igtoWrapper = igtoMW.append($('<div />',{'class':'igtoWrapper'}));
this.igtoWrapper = $('<div />',{'class':'igtoWrapper'}).appendTo(this.igtoMW);
this.igtoOpacityBody = $('<div />',{'class':'igtoOpacityBody'}).appendTo(this.igtoMW);
//var igtoHeaderInfo = igtoWrapper.append($('<div />',{'class':'igtoHeaderInfo dragHandle'}));
this.igtoHeaderInfo = $('<div />',{'class':'igtoHeaderInfo dragHandle'})
.appendTo(this.igtoWrapper);
this.igtoQuickNavigation = $('<div />',{'class':'igtoQuickNavigation'})
.css({'color':'#fff'})
.appendTo(this.igtoWrapper);
this.igtoContentSlider = $('<div />',{'class':'igtoContentSlider'})
.appendTo(this.igtoWrapper);
this.igtoQuickMenu = $('<div />',{'class':'igtoQuickMenu'})
.appendTo(this.igtoWrapper);
this.igtoFooter = $('<div />',{'class':'igtoFooter dragHandle'})
.appendTo(this.igtoWrapper);
// append to igtoHeaderInfo
this.headTitle = this.igtoHeaderInfo.append($('<div />',{'class':'headTitle'}));
// append to igtoQuickNavigation
this.igQuickNav = $('<div />', {'class':'igQuickNav'})
.html('登录')
.appendTo(this.igtoQuickNavigation);
// append to igtoContentSlider
this.igInnerPanelTopMenu = $('<div />',{'class':'igInnerPanelTopMenu'})
.appendTo(this.igtoContentSlider);
this.igInnerPanelTopMenu.append('<div class="igInnerPanelButtonPreWrapper"><a href="" class="igInnerPanelButton Pre" action="" style="background-image:url(images/igto/igInnerPanelTopMenu.bt.bg.png);"></a></div>');
this.igInnerPanelTopMenu.append('<div class="igInnerPanelSearch"><input type="text" name="igInnerSearch" /><a href="" class="igInnerSearch">搜索</a></div>' );
this.igInnerPanelTopMenu.append('<div class="igInnerPanelButtonNextWrapper"><a href="" class="igInnerPanelButton Next" action="sm" style="background-image:url(images/igto/igInnerPanelTopMenu.bt.bg.png); background-position:-272px"></a></div>' );
this.igInnerPanelBottomMenu = $('<div />',{'class':'igInnerPanelBottomMenu'})
.appendTo(this.igtoContentSlider);
this.icWrapper = $('<div />',{'class':'icWrapper','id':'igto'+newMW+'Panel'})
.appendTo(this.igtoContentSlider);
this.icWrapperCotentPre = $('<div class="slider pre"></div>').appendTo(this.icWrapper);
this.icWrapperCotentShow = $('<div class="slider firstShow "></div>').appendTo(this.icWrapper);
this.icWrapperCotentnext = $('<div class="slider next"></div>').appendTo(this.icWrapper);
this.initialPanel();
this.initialQuickMenus();
console.log(this.leftPad(9));
newMW++;
mwZIndex++;
this.igtoMW.bind('mousedown',function(){
var $this = $(this);
//alert($this.css('z-index') + ' '+mwZIndex);
if( parseInt($this.css('z-index')) === (mwZIndex-1) )
return;
$this.css({'z-index':mwZIndex});
mwZIndex++;
//alert(mwZIndex);
});
},
initialPanel : function(){
this.defaultPanelNum = this.opts.initialPanel;
this.activePanel = this.defaultPanelNum;
this.lastPanel = this.defaultPanelNum;
this.defaultPanel = this.loadPanelContents(this.defaultPanelNum);
$(this.defaultPanel).appendTo(this.icWrapperCotentShow);
},
initialQuickMenus : function(){
// store the current element
var obj = this;
var defaultQM = this.opts.initialQuickMenu;
var strMenu = '';
var marginFirstEle = '8';
$.each(defaultQM,function(key,value){
//alert(key+':'+value);
if(marginFirstEle === '8'){
strMenu += '<a href="" class="btPanel" panel="'+key+'" style="margin-left: 8px;" >'+value+'</a>';
marginFirstEle = '4';
}
else{
strMenu += '<a href="" class="btPanel" panel="'+key+'" style="margin-left: 4px;" >'+value+'</a>';
}
});
// append to igtoQuickMenu
this.igtoQMenu = $(strMenu).appendTo(this.igtoQuickMenu);
this.igtoQMenu.bind('click',function(event){
event.preventDefault();
var element = $(this);
if(element.is('.active')){
return;
}
else{
$(obj.igtoQMenu).removeClass('active');
element.addClass('active');
}
var d = new Date();
var year = d.getFullYear();
var month = obj.leftPad( d.getMonth() );
var inst = null;
if( obj.sliding === false){
console.log(obj.lastPanel);
var currentPanelNum = parseInt(element.attr('panel'));
obj.checkAvailability();
obj.getDays(year,month,inst,currentPanelNum);
obj.slidePanel(currentPanelNum);
obj.activePanel = currentPanelNum;
console.log(obj.activePanel);
obj.lastPanel = obj.activePanel;
obj.icWrapper.find('input').val(obj.activePanel);
}
});
},
initialLoginPanel : function(){
var obj = this;
this.igPanelLogin = $('<div />',{'class':"igPanelLogin"});
this.igEnterName = $('<div />',{'class':"igEnterName"}).appendTo(this.igPanelLogin);
this.igInput = $('<input type="text" name="name" value="秦海翔" />').appendTo(this.igEnterName);
this.igtoLoginBtWrap = $('<div />',{'class':"igButtons"}).appendTo(this.igPanelLogin);
this.igtoLoginBt = $('<a href="" class="igtoLoginBt" action="OK" >确定</a>\
<a href="" class="igtoLoginBt" action="CANCEL" >取消</a>\
<a href="" class="igtoLoginBt" action="ADD" >添加用户</a>').appendTo(this.igtoLoginBtWrap);
this.igtoLoginBt.bind('click',function(event){
event.preventDefault();
var elem = $(this);
var action = elem.attr('action');
var userName = obj.igInput.val();
obj.loadRootMenu();
});
return this.igPanelLogin;
},
initialWatchHistory : function(){
var obj = this; // for thirt part plugin used
if(this.sliding === false){
this.watchHistory = $('<div />',{'class':'igInnerPanelSlider'}).append($('<div />',{'class':'igInnerPanel_pre'}).addClass('igInnerPanel'))
.append($('<div />',{'class':'igInnerPanel'}).datepicker({ dateFormat: 'yy-mm-dd',defaultDate: '2010-12-01' ,showWeek: true,firstDay: 1,
//beforeShow:setDateStatistics(),
onChangeMonthYear:function(year, month, inst) {
var panelNum = 1;
month = obj.leftPad(month);
obj.getDays(year,month,inst,panelNum);
} ,
beforeShowDay: obj.checkAvailability,
onSelect: function(dateText, inst) {
obj.checkAvailability();
}
}).append($('<div />',{'class':'extraMenu'})) )
.append($('<div />',{'class':'igInnerPanel_next'}).addClass('igInnerPanel'));
return this.watchHistory; }
},
loadPanelContents : function(panelNum){
switch(panelNum){
case 1:
alert('inside loadPanelContents')
return this.initialWatchHistory();
break;
case 2:
return this.initialWatchHistory();
break;
case 3:
return this.initialWatchHistory();
break;
case 4:
return this.initialWatchHistory();
break;
case 5:
return this.initialLoginPanel();
break;
}
},
loadRootMenu : function(){
var obj = this;
var mainMenuPanel = $('<div />',{'class':'igRootMenu'});
var currentMWId = this.igtoMW.attr('id');
this.activePanel = 0;
$('#'+currentMWId+'Panel .pre').
queue(function(next){
$(this).
html(mainMenuPanel).
addClass('panelShow').
removeClass('pre').
attr('panelNum',0);
next();
}).
queue(function(next){
$('<div style="width:0;" class="slider pre"></div>').
prependTo('#'+currentMWId+'Panel').animate({width:348}, function(){
$('#'+currentMWId+'Panel .slider:last').remove()
$('#'+currentMWId+'Panel .slider:last').replaceWith('<div class="slider next"></div>');
$('.btMenu').remove(); // remove bottom quick menu
obj.sliding = false;
$(this).removeAttr('style');
});
$('.igtoQuickMenu .active').removeClass('active');
next();
});
},
slidePanel : function(currentPanelNum){
var currentMWId = this.igtoMW.attr('id');
var obj = this;
//alert(obj.loadPanelContents(currentPanelNum));
if( this.activePanel > currentPanelNum){
$('#'+currentMWId+'Panel .pre').
queue(function(next){
alert('inside slidePanel')
//var initialDate = getPanelDateStatus(panelNum);
//console.log('intial day in bigger panel '+initialDate)
$(this).
html(obj.loadPanelContents(currentPanelNum)).
addClass('panelShow').
removeClass('pre').
attr('panelNum',currentPanelNum);
$('#'+currentMWId+'Panel .next').remove();
next();
}).
queue(function(next){
$('<div style="width:0;" class="slider pre"></div>').
prependTo('#'+currentMWId+'Panel').animate({width:348}, function(){
//$('#igto1Panel .slider:last').find(setPanel(currentPanelNum)).datepicker('destroy');
$('#'+currentMWId+'Panel .slider:last').empty().removeClass('panelShow').addClass('next').removeAttr('panelNum');
$('#'+currentMWId+'Panel .slider:last').replaceWith('<div class="slider next"></div>')
obj.sliding = false;console.log('inuse inside animation: '+obj.sliding);
$(this).removeAttr('style');
});
next();
});
}
else{ ///// current panel num smaller than next
$('#'+currentMWId+'Panel .next').
queue(function(next){
$(this).
html(obj.loadPanelContents(currentPanelNum)).
addClass('panelShow').
removeClass('next').
attr('panelNum',currentPanelNum);
$('<div class="slider next">empty</div>').appendTo('#'+currentMWId+'Panel');
next();
}).
queue(function(next){
$('#'+currentMWId+'Panel .pre').animate({width:0}, function(){
$(this).remove();
//$('#igto1Panel .slider:first').find(setPanel(currentPanelNum)).datepicker('destroy');
$('#'+currentMWId+'Panel .slider:first').empty().removeClass('panelShow').addClass('pre').removeAttr('panelNum').removeAttr('style');
$('#'+currentMWId+'Panel .slider:first').replaceWith('<div class="slider pre"></div>')
obj.sliding = false;
console.log('inuse inside animation: '+obj.sliding);
});
next();
});
}
},
getDays : function(year,month,inst,panelNum){
var obj = this;
// depend on the mysql query condition
var table_of_record = 'moviewh';//getTable(panelNum);
var date_of_record = 'watching_date';//getTableDateCol(panelNum);
var date_to_find = year+'-'+month;
var node_of_xml_date_list = 'whDateRecords';//getXMLDateNode(panelNum);
var user_id = '1';//getLoginUserId();
//var daysWithRecords = [];
// empty array before asigning
this.daysWithRecords.length = 0;
$.ajax({
type: "GET",
url: "include/get.date.list.process.php",
data:({ table_of_record : table_of_record,date_of_record:date_of_record,date_to_find:date_to_find,user_id:user_id,node_of_xml_date_list:node_of_xml_date_list }),
dataType: "json",
cache: false, // force broser don't cache the xml file
async: false, // using this option to prevent datepicker refresh 异步NO
success:function(data){
// had no date records
if(data === null)
return;
obj.daysWithRecords = data;
}
});
//setPanelDateStatus(year,month,panelNum);
console.log('call from getdays() ' + this.daysWithRecords);
},
checkAvailability : function(availableDays) { //
var i;
var checkdate = $.datepicker.formatDate('yy-mm-dd', availableDays);
//console.log( checkdate);
// for(var i = 0; i < this.daysWithRecords.length; i++) {
//
// if(this.daysWithRecords[i] == checkdate){
//
// return [true, "available"];
// }
// }
//console.log('inside check availablility '+ this.daysWithRecords); //return [true, "available"];
console.log(typeof this.daysWithRecords)
for(i in this.daysWithRecords){
//if(this.daysWithRecords[i] == checkdate){
console.log(typeof this.daysWithRecords[i]);
//return [true, "available"];
//}
}
return [true, "available"];
//return [false, ""];
},
leftPad : function(num) {
return (num < 10) ? '0' + num : num;
}
});
$.fn.igtomw = function(options){
// Merge options passed in with global defaults
var opt = $.extend({}, $.fn.igtomw.defaults , options);
return this.each(function() {
new Igtomw(this,opt);
});
};
$.fn.igtomw.defaults = {
// 0:mainMenu 1:whatchHistor 2:requestHistory 3:userManager
// 4:shoppingCart 5:loginPanel
initialPanel : 5, // default panel is LoginPanel
initialQuickMenu : {'1':'whatchHIstory','2':'求片记录','3':'用户管理','4':'购物记录'} // defalut quick menu
};
})(jQuery);
用法：
$('.openMW').click(function(event){
event.preventDefault();
$('<div class="">').igtomw();
})
HTML code：
<div id="taskBarAndStartMenu">
<div class="taskBarAndStartMenuM">
<a href="" class="openMW" >启动IGTO</a>
</div>
<div class="taskBarAndStartMenuO"></div>
</div>
在我的工作流程中：
当我点击“whatchHistory”按钮【在 initialQuickMenus：function（）里面定义的事件】时，我的插件会加载一个带有 JQuery UI的面板datepicker 已应用哪些日期已设置为可用。
我正在使用功能“getDays（）”来获取可用的天数列表，并将数据存储在 daysWithRecords 中，最后UI datepicker的函数“beforeShowDay（）”调用函数“checkAvailability（）”来设置日期。
变量“daysWithRecords”在 Igtomw = function（elem，options）内声明，并在函数 getDays（） <内初始化/ p>
我正在使用函数“initialWatchHistory（）”来初始化并在Web中呈现JQuery UI日期选择器。
我的问题是函数“checkAvailability（）”无法看到变量“daysWithRecords”。萤火虫提示我 “daysWithRecords”是“undefined”。
这是我第一次写第一个插件。所以......
非常感谢您的帮助!!
答案 0 :(得分：0)
因为你的Igtomw声明让daysWithRecords成为局部变量。在getDays函数中，您可以通过=＆gt;获取数据。 'obj.daysWithRecords = data;' berfore console.log（...）。在checkAvailability函数中，您不会在console.log（...）之前给daysWithRecords赋值。