jQuery 与 bootstrap 3 css 一起使用的滑动覆盖面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22186617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sliding overlay panel that works with bootstrap 3 css
提问by sksallaj
I've been endlessly searching for a sliding overlay panel using jquery that doesn't destroy my bootstrap 3 css file. But I can't find any. I need a panel that is like a form, has dropdowns, selectable grids, input boxes, etc.. and anything I do on this menu panel will refresh the content panel automatically; but in my case it's not really considered a "menu", its just a sliding or pop-out form that you can fill out.
我一直在使用 jquery 无休止地寻找一个不会破坏我的 bootstrap 3 css 文件的滑动覆盖面板。但我找不到任何。我需要一个像表单一样的面板，有下拉菜单、可选择的网格、输入框等等。我在这个菜单面板上做的任何事情都会自动刷新内容面板；但就我而言，它并没有真正被视为“菜单”，它只是一个您可以填写的滑动或弹出表单。
I've searched this site:
我搜索过这个网站：
http://designhuntr.com/15-slide-panel-jquery-plugins/
http://designhuntr.com/15-slide-panel-jquery-plugins/
And not a single one gave me what I wanted. I need a sliding panel that comes from the left, filled up with forms (like bootstrap accordion, select2 dropdown).
没有一个人给了我想要的东西。我需要一个从左边来的滑动面板，里面装满了表格（比如引导手风琴，select2 下拉菜单）。
The first link gave exactly what I wanted, but rendering the content of my bootstrap css came into heavy conflict and was rendered useless.
第一个链接正是我想要的，但是渲染我的引导 css 的内容遇到了严重的冲突并且变得毫无用处。
The most perfect example I was able to find is located here:
我能找到的最完美的例子位于这里：
http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/#
http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/#
When you click the overlay button; it does exactly what I needed in terms of functionality.
当您单击叠加按钮时；它完全符合我在功能方面的需求。
But using this library also conflicts with bootstrap. I've tried 5 different libraries, all ending in failure. It just seems that a simple idea such as this could have had some kind of leeway by now.
但是使用这个库也会和 bootstrap 冲突。我尝试了 5 个不同的库，都以失败告终。看起来像这样的简单想法现在可能有某种回旋余地。
If anyone has had any kind of success, I'd love to hear it. Otherwise I'm all out of options at this point.
如果有人取得了任何成功，我很乐意听到。否则，我现在别无选择。
[Edit 6/17/2014] A big requirement for me is to have a button that is kept static, it doesn't move with the sliding panel. I didn't want the user to move the button every time the user slid a panel out. I also needed this functionality to exist for ie7+. I want to have more control over what is moving, want is sliding, the effects, everything. Not a total 100% full slide.
[编辑 6/17/2014] 对我来说一个很大的要求是有一个保持静止的按钮，它不会随着滑动面板移动。我不希望用户每次滑出面板时都移动按钮。我还需要为 ie7+ 提供此功能。我想对移动的东西有更多的控制，想要的是滑动，效果，一切。不是 100% 完整的幻灯片。
采纳答案by sksallaj
After exhausting my brain and time into this, found out that most 3rd party apps for sliding panels doesn't do cross browser support very well. Some says they do, but when you check out the demos, it clearly doesn't. So what I did was replicated the project by including jquery.ui and simply added in the features myself.
在用尽我的大脑和时间之后，发现大多数用于滑动面板的第 3 方应用程序并不能很好地支持跨浏览器。有人说他们有，但当你查看演示时，显然没有。所以我所做的是通过包含 jquery.ui 复制该项目，并简单地自己添加功能。
I used toggle, with "drop" selected. This mimics the sliding in from the left side of the window. Works in IE7+ and chrome.
我使用了切换，选择了“drop”。这模仿了从窗口左侧滑入。适用于 IE7+ 和 chrome。
I made my div content as "position:fixed"; for my purposes I like this because I have control over whether I want to do an overlay or if I want my content to be pushed.
我将我的 div 内容设为“位置：固定”；出于我的目的，我喜欢这个，因为我可以控制是否要进行叠加或是否要推送我的内容。
Then with that div content in place, I can then add an jquery's "animate" function and have it slide to whatever position I want.
然后有了那个 div 内容，我就可以添加一个 jquery 的“动画”功能，让它滑动到我想要的任何位置。
https://api.jquery.com/animate/
https://api.jquery.com/animate/
In time, I'll create my own library that beats out everyone else's with as little css styling as possible. But for now, I just need to wrap my stuff up.
随着时间的推移，我将创建自己的库，以尽可能少的 css 样式击败其他所有人。但现在，我只需要收拾我的东西。
EDIT: 6/17/2014- This was implemented almost a few days after I posted the answer up here Here's my code I implemented using jquery ui: mind you, twitter bootstrap doesn't interfere with this code since its purely used as css at this point.
编辑：2014年6 月 17 日- 这是我在此处发布答案后近几天实现的这是我使用 jquery ui 实现的代码：请注意，twitter bootstrap 不会干扰此代码，因为它纯粹用作 css这点。
components used:
使用的组件：
- A button for toggling the sliding, i gave it an id="button".
- A div panel with id="effectMenu"
- This is responsible for the menu sliding and fading away
- A div panel with id="effectContent" (shown right next to effectMenu)
- When the menu slides and fades, this slides into the empty space
- When the menu slides and returns, this slides and allows the menu to come back
- A hidden input box with id="positionOfEffect"
- Used for determining where the content should slide to
- A hidden input box with id="didContentSlide"
- Holds a boolean value: true if content moved to new position, false if it went back to original state
- 一个用于切换滑动的按钮，我给了它一个 id="button"。
- 一个带有 id="effectMenu" 的 div 面板
- 这负责菜单滑动和消失
- 带有 id="effectContent" 的 div 面板（显示在 effectMenu 旁边）
- 当菜单滑动并消失时，它会滑入空白区域
- 当菜单滑动并返回时，此滑动并允许菜单返回
- 一个带有 id="positionOfEffect" 的隐藏输入框
- 用于确定内容应该滑到哪里
- 一个带有 id="didContentSlide" 的隐藏输入框
- 保留一个布尔值：如果内容移动到新位置，则为 true，如果返回到原始状态，则为 false
So you get something like this:
所以你会得到这样的东西：
<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" />
Now the jquery code:
现在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 hiHyman 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;
});
