jquery - 与 bootstrap 3 css 配合使用的滑动覆盖面板

Question

我一直在无休止地寻找一个使用 jquery 的滑动覆盖面板，它不会破坏我的 bootstrap 3 css 文件。但我找不到任何。我需要一个类似于表单的面板，具有下拉菜单、可选择的网格、输入框等。我在此菜单面板上执行的任何操作都会自动刷新内容面板；但就我而言，它并不是真正被视为“菜单”，它只是一个您可以填写的滑动或弹出表单。

我搜索过这个网站:

http://designhuntr.com/15-slide-panel-jquery-plugins/

没有一个能给我我想要的东西。我需要一个来自左侧的滑动面板，其中填满了表单(例如 bootstrap Accordion 、select2 下拉菜单)。

第一个链接给出了我想要的内容，但是渲染我的 bootstrap css 内容遇到了严重冲突，并且变得毫无用处。

我能找到的最完美的例子位于这里:

http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/#

当您点击叠加按钮时；它在功能方面完全满足了我的需要。

但是使用这个库也和bootstrap有冲突。我尝试过 5 个不同的库，但都以失败告终。看起来像这样的简单想法现在可能有某种回旋余地。

如果有人取得了任何成功，我很乐意听到。否则我现在别无选择。

[编辑 2014 年 6 月 17 日]对我来说，一个很大的要求是有一个保持静态的按钮，它不会随着滑动面板移动。我不希望用户每次滑出面板时都移动按钮。我还需要 ie7+ 存在此功能。我想要对正在移动的东西有更多的控制，想要的是滑动，效果，一切。幻灯片并非 100% 完整。

Answer 1

在耗尽我的大脑和时间之后，发现大多数用于滑动面板的第三方应用程序都不能很好地支持跨浏览器。有人说可以，但当你查看演示时，你会发现事实显然并非如此。因此，我所做的就是通过包含 jquery.ui 来复制该项目，并自己简单地添加功能。

http://jqueryui.com/toggle/

我使用了切换按钮，并选择了“drop”。这模仿了从窗口左侧滑入的情况。适用于 IE7+ 和 Chrome。

我将 div 内容设置为“position:fixed”；就我的目的而言，我喜欢这个，因为我可以控制是否要进行叠加或是否要推送我的内容。

然后，有了该 div 内容，我就可以添加 jquery 的“动画”函数并让它滑动到我想要的任何位置。

https://api.jquery.com/animate/

随着时间的推移，我将创建自己的库，以尽可能少的 CSS 样式击败其他人的库。但现在，我只需要把我的东西包起来。

编辑:2014年6月17日 - 这是在我在这里发布答案几天后实现的这是我使用 jquery ui 实现的代码:请注意，twitter bootstrap 不会干扰此代码，因为此时它纯粹用作 css。

使用的组件:

• 一个用于切换滑动的按钮，我给了它一个 id="button"。
• id=“effectMenu”的 div 面板
  • 这负责菜单滑动和消失
• id="effectContent"的 div 面板(显示在effectMenu 旁边)
  • 当菜单滑动并淡出时，它会滑入空白区域
  • 当菜单滑动并返回时，this 滑动并允许菜单返回
• id=“positionOfEffect”的隐藏输入框
  • 用于确定内容应滑动到的位置
• 隐藏的输入框，id="didContentSlide"
  • 保存一个 bool 值:如果内容移动到新位置，则为 true；如果返回到原始状态，则为 false

所以你会得到这样的结果:

<button type="button" id="button" class="btn btn-default btn-lg" />
<div class="row">
    <div id="effectMenu" class="col-md-4">
        ...
    </div>
    <div id="effectContent" class="col-md-4">
        ...
    </div>
</div>
<input id="positionOfEffect" type="hidden" />
<input id="didContentSlide" type="hidden" />

现在是 jquery 代码:

$('body').on('click', '#button', function (e) {
    e.preventDefault();

    //position of the effect menu
    var positionOfEffectMenu = $("#positionOfEffectMenu").val();

    //gets the value of whether or not the content slide to the new position
    //true if it did, false if it returned back to the original position
    var didContentSlide = $("#didContentSlide").val();

    //starting position of everything, capture the current state at this point
    //this is the page load set up
    if (positionOfEffectMenu == "") {
        //mimic the behavior of md-col-4 (33.333333% of screen)
        $("#positionOfEffect").val((($(".row").width() * 0.33333333)));
        $("#didContentSlide").val(false);
        positionOfEffectMenu = $("#positionOfEffectMenu").val();
        didContentSlide = $("#didContentSlide").val();
    }

    /**
     *   How far we want the transition to occur for the sliding content.
     *   The divided by 2 means, we're only going to be moving half the 
     *   distance of the menu's width while the menu disappears.
     *   In my page, this makes a very space-friendly behavior
     *   originally the menu is all the way to the far right, and I have content
     *   next to it if I'm bringing the menu out, I dont want the content 
     *   page to swing all the way to where the menu is, I want it to move
     *   just a bit so that it can fill up the space and look good for the user
     *   to focus in on.
     */
    positionOfEffect = parseFloat(positionOfEffectMenu) / 2;
    didContentSlide = didContentSlide == "true"; //turns string to bool value

    //I disable my button as its sliding otherwise if the user frantically clicks
    //it will intercept the positions and hijack the animation
    //it gets re-enabled later in this code
    var $elt = $(this).attr('disabled', true);

    //begin the animation

    //Now.. move the effect content to the new position
    //or if it is already at the new position, move it back to where it was before
    $("#effectContent").animate({
        left: (!didContentSlide) ? "-=" + (positionOfEffect) + "px" : "+=" + (positionOfEffect) + "px"
    }, 500, function () {

    })
    //as the content is going in, drop the effectMenu out of the page
    //or if the content is going back out, bring the effectMenu into the page
    .queue(function () {
        $("#effectMenu").toggle("drop", {}, 500);
    }).dequeue();

    //this is for the button.. its re-enabled when everything stops moving
    setTimeout(function () {
        $elt.attr('disabled', false);
    }, 500);

    //update the value of whether or not the contents slid into the new position
    didContentSlide = (!didContentSlide);
    $("#didContentSlide").val(didContentSlide);

    //override the defaults of the button
    return false;
});