滑动覆盖面板,与bootstrap 3 css一起使用

Question

我一直在寻找一个使用jquery的滑动覆盖面板,它不会破坏我的bootstrap 3 css文件.但我找不到任何东西.我需要一个类似于表单,下拉菜单,可选网格,输入框等的面板.我在此菜单面板上执行的任何操作都将自动刷新内容面板; 但在我的情况下,它并不是真正的"菜单",它只是一个滑动或弹出窗口,你可以填写.

我搜索过这个网站:

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

没有一个人能给我我想要的东西.我需要一个左侧的滑动面板,填充表格(如bootstrap手风琴,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 旁边）
  • 当菜单滑动和淡出时，它会滑入空白区域
  • 当菜单滑动并返回时，此滑动并允许菜单返回
• id="positionOfEffect" 的隐藏输入框
  • 用于确定内容应该滑动到哪里
• id="didContentSlide" 的隐藏输入框
  • 保存一个布尔值：如果内容移动到新位置则为 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;
});