代码之家 › 专栏 › 技术社区 › spring

在一个页面的“层”中有两个语义侧边栏?

semantic-ui javascript

spring · 技术社区 · 7 年前

环境:电子桌面单页应用

我有一个项目,我想用两个 Semantic UI 侧边栏。一次只能看到一个方案。我以前见过这个问题( Semantic-UI: Two Sidebars Conflict, Only One at a Time?

做一个简单的测试,将每个侧边栏方案包装在一个 div ,我吃了一些 语义用户界面 警告( “不得不移动侧边栏。为了获得最佳性能,请确保侧边栏和推送器是您的body tag的直接子对象”

我将根据用户交互显示/隐藏这些“层”这两个层都需要语义侧边栏特性。

  <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>

1 回复 | 直到 7 年前

spring 7 年前

我通过设置 context Semantic 侧边栏。这个答案( Semantic-ui - how to use sidebar in only part of a page? (ie with context) )帮助澄清如何指定稍微好一点 example 在文件

上下文 语义的 有关设置的警告。

$('#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>