SharePointでjQueryコードを実行するのに問題があります。実際、それは問題ではありませんでした。私のページの中には、jQueryがページの要素をレンダリングする必要があります(特に、配置と可視性)。私が開発環境でページを作成したとき、すべてがうまくいった。私がしたのは、jQueryコードを隠しコンテンツエディタWebパーツに配置することでした。私は、本番環境でそれを複製したときにjQueryコードがSharePointのページロードで実行されていません
<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>
私が追加したのはアラート(「こんにちは」)だけです。コードがオンロードでレンダリングされているかどうかを確認してください。そうではありません(私は開発環境の別のページでこの問題に気付きました。私が作成した新しいページはjQueryページのロードをレンダリングできません:(
助けてください:(
jQueryライブラリスクリプトのインクルードはどこに配置しましたか? – Dexter