2011-07-25 45 views
0

我無法讓我的jQuery代碼在SharePoint中運行。事實上,它不是一個問題。我的一些頁面需要jQuery來渲染頁面元素,特別是在定位和可見性方面。當我在開發環境中創建頁面時,一切都很順利。我所做的是將jQuery代碼放置在隱藏的內容編輯器Web部件中。未在頁面加載SharePoint中運行的jQuery代碼

<script lang="en" type="text/jscript"> 

    function toggleContent(content) 
    { 
     var i; 
     var x = ""; 

     for(i=1; i<=13; i++) 
     { 
      x = "#C"+i; 
      $(x).css("visibility","hidden"); 
     } 
     $(content).css("visibility","visible"); 
    } 

    function toggleGblContent() 
    { 
     var i; 
     var x = ""; 

     for(i=1; i<=13; i++) 
     { 
      x = "#gblD"+i; 
      $(x).css("visibility","hidden"); 
     } 
    }  

    function toggleImgMenu(menu,bol) // menu represents the selected tab, bol determines whether the 5th menu 
    {        // will be inactive (0) or active (1) 
     var i; 
     var x = ""; 

     for(i=1; i<=5; i++) 
     { 
      x = "#menu"+i; 
      $(x).attr("class","activelayer"); 
     } 
     $(menu).attr("class","selectedlayer"); 

     if (menu != "#menu5") 
     { 
     if (bol==0) // meaning outer tab is First Day or First Month 
      { 
      $("#menu5").attr("class","inactivelayer"); 
      } 
     else 
      { 
      $("#menu5").attr("class","activelayer"); 
      } 
     } 
    } 

    function posGblContent(content,src) 
    { 
     //var pos = $(content).height() - 10; 
     var pos = $(content).height(); 
/* 
     if (content == "#C1") 
      { 
      //alert(pos); 
      //I know this code is kind of stupid, but SP keeps changing the height of DIV C1 in display mode 
      //screwing up the look in the process. Other similar DIVs work fine. 
      if (pos == "247") 
       { 
       $("#globalContent").css({"position":"absolute","top":"233px", "left":"0px"}); 
       } 
      else 
       { 
       $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"}); 
       } 
      //alert($("#globalContent").css("top")); 
      } 
     else 
      { 
      $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"}); 
      } 
*/   
     $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"}); 
     //alert(src); 
     toggleGblContent(); 
     //$("#gblIfrContent").attr("src","/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/" + src + ".html"); 

     $(src).css("visibility","visible"); 
    }  

    function innerTabState(state) 
    { 
     switch(state) 
     { 
      case "day": 
     // change state of inner tabs    
       toggleImgMenu("#menu1",0);   
     // change visibility of RADEditors 
       toggleContent("#C1");     
     // change state of outer tabs 
       $("#day1").attr("class","current"); 
       $("#week1").attr("class","active"); 
       $("#month1").attr("class","active"); 
     // change texts of menus 
       $("#tabitem1").html("Payroll, Benefits,<br>& Personal Information"); 
       $("#tabitem1").attr("class","leftmostvlin"); 
       $("#tabitem2").text("Business Overview"); 
       $("#tabitem2").attr("class","tablink"); 
       $("#tabitem3").text("Office Resources"); 
       $("#tabitem3").attr("class","tablink"); 
       $("#tabitem4").text("Online Assignments"); 
       $("#tabitem4").attr("class","tablink"); 
       $("#tabitem5").text("");  
     // change global content 
       posGblContent("#C1","#gblD1");  

      $("#tabitem1").click(function() 
       { 
       toggleImgMenu("#menu1",0); 
       toggleContent("#C1"); 
       posGblContent("#C1","#gblD1");          
       }); 

      $("#tabitem2").click(function() 
       { 
       toggleImgMenu("#menu2",0); 
       toggleContent("#C2"); 
       posGblContent("#C2","#gblD2");        
       }); 

      $("#tabitem3").click(function() 
       { 
       toggleImgMenu("#menu3",0); 
       toggleContent("#C3"); 
       posGblContent("#C3","#gblD3");            
       }); 

      $("#tabitem4").click(function() 
       { 
       toggleImgMenu("#menu4",0); 
       toggleContent("#C4"); 
       posGblContent("#C4","#gblD4");            
       }); 
      break; 

      case "week": 
     // change state of inner tabs    
      toggleImgMenu("#menu1",1);   
     // change visibility of RADEditors 
      toggleContent("#C5");       
     // change state of outer tabs   
      $("#day1").attr("class","active"); 
      $("#week1").attr("class","current"); 
      $("#month1").attr("class","active");    
     // change texts of menus 
      $("#tabitem1").text("Introductions"); 
      $("#tabitem1").attr("class","leftmost");    
      $("#tabitem2").text("Position Information"); 
      $("#tabitem2").attr("class","tablink"); 
      $("#tabitem3").text("Personal Safety"); 
      $("#tabitem3").attr("class","tablink"); 
      $("#tabitem4").text("Additional Resources");  
      $("#tabitem4").attr("class","tablink"); 
      $("#tabitem5").text("E-Learning"); 
      $("#tabitem5").attr("class","tablink"); 
     // change global content 
      posGblContent("#C5","#gblD5");  

      $("#tabitem1").click(function() 
       { 
       toggleImgMenu("#menu1",1); 
       toggleContent("#C5"); 
       posGblContent("#C5","#gblD5");    
       }); 

      $("#tabitem2").click(function() 
       { 
       toggleImgMenu("#menu2",1); 
       toggleContent("#C6"); 
       posGblContent("#C6","#gblD6");     
       }); 

      $("#tabitem3").click(function() 
       { 
       toggleImgMenu("#menu3",1); 
       toggleContent("#C7"); 
       posGblContent("#C7","#gblD7");    
       }); 

      $("#tabitem4").click(function() 
       { 
       toggleImgMenu("#menu4",1); 
       toggleContent("#C8"); 
       posGblContent("#C8","#gblD8");    
       }); 

      $("#tabitem5").click(function() 
       { 
       toggleImgMenu("#menu5",1); 
       toggleContent("#C9"); 
       posGblContent("#C9","#gblD9");    
       }); 

      break; 
      case "month": 
     // change state of inner tabs    
      toggleImgMenu("#menu1",0);   
     // change visibility of RADEditors 
      toggleContent("#C10"); 
     // change state of outer tabs      
      $("#day1").attr("class","active"); 
      $("#week1").attr("class","active"); 
      $("#month1").attr("class","current"); 
     // change texts of menus 
      $("#tabitem1").text("Policies & Procedures"); 
      $("#tabitem1").attr("class","leftmost"); 
      $("#tabitem2").html("Travel &amp; Expense <br>Policies &amp; Procedures"); 
      $("#tabitem2").attr("class","vlin"); 
      $("#tabitem3").text("Training & Development"); 
      $("#tabitem3").attr("class","tablink"); 
      $("#tabitem4").html("Employee<br>Communications"); 
      $("#tabitem4").attr("class","vlin");  
      $("#tabitem5").text(""); 
     // change global content 
      posGblContent("#C10","#gblD10"); 

      $("#tabitem1").click(function() 
       { 
       toggleImgMenu("#menu1",0); 
       toggleContent("#C10"); 
       posGblContent("#C10","#gblD10");     
       }); 

      $("#tabitem2").click(function() 
       { 
       toggleImgMenu("#menu2",0); 
       toggleContent("#C11"); 
       posGblContent("#C11","#gblD11");     
       }); 

      $("#tabitem3").click(function() 
       { 
       toggleImgMenu("#menu3",0); 
       toggleContent("#C12"); 
       posGblContent("#C12","#gblD12");    
       }); 

      $("#tabitem4").click(function() 
       { 
       toggleImgMenu("#menu4",0); 
       toggleContent("#C13"); 
       posGblContent("#C13","#gblD3");    
       });    

      break;    
     } 
    } 

    $(document).ready(function() 
     { 
     // change state of inner tabs    
       toggleImgMenu("#menu1",0);  
     // change visibility of RADEditors 
       toggleContent("#C1"); 
     // change state of outer tabs 
       $("#day1").attr("class","current"); 
       $("#week1").attr("class","active"); 
       $("#month1").attr("class","active"); 
     // change texts of menus 
       $("#tabitem1").html("Payroll, Benefits,<br>& Personal Information"); 
       $("#tabitem2").text("Business Overview"); 
       $("#tabitem3").text("Office Resources"); 
       $("#tabitem4").text("Online Assignments"); 
       $("#tabitem5").text(""); 
     //change positions of global content 
       posGblContent("#C1","#gblD1"); 
       //$("#globalContent").css({"position":"absolute","top": $("#C1").height() - 3 + "px", "left":"0px"});       

      $("#tabitem1").click(function() 
       { 
       toggleImgMenu("#menu1",0); 
       toggleContent("#C1"); 
       posGblContent("#C1","#gblD1");          
       }); 

      $("#tabitem2").click(function() 
       { 
       toggleImgMenu("#menu2",0); 
       toggleContent("#C2"); 
       posGblContent("#C2","#gblD2");           
       }); 

      $("#tabitem3").click(function() 
       { 
       toggleImgMenu("#menu3",0); 
       toggleContent("#C3"); 
       posGblContent("#C3","#gblD3");        
       }); 

      $("#tabitem4").click(function() 
       { 
       toggleImgMenu("#menu4",0); 
       toggleContent("#C4"); 
       posGblContent("#C4","#gblD4");        
       });   
     }); 

</script> 

然而,當我在生產環境中複製它,代碼將不會運行的onload,儘管具有相同的密碼和設置:(

這裏的生產代碼:

<script lang="en" type="text/jscript"> 

    function toggleContent(content) 
    { 
     var i; 
     var x = ""; 

     for(i=1; i<=13; i++) 
     { 
      x = "#C"+i; 
      $(x).css("visibility","hidden"); 
     } 
     $(content).css("visibility","visible"); 
    } 

    function toggleGblContent() 
    { 
     var i; 
     var x = ""; 

     for(i=1; i<=13; i++) 
     { 
      x = "#gblD"+i; 
      $(x).css("visibility","hidden"); 
     } 
    }  

    function toggleImgMenu(menu,bol) // menu represents the selected tab, bol determines whether the 5th menu 
    {        // will be inactive (0) or active (1) 
     var i; 
     var x = ""; 

     for(i=1; i<=5; i++) 
     { 
      x = "#menu"+i; 
      $(x).attr("class","activelayer"); 
     } 
     $(menu).attr("class","selectedlayer"); 

     if (menu != "#menu5") 
     { 
     if (bol==0) // meaning outer tab is First Day or First Month 
      { 
      $("#menu5").attr("class","inactivelayer"); 
      } 
     else 
      { 
      $("#menu5").attr("class","activelayer"); 
      } 
     } 
    } 

    function posGblContent(content,src) 
    { 
     //var pos = $(content).height() - 10; 
     var pos = $(content).height(); 
/* 
     if (content == "#C1") 
      { 
      //alert(pos); 
      //I know this code is kind of stupid, but SP keeps changing the height of DIV C1 in display mode 
      //screwing up the look in the process. Other similar DIVs work fine. 
      if (pos == "247") 
       { 
       $("#globalContent").css({"position":"absolute","top":"233px", "left":"0px"}); 
       } 
      else 
       { 
       $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"}); 
       } 
      //alert($("#globalContent").css("top")); 
      } 
     else 
      { 
      $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"}); 
      } 
*/   
     $("#globalContent").css({"position":"absolute","top": pos + "px", "left":"0px"}); 
     //alert(src); 
     toggleGblContent(); 
     //$("#gblIfrContent").attr("src","/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/" + src + ".html"); 

     $(src).css("visibility","visible"); 
    }  

    function innerTabState(state) 
    { 
     switch(state) 
     { 
      case "day": 
     // change state of inner tabs    
       toggleImgMenu("#menu1",0);   
     // change visibility of RADEditors 
       toggleContent("#C1");     
     // change state of outer tabs 
       $("#day1").attr("class","current"); 
       $("#week1").attr("class","active"); 
       $("#month1").attr("class","active"); 
     // change texts of menus 
       $("#tabitem1").html("Payroll, Benefits,<br>& Personal Information"); 
       $("#tabitem1").attr("class","leftmostvlin"); 
       $("#tabitem2").text("Business Overview"); 
       $("#tabitem2").attr("class","tablink"); 
       $("#tabitem3").text("Office Resources"); 
       $("#tabitem3").attr("class","tablink"); 
       $("#tabitem4").text("Online Assignments"); 
       $("#tabitem4").attr("class","tablink"); 
       $("#tabitem5").text("");  
     // change global content 
       posGblContent("#C1","#gblD1");  

      $("#tabitem1").click(function() 
       { 
       toggleImgMenu("#menu1",0); 
       toggleContent("#C1"); 
       posGblContent("#C1","#gblD1");          
       }); 

      $("#tabitem2").click(function() 
       { 
       toggleImgMenu("#menu2",0); 
       toggleContent("#C2"); 
       posGblContent("#C2","#gblD2");        
       }); 

      $("#tabitem3").click(function() 
       { 
       toggleImgMenu("#menu3",0); 
       toggleContent("#C3"); 
       posGblContent("#C3","#gblD3");            
       }); 

      $("#tabitem4").click(function() 
       { 
       toggleImgMenu("#menu4",0); 
       toggleContent("#C4"); 
       posGblContent("#C4","#gblD4");            
       }); 
      break; 

      case "week": 
     // change state of inner tabs    
      toggleImgMenu("#menu1",1);   
     // change visibility of RADEditors 
      toggleContent("#C5");       
     // change state of outer tabs   
      $("#day1").attr("class","active"); 
      $("#week1").attr("class","current"); 
      $("#month1").attr("class","active");    
     // change texts of menus 
      $("#tabitem1").text("Introductions"); 
      $("#tabitem1").attr("class","leftmost");    
      $("#tabitem2").text("Position Information"); 
      $("#tabitem2").attr("class","tablink"); 
      $("#tabitem3").text("Personal Safety"); 
      $("#tabitem3").attr("class","tablink"); 
      $("#tabitem4").text("Additional Resources");  
      $("#tabitem4").attr("class","tablink"); 
      $("#tabitem5").text("E-Learning"); 
      $("#tabitem5").attr("class","tablink"); 
     // change global content 
      posGblContent("#C5","#gblD5");  

      $("#tabitem1").click(function() 
       { 
       toggleImgMenu("#menu1",1); 
       toggleContent("#C5"); 
       posGblContent("#C5","#gblD5");    
       }); 

      $("#tabitem2").click(function() 
       { 
       toggleImgMenu("#menu2",1); 
       toggleContent("#C6"); 
       posGblContent("#C6","#gblD6");     
       }); 

      $("#tabitem3").click(function() 
       { 
       toggleImgMenu("#menu3",1); 
       toggleContent("#C7"); 
       posGblContent("#C7","#gblD7");    
       }); 

      $("#tabitem4").click(function() 
       { 
       toggleImgMenu("#menu4",1); 
       toggleContent("#C8"); 
       posGblContent("#C8","#gblD8");    
       }); 

      $("#tabitem5").click(function() 
       { 
       toggleImgMenu("#menu5",1); 
       toggleContent("#C9"); 
       posGblContent("#C9","#gblD9");    
       }); 

      break; 
      case "month": 
     // change state of inner tabs    
      toggleImgMenu("#menu1",0);   
     // change visibility of RADEditors 
      toggleContent("#C10"); 
     // change state of outer tabs      
      $("#day1").attr("class","active"); 
      $("#week1").attr("class","active"); 
      $("#month1").attr("class","current"); 
     // change texts of menus 
      $("#tabitem1").text("Policies & Procedures"); 
      $("#tabitem1").attr("class","leftmost"); 
      $("#tabitem2").html("Travel &amp; Expense <br>Policies &amp; Procedures"); 
      $("#tabitem2").attr("class","vlin"); 
      $("#tabitem3").text("Training & Development"); 
      $("#tabitem3").attr("class","tablink"); 
      $("#tabitem4").html("Employee<br>Communications"); 
      $("#tabitem4").attr("class","vlin");  
      $("#tabitem5").text(""); 
     // change global content 
      posGblContent("#C10","#gblD10"); 

      $("#tabitem1").click(function() 
       { 
       toggleImgMenu("#menu1",0); 
       toggleContent("#C10"); 
       posGblContent("#C10","#gblD10");     
       }); 

      $("#tabitem2").click(function() 
       { 
       toggleImgMenu("#menu2",0); 
       toggleContent("#C11"); 
       posGblContent("#C11","#gblD11");     
       }); 

      $("#tabitem3").click(function() 
       { 
       toggleImgMenu("#menu3",0); 
       toggleContent("#C12"); 
       posGblContent("#C12","#gblD12");    
       }); 

      $("#tabitem4").click(function() 
       { 
       toggleImgMenu("#menu4",0); 
       toggleContent("#C13"); 
       posGblContent("#C13","#gblD3");    
       });    

      break;    
     } 
    } 

    $(document).ready(function() 
     { 
     alert("hello"); 
     // change state of inner tabs    
       toggleImgMenu("#menu1",0);  
     // change visibility of RADEditors 
       toggleContent("#C1"); 
     // change state of outer tabs 
       $("#day1").attr("class","current"); 
       $("#week1").attr("class","active"); 
       $("#month1").attr("class","active"); 
     // change texts of menus 
       $("#tabitem1").html("Payroll, Benefits,<br>& Personal Information"); 
       $("#tabitem2").text("Business Overview"); 
       $("#tabitem3").text("Office Resources"); 
       $("#tabitem4").text("Online Assignments"); 
       $("#tabitem5").text(""); 
     //change positions of global content 
       posGblContent("#C1","#gblD1"); 
       //$("#globalContent").css({"position":"absolute","top": $("#C1").height() - 3 + "px", "left":"0px"});       

      $("#tabitem1").click(function() 
       { 
       toggleImgMenu("#menu1",0); 
       toggleContent("#C1"); 
       posGblContent("#C1","#gblD1");          
       }); 

      $("#tabitem2").click(function() 
       { 
       toggleImgMenu("#menu2",0); 
       toggleContent("#C2"); 
       posGblContent("#C2","#gblD2");           
       }); 

      $("#tabitem3").click(function() 
       { 
       toggleImgMenu("#menu3",0); 
       toggleContent("#C3"); 
       posGblContent("#C3","#gblD3");        
       }); 

      $("#tabitem4").click(function() 
       { 
       toggleImgMenu("#menu4",0); 
       toggleContent("#C4"); 
       posGblContent("#C4","#gblD4");        
       });   
     }); 

</script> 

我添加的唯一東西是alert(「hello」);檢查代碼是否正在呈現onload,而不是:(我在開發環境中的其他頁面中注意到這種疾病。我創建的新頁面無法渲染jQuery頁面:(

請幫忙:(

+0

你在哪裏放置jQuery庫腳本包括? – Dexter

回答

0

很可能是您沒有生產中的jQuery庫的有效引用。確保.js文件可用,並且您的頁面包含某處的引用。該引用可以在主頁面,頁面佈局或特定頁面中,具體取決於您的需要。

相關問題