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!!
