現在、MCMS 2002 から SharePoint 2010 への CMS の移行を行っています。MCMS テンプレートの 1 つを使用すると、ユーザーは独自の CSS とスクリプトを追加できました。スクリプトとスタイルが削除されないように、それらのコンテンツをコンテンツ エディター Web パーツにインポートする必要がありました。次のコードは、インポートされるものの例です。
<style type="text/css">
ul#oakTabs { margin-left: 0; width: 100%; }
ul#oakTabs li { display:inline; border: 1px solid #00CC99; cursor: pointer; background-color: #FFF; margin-right: 4px; padding: 2px 5px; color: #444455; height: 20px; line-height: 14px; font-weight: bold; }
ul#oakTabs li.selected { border: 1px solid #009966; color: #FFFFFF; font-weight: bold; margin-right: 4px; padding: 2px 5px; text-decoration: none; background-color: #66CC99; background-image: none; height: 20px; }
ul#oakTabs li span.tabArrowDown { position: relative; top: 5px; background-image: url(/Images/etsp/tabarrowdown.gif); background-repeat: no-repeat;padding: 0 7px 0 0; margin: 0; }
ul#oakTabs li span.tabArrowUp { position: relative; top: 5px; background-image: url(/Images/etsp/tabarrowup.gif); background-repeat: no-repeat; padding: 0 7px 0 0; margin: 0; }
.tabContent { background-color: #FFF; margin: 0 0 10px 0; padding: 15px 10px 5px 20px; border-top: 3px solid #006600; border-right: 1px solid #CCC; border-bottom: 4px solid #006600; border-left: 1px solid #CCC; width: 100%; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#oakTab01Btn").click(function () {
$("#oakTabCont01").slideToggle("normal");
$("#oakTab01Btn").toggleClass("selected");
$("#oakTab01Btn span").toggleClass("tabArrowUp");
$("#oakTabCont02, #oakTabCont03").slideUp("normal");
$("#oakTab02Btn, #oakTab03Btn").removeClass("selected");
$("#oakTab02Btn span, #oakTab03Btn span").removeClass("tabArrowUp").addClass("tabArrowDown");
});
$("#oakTab02Btn").click(function () {
$("#oakTabCont02").slideToggle("normal");
$("#oakTab02Btn").toggleClass("selected");
$("#oakTab02Btn span").toggleClass("tabArrowUp");
$("#oakTabCont01, #oakTabCont03").slideUp("normal");
$("#oakTab01Btn, #oakTab03Btn").removeClass("selected");
$("#oakTab01Btn span, #oakTab03Btn span").removeClass("tabArrowUp").addClass("tabArrowDown");
});
$("#oakTab03Btn").click(function () {
$("#oakTabCont03").slideToggle("normal");
$("#oakTab03Btn").toggleClass("selected");
$("#oakTab03Btn span").toggleClass("tabArrowUp");
$("#oakTabCont01, #oakTabCont02").slideUp("normal");
$("#oakTab01Btn, #oakTab02Btn").removeClass("selected");
$("#oakTab01Btn span, #oakTab02Btn span").removeClass("tabArrowUp").addClass("tabArrowDown");
});
});
</script>
<div id="oakPageTabs">
<ul id="oakTabs">
<li id="oakTab01Btn">Menu 1 <span class="tabArrowDown"> </span></li>
<li id="oakTab02Btn">Menu 2 <span class="tabArrowDown"> </span></li>
<li id="oakTab03Btn">Menu 3 <span class="tabArrowDown"> </span></li>
</ul>
</div>
<div style="display: none" id="oakTabCont01" class="tabContent">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div style="display: none" id="oakTabCont02" class="tabContent">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div style="display: none" id="oakTabCont03" class="tabContent">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
問題
インポートは正常に機能します。しかし、コンテンツが変更されて保存されるたびに、保存ごとに関数が添付されたすべての HTML 要素に jquery 属性が追加されることに気付きました。追加の属性は、コンテンツが編集されてから保存されたときにのみ追加されるように見えます。コードがどのように見えるかの例を次に示します。
<ul id="oakTabs">
<li id="oakTab01Btn" jquery17107623806633942214="1" jquery17103491321314889904="1"
jquery17102665908125207371="1" jquery1710870082776749848="1">Menu 1 <span class="tabArrowDown">
 </span></li>
<li id="oakTab02Btn" jquery17107623806633942214="2" jquery17103491321314889904="2"
jquery17102665908125207371="2" jquery1710870082776749848="2">Menu 2 <span class="tabArrowDown">
 </span></li>
<li id="oakTab03Btn" jquery17107623806633942214="3" jquery17103491321314889904="3"
jquery17102665908125207371="3" jquery1710870082776749848="3">Menu 3 <span class="tabArrowDown">
 </span></li></ul>
知っておくべきこと
- すべての発行機能がオンになっている SharePoint 発行サイトにあります。
- jquery は、余剰属性の書き込みを除いて正しく機能します。
- この問題は、スプラッシュ ページ レイアウトを使用して nightandday.master の新しい発行サイトで再現できます。
私の理論
ページが読み込まれると、Jquery は属性を DOM に読み込みます。次に、コンテンツ エディター Web パーツが保存されると、SharePoint は DOM を取得し、HTML を新しい属性で保存します。その後、ページが編集用に開かれると、SharePoint はコンテンツを静的に読み込みますが、JQuery は依然として属性を DOM に書き込みます。そのため、DOM と編集用のコンテンツ エディター Web パーツに表示されるものの両方に属性が存在するようになりました。次に、ページが再度保存されると、DOM の New 属性が保存されます。
この理論が正しいかどうかはわかりません。正確に何が起こっているのかを解明するための助けと、可能な修正があれば大歓迎です。前もって感謝します。
