最近小颖接了个私活，客户要求用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');

    })

巴特西

jquery+bootstrap学习笔记

1.动态加载html文件

2.语音播报文字、暂停播报

当切换菜单时需判断当前是否在播放

点击播放图标开始播放文字并切换图标

默认：

点击后：

3.使用 $(document).load("dropdown.html"); 动态加载的元素，要给其子元素添加点击事件时使用以下方法是不可行的：

方法一：

方法二：

4.bootstrap 导航切换标记当前菜单

5.bootstrap工具提示框显、隐

最新文章

热门文章