0
我有一個jquery UI對話框,它顯示在按鈕單擊上。這個對話框包含三個按鈕(字體超棒的圖標),當點擊任何一個按鈕時,一系列的文字都會遍歷,依次突出顯示每個單詞並播放相關的音頻文件。當單擊對話框中的三個按鈕之一時,對話框需要關閉(或隱藏),以便用戶可以在底層頁面上看到單詞列表。這部分工作正常,但我發現困難的是如何禁用控制對話框的任何一個單詞列表正在播放時按鈕。這是防止同時播放多個單詞列表所必需的。我曾嘗試使用標誌 - rpt_dlog_run - 但我無法獲得正確的邏輯,我認爲這可能是錯誤的方法。下面是HTML:禁用jQuery UI對話框
<div id="ws_title"><p class="title_items">Word Set 1
<a class="btn_repeat" href="#"><span class="fa fa-repeat fa_repeat_ws"></span></a>
和jQuery代碼:
jQuery(document).ready(function() {
var rpt_dlog_run = false;
var ws_repeat_dlog = jQuery("div#ws_repeat_dialog").dialog({
autoOpen: false,
modal: true,
position: "center",
resizable: false,
dialogClass: "ws_repeat",
draggable: false,
create: function() {
jQuery(this).parents(".ui-dialog")
.css("border", "1px solid #0000C6")
/* ..... various other css settings ..... */
.find(".ui-dialog-header")
.css("display","none")
.css("font-size", "1.2em");
}
});
jQuery("a.btn_repeat").on("click", function(evnt) {
div#ws_title
if(!rpt_dlog_run) {
evnt.stopPropagation();
ws_repeat_dlog.dialog("open");
var modal_content ='<div id="ws_repeat_modal">
/* .... content of dialog html ....*/
</div>';
ws_repeat_dlog.append(modal_content);
jQuery("p#ws_rpt1").on("click", function (evnt) { // NB needs to be changed, move to dialog box
rpt_dlog_run = true;
evnt.stopPropagation();
ws_repeat_dlog.dialog("close");
var engWords = jQuery("span.audio"),
pathVar = document.getElementById("pathVar").innerHTML,
audioElement = document.createElement("audio"),
audioType = Modernizr.audio.ogg? ".ogg": ".mp3",
i = 0;
audioPlay(i);
audioElement.addEventListener("ended", function() {
i = i + 2; //i++; this is a real kludge, but it will do to save time
if (i < 100) {
jQuery.doTimeout(1500, function() {
audioPlay(i);
});
}
});
function audioPlay(i) {
var wordList = jQuery("span#"+engWords[i].id),
audioPath = pathVar+engWords[i].id+audioType;
wordList.addClass("set_font_green");
audioElement.src = audioPath;
audioElement.play();
jQuery.doTimeout(1500, function() {
wordList.removeClass("set_font_green");
});
}
rpt_dlog_run = false;
});
}
});
/* before closing, empty contents of dialog to avoid content repetition */
ws_repeat_dlog.dialog({
beforeClose: function() {
ws_repeat_dlog.empty();
}
});
rpt_dlog_run = false;
});
任何幫助將是非常受歡迎的。