jquery – 与bootstrap 3 css一起使用的滑动覆盖面板

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

我搜索过这个网站：

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

没有一个人能给我我想要的东西.我需要一个左侧的滑动面板,填充表格(如bootstrap accordion,select2 dropdown).

第一个链接给出了我想要的,但渲染我的bootstrap css的内容陷入了严重的冲突,并且变得毫无用处.

我能找到的最完美的例子就在这里：

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

单击叠加按钮时;它完全符合我在功能方面的需求.

但是使用这个库也与bootstrap冲突.我尝试了5个不同的库,都以失败告终.似乎这样一个简单的想法本来可以有某种余地.

如果有人取得任何成功,我很乐意听到.否则我在这一点上都没有选择.

[编辑2014年6月17日]
对我来说一个重要的要求就是让一个保持静止的按钮,它不随滑动面板移动.每次用户滑出面板时,我都不希望用户移动按钮.我还需要为ie7存在此功能.我想要更多地控制什么是移动,想要滑动,效果,一切.不是完全100％完全幻灯片.

解决方法

在耗尽我的大脑和时间之后,发现大多数第三方应用程序的滑动面板都不能很好地跨浏览器支持.有些人说他们这样做,但是当你查看演示时,它显然没有.所以我所做的是通过包含jquery.ui来复制项目,并且我自己简单地添加了这些功能.

http://jqueryui.com/toggle/

我用过切换,选中“drop”.这模仿了从窗口左侧滑入.适用于IE7和Chrome.

我把我的div内容改为“position：fixed”;为了我的目的,我喜欢这个,因为我可以控制是否要进行叠加或者是否希望我的内容被推送.

然后使用该div内容,我可以添加一个jquery的“animate”函数,并将其滑动到我想要的任何位置.

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

随着时间的推移,我将创建自己的库,以尽可能少的CSS样式击败其他人.但就目前而言,我只需要把我的东西包起来.

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

使用的组件：

>一个用于切换滑动的按钮,我给它一个id =“按钮”.
> 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;
});