开发者

Cannot see the variable In my own JQuery plugin's function

开发者 https://www.devze.com 2023-02-01 18:03 出处:网络
I am writing a jQuery plugin of my own. And I got some strange which make me confused. I am using jQuery UI datepicker with my plugin.

I am writing a jQuery plugin of my own. 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('开发者_如何学GopanelNum',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);

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 【the event which defined inside initialQuickMenus : function()】, 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!!


Because your Igtomw declaration let daysWithRecords be a local variable. In getDays function, you can get data by => 'obj.daysWithRecords = data;' berfore console.log(...). In checkAvailability function, you don't give any value to daysWithRecords before console.log(...).

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号