Semantic UI 侧边栏实现

Question

Semantic UI 侧边栏实现

4

你好，我该怎样实现semantic ui的侧边栏？我想使用列表中的第一个示例。 http://semantic-ui.com/modules/sidebar.html#/definition 我尝试复制整个div部分并将其放在我的html上。对于JavaScript（？不是很确定），

$('.left.demo.sidebar')
.sidebar('toggle')
;

我尝试将它放在按钮的 onclick 事件中，并使用函数来调用 href，但侧边栏没有显示。我做错了什么。

- Ziddorino

2个回答

0

当您将jQuery添加到项目中时，您可以通过将以下代码添加到.js文件来触发侧边栏：

$('.element.to.trigger.sidebar').on('click', function () {
   $('.left.demo.sidebar')
      .sidebar('toggle');
});

- Kacper Tylenda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Verhaeren · Accepted Answer

您需要在页面的<head></head>部分包含jQuery库：

<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>

还有semantic.js文件：

<script language="javascript" src="[your path here]/semantic.js"></script>

你需要从以下链接下载：

http://semantic-ui.com/

(它位于 dist 文件夹内。将该文件复制到所需位置并使用正确的路径填充 src)

在 <HEAD></HEAD> 标签之间：

<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script language="javascript" src="[your path here]/semantic.js"></script>

<script type="text/javascript">

    $(document).ready(function() {
        $('.left.demo.sidebar').sidebar('toggle');
    });

</script>