Spring Boot实训开发个人博客5

二、页面插件集成

（二）博客详情页

修改了插入的内容，添加了侧边游标（目录，留言，二维码）以及游标的效果，还添加了滚动。

• 图标框一直浮动在右侧

<div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
        <div class="ui vertical icon buttons">
            <button type="button" class="ui toc teal button">目录</button>
            <a href="#comment-container" class="ui teal button">留言</a>
            <button class="ui wechat icon button"><i class="weixin icon"></i></button>
            <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
        </div>
    </div>

• sprict代码：里面有目录，二维码，滚动的实现的形式，

<script>

        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });

        $('#payButton').popup({
            popup: $('.payQR.popup'),
            on: 'click',
            position: 'bottom center'
        });

        tocbot.init({
            // Where to render the table of contents.
            tocSelector: '.js-toc',
            // Where to grab the headings to build the table of contents.
            contentSelector: '.js-toc-content',
            // Which headings to grab inside of the contentSelector element.
            headingSelector: 'h1, h2, h3',
            // For headings inside relative or absolute positioned containers within content.
            //hasInnerContainers: true,
        });

        $('.toc.button').popup({
            popup: $('.toc-container.popup'),
            on: 'click',
            position: 'left center'
        });

        $('.wechat').popup({
            popup: $('.wechat-qr'),
            // on: 'click',
            position: 'left center'
        });

        var grcode = new QRCode("qrcode", {
            text: "http://jindo.dev.naver.com/collie",
            width: 110,
            height: 110,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });

        $('#toTop-button').click(function () {
            $(window).scrollTo(0,500);
        });

        var waypoint = new Waypoint({
            element: document.getElementById('waypoint'),
            handler: function(direction) {
                if (direction == 'down') {
                    $('#toolbar').show(100);
                } else {
                    $('#toolbar').hide(500);
                }
                console.log('Scrolled to waypoint!' + direction);
            }
        });
    </script>

• 效果页面：