幻蓝博客 – 孤月蓝风

追寻互联网科技、Unity开发、AR/VR开发、游戏开发、Web前后端开发等技术。

Semantic UI中Sidebar边栏禁止自动隐藏


最近学习了Semantic UI,准备使用这套响应式框架改版博客,但研究之后发现改动量过大,而且这套框架的css和js加起来有1M,过于庞大,使用components方式又过于繁琐,很多组件的样式涉及到多个文件,于是最终放弃了。

期间研究了一下Sidebar的使用方法,个人并不喜欢自动隐藏方式,而是点一下出现,再点一下收回,分享一下解决方案。

首先是引入Semantic UI框架文件:

<script src="jQuery.js"></script>
<link rel="stylesheet" href="semantic.css">
<script src="semantic.js"></script>

然后是我们的HTML:

<div class="ui left sidebar inverted vertical visible uncover menu">
    <a class="item"><i class="home icon"></i> Home </a>
    <a class="item"><i class="block layout icon"></i> Topics </a>
    <a class="item"><i class="smile icon"></i> Friends </a>
    <a class="item"><i class="calendar icon"></i> History </a>
</div>
<div class="pusher">
    <button class="ui primary button" onclick="toggle()">
        toggle
    </button>
</div>

之后你应该看到如下的页面:

QQ截图20160718192749.png

现在我们需要在JS中控制它的显示与隐藏了:

function toggle() {
    $('.ui.sidebar').sidebar({
        context: 'body',
        dimPage : false,
        onVisible: function() {
            $('body').click(function(e){
                this.unbind(e);
            });
        },
        onShow: function() {
            $('.ui.sidebar').css("z-index",999);
        },
        onHide: function() {
            $('.ui.sidebar').css("z-index",1);
        }
    }).sidebar('toggle');
}

第一个 sidebar() 中进行了一些设置:

context:需要显示 sidebar 的容器的选择器

dimPage:sidebar 显示后是否对页面进行遮罩处理

onVisible:这里在 sidebar 开始显示后,取消 body 标签的 click 事件绑定,这样点击页面的任何区域后 sidebar 就不会自动隐藏了。

onShow:处理阴影效果的 z-index。

onHide:处理阴影效果的 z-index。

第二个 sidebar() 就是对侧边栏的切换操作了。

现在当点击 toggle 按钮后,点击页面其他区域 sidebar 就不会自动隐藏了。