jquery+bootstrap學習筆記
最近小穎接了個私活，客戶要求用jquery和bootstrap來實現業務需求，小穎總結了下在寫的過程中的一下坑，來記錄一下
1.動態加載html文件
switch (_domName) { case 'firstMenu': // 首頁 $("main").load('home.html'); break case 'secondMenu': // 下拉菜單 $("main").load("dropdown.html"); break case 'thirdMenu': // 工具提示框 $("main").load("tooltips.html"); break }
2.語音播報文字、暫停播報
function soundSpeak(text) { const msg = new SpeechSynthesisUtterance(); msg.text = text; //播放文案 msg.volume = '1'; // 聲音的音量，區間範圍是0到1，默認是1。 msg.rate = '1'; // 語速，數值，默認值是1，範圍是0.1到10，表示語速的倍數，例如2表示正常語速的兩倍。 msg.pitch = '0'; // 表示說話的音高，數值，範圍從0（最小）到2（最大）。默認值為1。 msg.lang = 'zh-cn'; // 使用的語言，字符串， 例如："zh-cn" return msg; } var sound = window.speechSynthesis; // 定義局部變量 //播放 function playText(text) { sound.speak(soundSpeak(text)); } //停止 function stopSpeak() { $('.open_voice').removeClass('active'); $('.open_voice').attr("src", 'img/horn.png'); sound.cancel(); }
當切換菜單時需判斷當前是否在播放
if (sound.speaking) { stopSpeak(); }
點擊播放圖標開始播放文字並切換圖標
// 語音播放文字 $("main").delegate("img.open_voice", "click", function () { //delegate給後加的節點綁定事件 if ($(this).hasClass('active')) { stopSpeak(); } else { $(this).addClass('active'); $(this).attr("src", 'img/horn_close.png'); playText($('.txt-box').text()); } });
默認：
點擊後：
再次點擊後圖標變成默認狀態
3.使用 $(document).load(“dropdown.html”); 動態加載的元素，要給其子元素添加點擊事件時使用以下方法是不可行的：
$('img.open_voice').click(function(){
})
需使用以下放發才能綁定其點擊事件：
方法一：
$("main").delegate("img.open_voice", "click", function () { //delegate給後加的節點綁定事件
});
方法二：
$(document).on("click", "img.open_voice", function () { //給後加的節點綁定事件
alert(111111)
});
4.bootstrap 導航切換標記當前菜單
// 切換一級菜單 $('p.nav-link').click(function () { var _childMenu = $('.dropdown-item.menu-child.active').attr('name'); var _domName = $(this).attr('name'); // 切換菜單時移除上一個菜單的子菜單選中類名 if (_childMenu && _domName && _childMenu != _domName) { $('.dropdown-item.menu-child').removeClass('active'); } $('p.nav-link.active').removeClass('active'); $(this).addClass('active'); if (sound.speaking) { stopSpeak(); } switch (_domName) { case 'firstMenu': // 首頁 $("main").load('home.html'); break case 'secondMenu': // 下拉菜單 $("main").load("dropdown.html"); break case 'thirdMenu': // 工具提示框 $("main").load("tooltips.html"); break } });
5.bootstrap工具提示框顯、隱
點自己顯示，點其他地方隱藏
$('body').click(function () {
$("[data-toggle='popover']").popover('hide');
})
// 提示框點擊事件
$("main").delegate(".tooltips-box span", "click", function (e) {
e.stopPropagation();
$('.tooltips-box span').removeClass('active_toggle');
$(this).addClass('active_toggle');
$("[data-toggle='popover']").popover('hide');
$(this).popover('show');
})
