2010-04-01 46 views
1

以下文件包含頁面的所有JavaScript。性能是最高優先級。這是最有效的方法嗎?是否所有的點擊/懸停事件都需要在doc.ready中?這是正確使用jquery的document.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').data('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();   
       } 
     }); 
} 

回答

1

要確保所有DOM元素已經正確創建,您必須只在document.ready中使用它們。所以代碼很好。

0

除了圖片和外部資源,您網站內的任何內容都可以放入document ready