decision-plugin-demos/dom/贴底隐藏的侧边栏.md

贴底隐藏的侧边栏

js

// 贴底隐藏的侧边栏
BI.Plugin.registerObject("dec.body", function (widget) {
    //  首先去掉主内容区的left值
    widget.element.css({
        left: 0
    });
});
BI.Plugin.registerObject("dec.menu", function (widget) {
    //  去掉menu的top值,bottom设置为0
    widget.element.css({
        top: "",
        left: "30%",
        right: "30%",
        bottom: 0,
        height: "10px",
        width: "auto",
        position: "fixed",
        zIndex: 1000000
    });
    //  绑定hover事件
    widget.element.hover(function () {
        widget.element.animate({height: "70px"});
    }, function () {
        widget.element.animate({height: "10px"});
    });

    //  讲容纳menu的容器变为flex盒子
    var wrapper = widget.element.children();
    wrapper.css({
        display: "flex",
        justifyContent: "space-around"
    });

    //  调整一下位置
    var children = widget.element.find(".dec-menu-button");
    children.each(function (index, button) {
        $(button).css({
            marginTop: -10
        });
    });
});

BI.Plugin.registerObject("dec.menu.button", function (widget) {
    //  移除menu状态线
    var line = widget.element.children(".menu-button-line");
    line.remove();
});

效果预览