个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
环境:Electron 桌面单页应用
我有一个项目，我想在其中使用两个 Semantic UI 侧边栏方案。一次只能看到一个方案。我看过这个较早的问题( Semantic-UI: Two Sidebars Conflict, Only One at a Time? ) 但它只部分回答了我的问题。
做一个简单的测试，将每个侧边栏方案包装在 div 中，我收到了一些 Semantic UI 警告(“必须移动侧边栏。为了优化性能确保侧边栏和推送器是你的 body 标签的直接 child ”)。在我继续之前，谁能告诉我下面的结构是否可行，或者是否有其他推荐的方法来解决这个问题？
我将根据用户交互显示/隐藏这些“层”——这两个层都需要语义侧边栏功能。
<body>
<div id="LAYER-1" class="ui sidebar inverted vertical menu">
<!-- ************** Sidebar content ************* !-->
</div>
<div class="pusher">
<!-- ************** Layer content ************* !-->
</div>
<div id="LAYER-2" class="ui sidebar inverted vertical menu">
<!-- ************** Sidebar content ************* !-->
</div>
<div class="pusher">
<!-- ************** Layer content ************* !-->
</div>
</body>
最佳答案
我能够通过为 Semantic 侧边栏设置 context 来解决这个问题。这个答案 ( Semantic-ui - how to use sidebar in only part of a page? (ie with context) ) 有助于阐明如何指定 context 比 example 更好在 Semantic 文档中
所以我最终得到的结果是:将每个“侧边栏集”包装在一个带有 ID 的 div 中，然后将该 div 指定为 context。 “层”div 具有显示/隐藏最顶层的按钮。没有收到任何关于设置的语义警告。
JS
$('#briefcaseExample .ui.sidebar')
.sidebar({
context: $('#briefcaseExample')
})
.sidebar('setting', 'transition', 'push')
$('#timelineExample .ui.sidebar')
.sidebar({
context: $('#timelineExample')
})
.sidebar('setting', 'transition', 'push')
HTML
<body onload="onLoadApp()">
<div id="briefcaseExample">
<div class="ui sidebar inverted vertical menu">
<!-- ************** Sidebar content ************* !-->
<div id="sidebarTree" style="height: 100%;"></div>
</div>
<!-- ************** End Sidebar content ************* !-->
<div class="pusher">
<!-- ************** Site content ************* !-->
<div id="solidBlue"></div>
<div id="container" width="100%" height="100%">
<canvas id="c" width="100%" height="100%"></canvas>
</div>
<div class="briefcaseSidebarToggle">
<i class="big sidebar icon grey" onclick="toggleMenu()"></i>
</div>
<div class="briefcaseClose">
<i class="big remove circle icon grey" onclick="hideBriefcase()"></i>
</div>
<!-- ************** End Site content ************* !-->
</div>
</div>
<div id="timelineExample">
<div class="ui sidebar inverted vertical menu">
<!-- ************** Sidebar content ************* !-->
<div id="timelineSidebar" style="height: 100%;"></div>
</div>
<!-- ************** End Sidebar content ************* !-->
<div class="pusher">
<!-- ************** Site content ************* !-->
<div class="timelineSidebarToggle">
<i class="big sidebar icon grey" onclick="toggleTimelineMenu()"></i>
</div>
<!-- ************** End Site content ************* !-->
<div id="solidColor">
<button onclick="showBriefcase()">Show Briefcase</button>
</div>
</div>
</div>
</body>
关于javascript - 页面上 "layers"中的两个语义侧边栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52359491/
25
4
0
我正在尝试提升我的 javascript 编程技能(或者说我的编程技能时期 :)) 所以我试图理解一些语义: 第一行的“?”是什么意思？均值和“-distance”中的减号 第二行中的“+=”或“-=
我正在尝试在语义 UI 中执行复选框，但它不起作用，我无法弄清楚我做错了什么。 我包括jquery、semantic.min.js、checkbox.js 和semantic.min.css，然后我添
我正在构建一个 Spring 后端。我有一个 Controller ，它获取一个“搜索对象” - 一个具有 10 个字段的对象，其中只有一个应该被填充，所以搜索功能(我没有编写，但需要对其进行更改和重
我面临着编写更智能/高级的“相关内容”算法的挑战，并且不知道从哪里开始，所以我决定提出一个问题，是否有人会指出我正确的方向。 我们的数据库包含很多文章，到目前为止，我们使用关键字/标签查询了相关文章，
我正在尝试将通用字符串写入Rust中的数字函数，其中支持的类型为i16，i32，i64，u32，u64，f32和f64。 最初我有这个: fn str_to_num(s: &str, default_
假设我们在 hpp 文件中有一个带有唯一指针的简单结构: struct SomeType { SomeType() = default; ~SomeType(); st
这是同一预处理指令的多个问题。 1 - <> 还是 ""？ 除了在 MSDN 中找到的信息: #include Directive (C-C++) 1.a:这两种符号有什么区别？ 1.b:所有编译器都
所以基本上我有一个带有列表的简单系统，当我选择一个项目时，它会显示描述和绑定(bind)到该项目的图像。 项目:https://jsfiddle.net/jhnjcddh/2/ 问题是我需要在 JS
很抱歉问了一个愚蠢的问题，但有人能告诉我以下是什么意思吗 for ctype, (codename, name) in searched_perms: 我不明白括号里是怎么回事。 for ctype
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Why do all these crazy function pointer definitions al
我正在学习 HTML5，并获得了一个将 CSS Zen Gardens 转换为 HTML5 语义版本的项目。我已经能够轻松地转换其中的大部分内容，但是底部的链接/导航给我带来了一些问题。 转换此/处理
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
我一直在我的 emacs c/c++ 开发设置中试验 cedet 和语义，除了一个小细节外，我对它非常满意。 我使用 ede-cpp-root-project 创建一个项目，并给出我的项目的根目录以及
引用问题自http://www.garfieldtech.com/blog/put-up-with-put (这是针对 Drupal 开源项目的，有点元，因为这里没有代码): GET、HEAD 和 P
我有以下代码。 let v_blue = UIView() v_blue.backgroundColor = UIColor.blueColor() l
我目前正在 objc.io 上阅读优秀的 Advanced Swift 书籍，但遇到了一些我不明白的问题。 如果您在操场上运行以下代码，您会注意到在修改字典中包含的结构时，下标访问会生成一个副本，但随
谁能给我一个关于 Flutter 上下文中语义概念的清晰解释(或链接)(它实际上是什么，何时使用，更新...)？ 我在谷歌上搜索了很多，但到目前为止还没有找到任何好的解释。 非常感谢， 最佳答案 Di
这是我的代码 Was this what you wanted? It's good to see you again.
我有一个侧边栏，其中包含应用程序的主导航。它还包含一个 button 触发侧边栏的打开/关闭。在语义方面，标记应该是什么样的？ 我应该把侧边栏放在一边，然后只在周围设置导航吗主导航，不包括打开/关闭触
考虑下面这行 Lisp 代码: (some-function 7 8 | 9) ;; some comment. note the extra indentation 该点位于“8”和
我是一名优秀的程序员,十分优秀！