开发者

is this correct use of jquery's document.ready?

The below file contains all the javascript for a page. Performance is the highest priority. Is this the most efficient way? Do all click/hover events need to to be inside the doc.ready?

//DOCUMENT.READY EVENTS
//---------------------------------------------------------------------------
$(function(){       

        // mark events as not loaded
        $('.event').data({
            t1_loaded: false,
            t2_loaded: false,
            t3_loaded: false,
            art_req: false
        }); 

        //mark no events have been clicked
        $('#wrap_right').data('first_click_made', false);


        // cal-block event click
        $('#cal_blocks div.event, #main_search div.event').live('click', function(){
            var id = $(this).attr('id').split('e')[1];  
            event_click(id);
        });

        // jq history
        $.historyInit(function(hash){
            if(hash)
                {
                    event_click(hash);
                }
        });

        // search
        $('#search_input').typeWatch
            ({
                callback: function(){
                    var q = $('#search_input').attr('value');
                    search(q);
                },
                wait : 350,
                highlight : false,
                captureLength : 2
            });     

        $('#search_input, #main_search div.close').live('click',function(){
            $(this).attr("value","");
            reset_srch_res();   
        });

        $('#main_search').easydrag();   

        $('a.dialog').colorbox();       

        //TAB CLICK -> AJAX LOAD TAB
        $('#wrap_right .rs_tabs li').live('click', function(){

            $this = $(this);
            var id = $('#wrap_right').data('curr_event');
            var tab = parseInt($this.attr('rel'));

            //hide other tabs
            $('#rs_'+id+' .tab_body').hide();   

            //mark current(clicked) tab
            $('#rs_'+id+' .rs_tabs li').removeClass('curr_tab');
            $this.addClass('curr_tab');

            //is the tab already loaded and hidden?
            var loaded = $('#e'+id).data('t'+tab+'_loaded');
            //console.log('id: '+id+', tab: '+tab+', loaded: '+loaded);
            if(loaded === true)
                {
                    $('#rs_'+id+' .tab'+tab).show();
                    if (tab == 2) { art_requested(id); }
                }
            else
                {
                    //ajax load in the tab
                    $('#rs_'+id+' .tab'+tab).load('index_files/tab'+tab+'.php?id='+id, function(){
                        //after load callback
                        if (tab == 1) { $('#rs_' + id + ' .frame').delay(600).fadeIn(600) };
                        if (tab == 2) { art_requested(id); }                                    
                    });
                    //mark tab as loaded
                    $('#e'+id).data('t'+tab+'_loaded', true);
                    //fade in current tab
                    $('#rs_'+id+' .tab'+tab).show();            
                }   
        })

});


// LOAD RS FUNCTIONS
//---------------------------------------------------------------------------

function event_click(id){

    window.location.hash = id;
    //mark current event    
    $('#wrap_right').da开发者_运维技巧ta('curr_event', id);

    //hide any other events
    if($('#wrap_right').data('first_click_made') === true)
        {
            $('#wrap_right .event_rs').hide();
        }


    //frame loaded before?
    var loaded = $('#e'+id).data('t1_loaded');
    if(loaded === true) {
        $('#rs_'+id).show();
    }
    else {
        create_frame(id);
    }
    //open/load the first tab
    $('#rs_'+id+' .t1').click();
    $('#wrap_right').data('first_click_made', true);
    $('#cal_blocks').scrollTo('#e'+id, 1000, {offset: {top:-220, left:0}});
}

function create_frame(id){

    var art = ents[id].art;
    var ven = ents[id].ven;
    var type = ents[id].gig_club;   

    //select colours for tabs
    if(type  == 1){ var label = 'gig';}
    else if(type  == 2){ var label = 'club';}
    else if(type  == 0){ var label = 'other';}

    //create rs container for this event
    var frame =             '<div id="rs_'+id+'" class="event_rs">';
    frame +=                '<div class="title_strip"></div>';
    frame +=                '<div class="rs_tabs"><ul class="'+label+'"><li class="t1 nav_tab1 curr_tab hand" rel="1"></li>';
    if(art == 1){frame +=   '<li class="t2 nav_tab2 hand" rel="2"></li>';}
    if(ven == 1){frame +=   '<li class="t3 nav_tab2 hand" rel="3"></li>';}
    frame +=                '</ul></div>';
    frame +=                '<div id="rs_content"><div class="tab_body tab1" ></div>';
    if(art == 1){frame +=   '<div class="tab_body tab2"></div>';}
    if(ven == 1){frame +=   '<div class="tab_body tab3"></div>';}
    frame +=                '</div>';
    frame +=                '</div>';

    $('#wrap_right').append(frame);

    //mark current event in cal-blocks  
    $('#cal_blocks .event_sel').removeClass('event_sel');
    $('#e'+id).addClass('event_sel');

    if($('#wrap_right').data('first_click_made') === false)
        {
            $('#wrap_right').delay(500).slideDown();
            $('#rs_'+id+' .rs_tabs').delay(800).fadeIn();
        }       
};


// FUNCTIONS
//---------------------------------------------------------------------------

//check to see if an artist has been requested
function art_requested(id){
    var art_req = $('#e'+id).data('art_req');   
    if(art_req !== false)
        {
            //alert(art_req);
            $('#art_'+art_req).click();
        }
}


//scroll artist panes smoothly (scroll bars cause glitches otherwise)

function before (){ 
    if(!IE){$('#art_scrollable .bio_etc').css('overflow','-moz-scrollbars-none');}
}

function after (){          
    if(!IE){$('#art_scrollable .bio_etc').css('overflow','auto');}
}

function prep_media_carousel(){ 
    //youtube and soundcloud player
    $("#rs_content .yt_scrollable a.yt, #rs_content .yt_scrollable a.sc").colorbox({                
        overlayClose : false,
        opacity : 0
    });     

    $("#colorbox").easydrag(true);
    $('#cboxOverlay').remove();
}


function make_carousel_scrollable(unique_id){   
    $('#scroll_'+unique_id).scrollable({
        size:1,
        clickable:false,
        nextPage:'#r_'+unique_id,
        prevPage:'#l_'+unique_id
    });
}


function check_l_r_arrows(total, counter, art_id){  
    //left arrow
    if(counter > 0)
        {
            $('#l_'+art_id).show();
            $('#l_'+art_id+'_inactive').hide();
        }
    else
        {
            $('#l_'+art_id).hide();
            $('#l_'+art_id+'_inactive').show();
        }

    //right arrow   
    if(counter < total-3)
        {
            $('#r_'+art_id).show();
            $('#r_'+art_id+'_inactive').hide();
        }
    else
        {
            $('#r_'+art_id).hide();
            $('#r_'+art_id+'_inactive').show();
        }
}


function reset_srch_res(){
    $('#main_search').fadeOut(400).children().remove();
}

function search(q){
        $.ajax({  
            type: 'GET',
            url: 'index_files/srch/search.php?q='+q,
            success: function(e)
                {
                    $('#main_search').html(e).show();           
                }  
        }); 
}


to be sure that all DOM elements already created properly you have to work with them only in document.ready. so the code is fine.


Anything includes in your page from within your site can be put in document ready except for images and external resources.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜