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');
    })