Я новичок в использовании JQuery, так что терпите меня.
Я реализовал некоторый код, основанный на js-файле, который я нашел в Интернете, который позволяет ряду тегов div во вложенной структуре на моей странице переходить и показывать каждый из них по отдельности на странице. Все это прекрасно работает, когда я определяю теги div как статические записи на главной странице. Я должен добавить, что это реализуется на главной странице SharePoint.
В конечном счете, со статической коллекцией тегов div, в идеале содержащей изображение с некоторым описательным текстом, а гиперссылка не очень гибкая. Перейдите к моим изменениям, чтобы сделать это немного более настраиваемым. Я реализовал некоторый дополнительный код, который будет читать из списка SharePoint через ajax-вызов веб-службы списков. Для каждой записи в списке я создаю тег div, который содержит информацию, необходимую динамически. В настоящее время я проверяю название только для тестирования.
Я использовал следующий код:
$('#beltDiv').append(divHTML)
для добавления элементов div в цикле, которые создаются для моей вложенной структуры на странице. Я полагал, что это приведет к тому, что код затухания будет работать, как и ожидалось, но я ошибся. Он вообще ничего не делает.
При проверке источника на странице теги div не отображаются. Однако они доступны в модели DOM при просмотре через панель инструментов разработчика IE.
Проблема (я думаю) заключается в том, что инициализация кода featureFade не работает из-за недоступности тегов div. Есть ли способ решить эту проблему? Используемый код показан ниже:
<script type="text/javascript">
$(document).ready(function() {
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Carousel Items</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
url: "_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
});
function processResult(xData, status) {
$(xData.responseXML).find("z\\:row").each(function() {
var divHTML = "<div id=\"divPanel_" + $(this).attr("ows_Title") + "\" class=\"panel\" style=\"background:url('http://devSP2010/sites/SPSOPS/Style Library/SharePointOps/Images/01.jpg') no-repeat; width:650px; height:55px;\"><div><div class=\"content\"><div><P><A style=\"COLOR: #cc0000\" href=\"www.google.com\">" + $(this).attr("ows_Title") + "</A></P><P> </P><P> </P><P> </P><P> </P></div></div></div></div>";
$("#beltDiv").append(divHTML);
});
}
featureFade.setup({
galleryid: 'headlines',
beltclass: 'belt',
panelclass: 'panel',
autostep: { enable: true, moveby: 1, pause: 10000 },
panelbehavior: { speed: 1000, wraparound: true },
stepImgIDs: ["ftOne", "ftTwo", "ftThree", "ftFour","ftFive"],
defaultButtons: { itemOn: "Style Library/SharePointOps/Images/dotOn.png", itemOff: "Style Library/SharePointOps/Images/dotOff.png" }
});
Раздел, в котором теги div динамически добавляются, показан ниже. Я закомментировал статические теги div, которые работают как положено. Единственное изменение заключается в том, что они реализуются логикой JQuery:
<div class="homeFeature" style="display:inline-block">
<div id="headlines" class="headlines">
<div id="beltDiv" class="belt">
<!--
<div id="divPanel_ct01" class="panel" style="position:absolute;background-image:url('http://devsp2010/sites/spsops/Style Library/SharePointOps/Images/01.jpg'); background-repeat:no-repeat">Static Test 1</div>
<div id="divPanel_ct02" class="panel" style="position:absolute;background-image:url('http://devsp2010/sites/spsops/Style Library/SharePointOps/Images/02.jpg'); background-repeat:no-repeat">Static Test 2</div>
-->
</div>
</div>
Я озадачен, почему он не распознает динамически добавленные элементы в DOM. Любая помощь будет принята с благодарностью.
Я рад предоставить дополнительную информацию по этому вопросу.
Заранее спасибо,
Grant
В дополнение к полученному ответу: я изменил вызов функции:
function processResult(xData, status)
{
$(xData.responseXML).find("z\\:row").each(
function()
{
/*alert($(this).attr("ows_ImagePath"));*/
var divHTML = "<div id=\"divPanel_" + $(this).attr("ows_Title") + "\" class=\"panel\" style=\"background:url('http://devSP2010/sites/SPSOPS/Style Library/SharePointOps/Images/ClydePort01big.jpg') no-repeat; width:650px; height:55px;\"><div><div class=\"content\"><div><P><A style=\"COLOR: #cc0000\" href=\"www.google.com\">" + $(this).attr("ows_Title") + "</A></P><P> </P><P> </P><P> </P><P> </P></div></div></div></div>";
$("#beltDiv").append(divHTML);
}
);
featureFade.setup(
{
galleryid: 'headlines',
beltclass: 'belt',
panelclass: 'panel',
autostep: { enable: true, moveby: 1, pause: 10000 },
panelbehavior: { speed: 1000, wraparound: true },
stepImgIDs: ["ftOne", "ftTwo", "ftThree", "ftFour","ftFive"],
defaultButtons: { itemOn: "Style Library/SharePointOps/Images/dotOn.png", itemOff: "Style Library/SharePointOps/Images/dotOff.png" }
}
);
}