次のコードを使用して、html内のフックを見つけ出し、そこからリンクを作成し、ポップアップを作成してポピュレートし、フック自体を非表示にします。 FF、Chrome、Safari、IE8、IE9では正常に動作しますが、IE7では失敗します。IE7でのJQueryリスト/リンク操作エラーのみ
ここには実際の使用状況へのリンクがあります。再生時に異常なCSSがないこと、リストがフローティングされていないなどです。JQuery 1.7.1をUIバージョン1.8.18で使用しています。ダイアログ:誰もが、私はこのエラーを閉鎖することができますどのように指摘することができれば
http://databizsolutions.ie/contents/page.php?v=35&u=admin-videos#a
、私は非常に感謝されると思います。
(TinyMCEはによって生成された)元のHTML:IE7で
<h3>Title of list</h3>
<ol>
<li class="arrow arr0">
<a class="opener" title="Click to view video" path ="path/to/file1.mp4" >
Call to action 1
</a>
</li>
<li class="arrow arr1">
<a class="opener" title="Click to view video" path ="path/to/file2.mp4" >
Call to action 2
</a>
</li>
<li class="arrow arr2">
<a class="opener" title="Click to view video" path ="path/to/file3.mp4" >
Call to action 3
</a>
</li>
...
:
<h3>Title of list</h3>
<ol>
<li>Call to action 1</li>
<ol>
<li>[popup]path/to/file1.mp4</li>
</ol>
<li>Call to action 2</li>
<ol>
<li>[popup]path/to/file2.mp4</li>
</ol>
<li>Call to action 3</li>
<ol>
<li>[popup]path/to/file3.mp4</li>
</ol>
...
はJQuery:HTMLで
$(document).ready(function(){
var num = 0;
//Find [popup] instances, increment the number
$("li:contains('[popup]')").each(function() {
var nextnumber = num++;
//add a general and a unique class to the list item containing the hook
$(this).addClass('popup' + ' ' + 'pop' + nextnumber);
//Split on the hook, and save remainder of text (the path to file) as the 'path' attr
var splitpath = $(this).text().split("[popup]");
$(this).attr("path", splitpath[1]);
var path = $(this).attr("path");
//alert($(this).attr("path"));
//Get the previous list item (the call to action), and give it general and unique classes also.
$thisArrow = $(this).parent().prev();
$thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber);
//Make the call to action an anchor link, with a general class identifier.
$thisArrow.wrapInner('<a class="opener" title="Click to view video" path ="' + path + '"/>');
//hide hooks
$('li.popup').parent().hide();
});
$('.opener').click(function() {
var Header = $(this).text();
var popupURL = $(this).attr("path");
var popupBG = "../contents/css/images/white-nontrans.jpg";
var thisDialog = $('<div></div>')
.html('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mediaplayer1" name="mediaplayer1" width="550" height="420"><param name="movie" value="../mediaplayer/player.swf"><param name="autostart" value="true"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="bgcolor" value="#FFFFFF"><param name="wmode" value="opaque"><param name="flashvars" value="file=' + popupURL + '&image=' + popupBG + '"><embed id="mediaplayer1" name="mediaplayer2" src="../mediaplayer/player.swf" width="550" height="420" allowfullscreen="true" allowscriptaccess="always" autostart="true" bgcolor="#FFFFFF" wmode="opaque" flashvars="file=' + popupURL + '&image=' + popupBG + '" /></object>')
.dialog({ close: function() { $(this).html(''); },autoOpen: false, title: Header, modal: true, maxHeight: 500, width:580 });
thisDialog.dialog('open');
return false;
})
});
所望の結果
<h3 class="arrow arr0 arr2 arr4 arr6 arr8 arr10">Title of list</h3>
<a class="opener" title="Click to view video" path ="path/to/file1.mp4" >
<a class="opener" title="Click to view video" path ="path/to/file2.mp4" >
<a class="opener" title="Click to view video" path ="path/to/file3.mp4" >
<ol>
<li>Call to action 1</li>
<ol>
<li>[popup]path/to/file1.mp4</li>
</ol>
<li>Call to action 2</li>
<ol>
<li>[popup]path/to/file2.mp4</li>
</ol>
<li>Call to action 3</li>
<ol>
<li>[popup]path/to/file3.mp4</li>
</ol>
...
私はそれがTinyMCEによって生成されたことに気づいた理由は何ですか。私はこれを変更することができなくなります(少なくとも、私は考えることはできません*私はできます...)。 – Eamonn
+1。セレクタ 'li:contains( '[popup]')'が親と子の 'li'の両方にマッチするので、OPはスクリプトを変更する必要があります。 –
TinyMCEを更新し、ネストされたリストの不適切なHTML出力を修正する 'lists'プラグインを初期化しました(なぜこれがコアにないのですか?)。これは、JQueryを微調整して問題を解決しました。 – Eamonn