我在SharePoint中有一個包含本地和全局內容的頁面。對於本地內容,我們使用定製的編輯器Web部件(Telerik)。對於全局內容,我讓jQuery從全局存儲庫中的外部文件中寫入內容。在jQuery高度自動調整時遇到問題
現在,本地和全球的內容是通過一個無序呈現list.To使當地和全球的內容看起來渾然一體,我有jQuery的自動調節本地和全球集裝箱的位置:
在這個頁面,內容所有者應該能夠編輯本地內容變就變,而且通過網絡Telerik的部分是可行的:
如何以往,一旦改變被保存,這些元素成爲糊塗:
我需要點擊刷新才能把要素到位。有時,甚至沒有必要編輯頁面來獲得該錯誤。有時候,第一次去頁面也會混淆元素的位置。和以前一樣,您需要刷新頁面。這是不一致的。有時候,你只需刷新一次。其他時候,需要刷新幾次。
下面是我對頁面代碼:
<script lang="en" type="text/jscript">
function changePos(src,tgt) {
var pos = $(src).height() + 20 + "px";
$(tgt).css({top: pos});
}
function changeIndex (src){
switch(src)
{
case "buy":
$("#buy").css("z-index","3");
$("#comp").css("z-index","2");
$("#travel").css("z-index","1");
//alert("Buy");
break;
case "comp":
$("#comp").css("z-index","3");
$("#buy").css("z-index","2");
$("#travel").css("z-index","1");
//alert("Comp");
break;
case "travel":
$("#travel").css("z-index","3");
$("#comp").css("z-index","2");
$("#buy").css("z-index","1");
//alert("Travel");
break;
case "comm":
$("#comm").css("z-index","3");
$("#fclts").css("z-index","2");
$("#dept").css("z-index","1");
//alert("Comm");
break;
case "fclts":
$("#fclts").css("z-index","3");
$("#comm").css("z-index","2");
$("#dept").css("z-index","1");
//alert("Facilities");
break;
case "dept":
$("#dept").css("z-index","3");
$("#fclts").css("z-index","2");
$("#comm").css("z-index","1");
//alert("Dept");
break;
case "career":
$("#career").css("z-index","3");
$("#pay").css("z-index","2");
$("#time").css("z-index","1");
//alert("Career");
break;
case "pay":
$("#pay").css("z-index","3");
$("#career").css("z-index","2");
$("#time").css("z-index","1");
//alert("Pay");
break;
case "time":
$("#time").css("z-index","3");
$("#pay").css("z-index","2");
$("#career").css("z-index","1");
//alert("Time");
break;
}
}
$(document).ready(function(){
var path = window.location.pathname;
var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];
switch(filename){
case "EmployeeResourcesAUS":
$("#locDir").text("Austin Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
case "EmployeeResourcesCLG":
$("#locDir").text("Calgary Phone Directory");
$("#locDir").attr("href","https://webkc.kenonic.com/directory/Phonelist/PhoneList.pdf");
break;
case "EmployeeResourcesMDW":
$("#locDir").text("Midwest Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
case "EmployeeResourcesLLLP":
$("#locDir").text("Austin LLLP Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
case "EmployeeResourcesWSC":
$("#locDir").text("West Coast Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
case "EmployeeResourcesGCEC":
$("#locDir").text("Gulf Coast EC Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
case "EmployeeResourcesKNX":
$("#locDir").text("Knoxville Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
case "EmployeeResourcesBDN":
$("#locDir").text("Bradenton Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
case "EmployeeResourcesSG":
$("#locDir").text("Singapore Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
case "EmployeeResourcesCR":
$("#locDir").text("Costa Rica Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
case "EmployeeResourcesPH":
$("#locDir").text("Philippines Phone Directory");
$("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
break;
}
changePos("#buy","#comm");
changePos("#comp","#fclts");
changePos("#travel","#dept");
var intA = $("#buy").height() + $("#comm").height();
var intB = $("#comp").height() + $("#fclts").height();
var intC = $("#travel").height() + $("#dept").height();
if (intA > intB && intA > intC){
var intH = intA + 40;
var pxlH = intH + "px";
$("#colBuy").css({height: pxlH});
}
else if (intB > intA && intB > intC){
var intH = intB + 40;
var pxlH = intH + "px";
$("#colBuy").css({height: pxlH});
}
else{
var intH = intC + 40;
var pxlH = intH + "px";
$("#colBuy").css({height: pxlH});
}
var intD = $("#career_content").height();
var intE = $("#pay_content").height();
var intF = $("#time_content").height();
var pxlD
if (intD > intE && intD > intF) {
pxlD = intH + intD + 300 + "px";
}
else if (intE > intD && intE > intF) {
pxlD = intH + intE + 300 + "px";
}
else {
pxlD = intH + intF + 300 + "px";
}
$("#emp_rsrcs").css({height: pxlD});
//contentDisp("/systems_hr/onboarding/Custom%20Pages/Employee%20Resources%20EN/gblEMPv2-1.html","#gblContent1");
//$("#gblContent1").load("/systems_hr/onboarding/Custom%20Pages/Employee%20Resources%20EN/gblEMPv2-1.html");
}
);
</script>
哪一部分的代碼是要做出的弊病?另外,如果你碰巧知道一個更好的選擇,我正在做什麼,我全部都是耳朵。我是新來的jQuery,BTW,所以請多多包涵:(
更新:
我似乎找到了錯誤發生什麼事是我的全球內容div的高度有時左可能是因爲changePos函數是在全局內容成功加載之前觸發的,所以例如在Shipping & Shipping部分,本地內容(#locContent1)的高度爲109px,全局內容(#gblContent1)爲189px。意味着整個div(#buy)的總高度應該是298px,通常changePos函數只能識別本地內容高度,所以changePos只有129px,導致我的目標div(#comm)爲重疊位置(如圖3所示)。所以這意味着該函數在全局內容加載之前被觸發。
如何告訴jQuery只有在我的全局內容成功加載後才能使用changePos函數?
更新2
jQuery的讀取我的全球內容DIV到連內容加載後爲0的高度。我如何確定新的身高?或者我應該只指定一個固定的高度?
感謝這:)是的,有一個CSS代碼來處理設計,但位置是由上面的jQuery代碼動態生成的。而且,是的,我想我忘了添加一個職位屬性。我會添加它,看看會發生什麼,這可能會回答我的問題:)我沒有添加高度屬性到本地內容,因爲我不希望它被修復,因爲我不知道有多少項目內容所有者可以添加。我全力以赴替代品,儘管:) – Poch