私はJQueryを使い慣れていますので、私に同行してください。JQueryの動的要素 - DOMではバインドできません
オンラインで見つけたjsファイルに基づいていくつかのコードを実装しました。このコードでは、ページ上のネストされた構造内の一連のdivタグをステップスルーしてページ上に個別に表示できます。これはすべて、divタグをマスターページの静的なエントリとして定義すると効果的です。私はこれがSharePointのマスターページに実装されていると付け加えるべきです。
結局のところ、divタグの静的なコレクションでは、理想的には説明的なテキストを含むイメージとハイパーリンクはそれほど柔軟性がありません。これをもう少し設定可能にするために私の変更をロールオーバーしてください。私はリストのWebサービスへのajax呼び出しによってSharePointリストから読み込むいくつかの追加コードを実装しました。リスト内の各エントリに対して、動的に必要な情報を含むdivタグを作成しています。テストのために、私は現在のところタイトルを引っ張っています。
$('#beltDiv').append(divHTML)
は、ページ上の私の入れ子構造に作成されたループにdivを追加する:
私は、次のコードを使用しています。私はこれがフェードコードを期待通りに機能させると思ったが、間違っていた。それはまったく何もしません。
ページのソースを確認すると、divタグは表示されません。ただし、IE開発ツールバーから表示すると、DOMモデルで使用できます。
問題は、divタグが利用できないため、featureFadeコードの開始が機能していないように見えます。これに対処する方法はありますか?使用されるコードを以下に示す:
<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のロジックによってimplmentedされていることである。
私はそれがDOMで動的に追加要素を認識していない理由として困惑<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>
。どのような助けも大いに評価されるでしょう。
これ以上の情報をお寄せいただきありがとうございます。事前に
おかげで、答え受け取っにさらに
グラント
:OK、これは簡単です、あなたのfeatureFade
オブジェクトはDOMの前に作成され
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" }
}
);
}
ずっと簡単にWebサービスを呼び出すことになり、新しいクライアントオブジェクトモデルを持っています。詳細をご記入ください – mkoryak
フェアポイント。動的要素が追加された入れ子div構造を更新しました。 – Grant80
あなたがこの権利をしたかどうかはわかりません。私はそうは思わない。または、processResult関数の閉じ括弧がありません。 – mkoryak