У меня есть страница в SharePoint, которая содержит как локальный, так и глобальный контент.Для локального контента мы используем настраиваемую веб-часть редактора (Telerik).Для глобального контента я попросил jQuery записать содержимое из внешнего файла в глобальный репозиторий.
Теперь локальное и глобальное содержимое представлено в неупорядоченном списке. Чтобы локальное и глобальное содержимое выглядело безупречно, у меня есть 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, кстати, поэтому, пожалуйста, потерпите меня: (
Обновление:
Кажется, я нашел ошибку. Что происходит, так это высотамоего глобального содержимого div иногда пропускается, возможно, потому что функция changePos запускается до успешной загрузки глобального содержимого. Так, например, в разделе «Покупка и доставка» локальный контент (# locContent1) имеет высоту 109px, а глобальный контент(# gblContent1) - 189 пикселей. Это означает, что общий div (#buy) должен иметь общую высоту 298 пикселей. Чаще всего функция changePos распознает только локальную высоту содержимого, поэтому changePos составляет только 129 пикселей, что приводит кмой целевой div (#comm) перекрывает свою позицию (как на рисунке 3). Таким образом, это означает, что функция запускается до загрузки глобального содержимого.
Как мне сказать jQuery использовать функцию changePos только послемое глобальное содержимое успешно загружено?
Обновление 2
jQuery считывает мой глобальный контент DIV вимея высоту 0 даже после загрузки контента.Как мне определить новую высоту?Или просто указать фиксированную высоту?