I am writing one of my own JQuery plugin. And I got some strange which make me confused.
I am using JQuery UI datepicker with my plugin.
;(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;
// depand on the mysql qurey 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);
usage:
$('.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>
In my work flow:
when I click the "whatchHistory" button, my plugin would load a panel with JQuery UI datepicker applied which days had been set to be availabled or not.
I am using the function "getDays()" to get the available days list and stored the data inside daysWithRecords, and final the UI datepicker's function "beforeShowDay()" called the function "checkAvailability()" to set the days.
the variable "daysWithRecords" was declared inside Igtomw = function(elem , options) and was initialized inside the function getDays()
I am using the function "initialWatchHistory()" to initialization and render the JQuery UI datepicker in the web.
My problem is the function "checkAvailability()" cannot see the variable "daysWithRecords".The firebug prompts me that "daysWithRecords" is "undefined".
this is the first time I write my first plugin. So ....
Thank you very much for any help!!
