9

我一直在无休止地寻找一个使用 jquery 的滑动覆盖面板，它不会破坏我的 bootstrap 3 css 文件。但我找不到任何东西。我需要一个像表单一样的面板，有下拉菜单、可选网格、输入框等。我在这个菜单面板上所做的任何事情都会自动刷新内容面板；但就我而言，它并不是真正的“菜单”，它只是一个可以填写的滑动或弹出表单。

我搜索过这个网站：

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

没有一个人给了我我想要的东西。我需要一个来自左侧的滑动面板，里面填满了表格（如 bootstrap 手风琴，select2 下拉菜单）。

第一个链接正是我想要的，但是渲染我的引导 css 的内容遇到了严重的冲突并且变得无用。

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

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

当您单击叠加按钮时；它在功能方面完全符合我的需要。

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

如果有人取得了任何成功，我很想听听。否则我在这一点上没有选择。

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

4

1 回答 1

4

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

http://jqueryui.com/toggle/

我使用了切换，选择了“drop”。这模仿了从窗口左侧滑入。适用于 IE7+ 和 chrome。

我将我的 div 内容设置为“位置：固定”；出于我的目的，我喜欢这样，因为我可以控制是否要进行叠加或是否要推送我的内容。

然后有了那个 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;
});
于 2014-03-05T18:54:04.773 回答