我无法让我的jQuery代码在SharePoint中运行。实际上,它曾经不是一个问题。我的一些页面需要jQuery来呈现页面的元素,特别是在定位和可见性方面。当我在开发环境中创建页面时,一切都很好。我所做的是将jQuery代码放在隐藏的内容编辑器Web部件中。
<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 & Expense <br>Policies & 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 & Expense <br>Policies & 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>
我添加的唯一内容是警报(“你好”);检查代码是否正在呈现onload,而不是:(我在开发环境中的另一个页面中注意到了这个疾病。看起来我创建的新页面无法呈现jQuery页面onload:(
请帮助:(
答案 0 :(得分:0)
可能的情况是您没有对生产中的jQuery库的有效引用。确保.js文件可用,并且您的页面包含某处的引用。该引用可以在母版页,页面布局或特定页面中,具体取决于您的需要。