右侧的滑动面板，就像现有顶部的滑动面板一样(sliding panel on right-hand side, like existing one at top)
我现有的HTML / CSS / JavaScript适用于从页面顶部“点击打开”滑动面板，如下所示：
<div id="machineSelectorContainer"> <div id="machineSelectorTray"> <table id="machineSelector"> <tr id="machineSelectorThumbnailTextRow"> <td class="machineSelectorThumbnailText">VM1</td> <td class="machineSelectorThumbnailText">VM2</td> </tr> <tr> <td class="machineSelectorThumbnailPicture"> <img src="images/placeholderThumbnail.png" /> </td> <td class="machineSelectorThumbnailPicture"> <img src="images/placeholderThumbnail.png" /> </td> </tr> </table> </div> <div id="machineSelectorThumb"> <div id="machineSelectorThumbText"> ••• </div> </div> </div>同
*, body { margin: 0; height: 100%; } #machineSelectorContainer { width: 100%; height: 150px; text-align: center; z-index: 100; position: absolute; top: -120px; } #machineSelectorThumb { width: 60px; height: 30px; line-height: 30px; font-family: sans-serif; font-size: 12pt; text-align: center; position: relative; top: 120px; border: 1px solid; background-color: lightblue; -ms-opacity: 0.4; opacity: 0.4; margin: auto; z-index: 100; } #machineSelectorTray { position: absolute; height: 120px; z-index: 100; margin: auto; left: 50%; } #machineSelector { background-color: lightblue; font-family: sans-serif; font-size: 8pt; text-align: center; position: relative; left: -50%; margin: 0; padding: 0; height: 120px; border: 1px solid black; } #machineSelector > table { height: auto; } #machineSelectorThumbnailTextRow { height: auto; } .machineSelectorThumbnailPicture > img { width: 100px; border: 1px solid black; height: auto; } .machineSelectorThumbnailText { position: relative; bottom: 0; width: 100px; height: 20px; line-height: 20px; }和
$("#machineSelectorThumb").click(function () { var element = $("#machineSelectorContainer"); var currentTop = element.offset().top; var newTop = -(currentTop + 120); element.animate({ top: newTop }, 200, function () { }); });（我在http://jsfiddle.net/mikebaz/rtTe5/1/上放了一个jsfiddle，但请注意，由于某种原因，样式在那里不能正常工作 - 因为它足够接近所以不值得搞乱它，但要注意拇指按钮与普通浏览器设置中的选项卡不重叠。）
这正是我想要的。 我希望从右侧滑出的面板具有相同的行为和设计，打开按钮垂直居中并旋转，从窗口右侧滑入打开视图（从右到左滑动）。
我已经找到了许多不同的答案，比如屏幕右边的CSS-隐藏元素，以获得屏幕外的定位，我看着无法在屏幕右侧获得幻灯片标签我的页面，但使用图像旋转文本，我不想做（除了其他差异）。 似乎脚本会类似，但我仍然坚持如何正确构建CSS。 我似乎无法获得旋转，屏幕外部分和动态高度工作的组合。 特别是，我似乎无法显示要显示的内容或拇指文本在拇指按钮中正确居中。 这就是我现在所拥有的：
<div id="machineControlsOuterContainer"> <div id="machineControlsContainer"> <div id="machineControlsTray"> <table id="machineControls"> <tr> <td class="machineButton">Button</td> </tr> <tr> <td>Button</td> </tr> <tr> <td>Button</td> </tr> <tr> <td>Button</td> </tr> <tr> <td>Button</td> </tr> </table> </div> <div id="machineControlsThumb"> <div id="machineControlsRotatedContainer"> <div id="machineControlsThumbText">•••</div> </div> </div> </div> </div>和
#machineControlsOuterContainer { position: relative; overflow: hidden; } #machineControlsContainer { position: absolute; height: 100%; z-index: 100; width: 150px; right: -120px; } #machineControlsThumb { width: 30px; height: 60px; font-family: sans-serif; font-size: 12pt; border: 1px solid; background-color: lightblue; -ms-opacity: 0.25; opacity: 0.25; margin: auto; position: absolute; left: 0px; top: 50%; } #machineControlsRotatedContainer { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); margin: auto; padding: 0; line-height: 30px; } #machineControlsTray { position: absolute; right: -120px; height: 100%; } #machineControlsThumbText { } #machineControls { background-color: lightblue; -ms-opacity: 0.5; opacity: 0.5; width: 120px; font-family: sans-serif; font-size: 12pt; text-align: left; border: 1px solid; } .machineButton { border: 1px solid; padding: 0px; margin: 0px; }用脚本：
$("#machineControlsThumb").click(function () { var element = $("#machineControlsContainer"); var windowWidth = $(window).width(); var currentLeft = element.offset().left; var currentRight = -150 + (windowWidth - currentLeft); var newRight = -(currentRight + 120); element.animate({ right: newRight }, 200, function () { }); });我可以说我很接近，但我无法完成关闭循环。
谢谢！
I have existing HTML/CSS/JavaScript that works fine for a "click to open" sliding panel from the top of the page, like this:
<div id="machineSelectorContainer"> <div id="machineSelectorTray"> <table id="machineSelector"> <tr id="machineSelectorThumbnailTextRow"> <td class="machineSelectorThumbnailText">VM1</td> <td class="machineSelectorThumbnailText">VM2</td> </tr> <tr> <td class="machineSelectorThumbnailPicture"> <img src="images/placeholderThumbnail.png" /> </td> <td class="machineSelectorThumbnailPicture"> <img src="images/placeholderThumbnail.png" /> </td> </tr> </table> </div> <div id="machineSelectorThumb"> <div id="machineSelectorThumbText"> ••• </div> </div> </div>with
*, body { margin: 0; height: 100%; } #machineSelectorContainer { width: 100%; height: 150px; text-align: center; z-index: 100; position: absolute; top: -120px; } #machineSelectorThumb { width: 60px; height: 30px; line-height: 30px; font-family: sans-serif; font-size: 12pt; text-align: center; position: relative; top: 120px; border: 1px solid; background-color: lightblue; -ms-opacity: 0.4; opacity: 0.4; margin: auto; z-index: 100; } #machineSelectorTray { position: absolute; height: 120px; z-index: 100; margin: auto; left: 50%; } #machineSelector { background-color: lightblue; font-family: sans-serif; font-size: 8pt; text-align: center; position: relative; left: -50%; margin: 0; padding: 0; height: 120px; border: 1px solid black; } #machineSelector > table { height: auto; } #machineSelectorThumbnailTextRow { height: auto; } .machineSelectorThumbnailPicture > img { width: 100px; border: 1px solid black; height: auto; } .machineSelectorThumbnailText { position: relative; bottom: 0; width: 100px; height: 20px; line-height: 20px; }and
$("#machineSelectorThumb").click(function () { var element = $("#machineSelectorContainer"); var currentTop = element.offset().top; var newTop = -(currentTop + 120); element.animate({ top: newTop }, 200, function () { }); });(I put a jsfiddle at http://jsfiddle.net/mikebaz/rtTe5/1/ but note that the styling does not work correctly there for some reason - it's not worth messing with it as it's close enough, but be aware the thumb button doesn't overlap the tab in a normal browser setup.)
This works exactly how I want. I would like to have the same kind of behavior and design for a panel that slides out from the right, with the open button vertically centered and rotated, sliding open from off the right side of the window into view (right to left slide).
I have found a lot of different answers around pieces of this, such as CSS- hide element off the right of the screen to get the off-screen positioning, and I looked at Can't get Slide Out Tab on the right hand side of my page but that uses an image for the rotated text, which I don't want to do (among other differences). It seems that the script would be similar, but I'm stuck on how to build the CSS properly. I can't seem to get the combination of rotation, off-screen portion, and dynamic height working. In particular, I can't seem to get the contents to show or the thumb text to properly center in the thumb button. Here is what I have right now that is getting there:
<div id="machineControlsOuterContainer"> <div id="machineControlsContainer"> <div id="machineControlsTray"> <table id="machineControls"> <tr> <td class="machineButton">Button</td> </tr> <tr> <td>Button</td> </tr> <tr> <td>Button</td> </tr> <tr> <td>Button</td> </tr> <tr> <td>Button</td> </tr> </table> </div> <div id="machineControlsThumb"> <div id="machineControlsRotatedContainer"> <div id="machineControlsThumbText">•••</div> </div> </div> </div> </div>and
#machineControlsOuterContainer { position: relative; overflow: hidden; } #machineControlsContainer { position: absolute; height: 100%; z-index: 100; width: 150px; right: -120px; } #machineControlsThumb { width: 30px; height: 60px; font-family: sans-serif; font-size: 12pt; border: 1px solid; background-color: lightblue; -ms-opacity: 0.25; opacity: 0.25; margin: auto; position: absolute; left: 0px; top: 50%; } #machineControlsRotatedContainer { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); margin: auto; padding: 0; line-height: 30px; } #machineControlsTray { position: absolute; right: -120px; height: 100%; } #machineControlsThumbText { } #machineControls { background-color: lightblue; -ms-opacity: 0.5; opacity: 0.5; width: 120px; font-family: sans-serif; font-size: 12pt; text-align: left; border: 1px solid; } .machineButton { border: 1px solid; padding: 0px; margin: 0px; }with the script:
$("#machineControlsThumb").click(function () { var element = $("#machineControlsContainer"); var windowWidth = $(window).width(); var currentLeft = element.offset().left; var currentRight = -150 + (windowWidth - currentLeft); var newRight = -(currentRight + 120); element.animate({ right: newRight }, 200, function () { }); });I can tell I'm close, but I just can't finish closing the loop.
Thanks!
最满意答案
好的，所以我终于搞清楚了。 我不得不对不同的部分进行更多的操作，并添加一些垂直的居中脚本（我不能让CSS合作）。
CSS：
#machineControlsOuterContainer { position: relative; overflow: hidden; } #machineControlsContainer { position: absolute; height: 100%; z-index: 100; width: 150px; right: -120px; } #machineControlsThumb { width: 30px; height: 60px; font-family: sans-serif; font-size: 12pt; border: 1px solid; background-color: lightblue; -ms-opacity: 0.4; opacity: 0.4; margin: auto; position: absolute; left: 0px; } #machineControlsRotatedContainer { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); margin: auto; padding: 0; line-height: 30px; } #machineControlsTray { position: absolute; right: 0; height: auto; } #machineControlsThumbText { line-height: 60px; text-align: center; } #machineControls { background-color: lightblue; -ms-opacity: 0.5; opacity: 0.5; width: 120px; font-family: sans-serif; font-size: 12pt; text-align: left; border: 2px solid black; border-spacing: 0; } #machineControls td { height: 30px; border: 1px solid black; padding-left: 4px; }调整脚本：
$(window).resize(function () { verticallyCenterElement("machineControlsThumb"); verticallyCenterElement("machineControlsTray"); }); verticallyCenterElement("machineControlsThumb"); verticallyCenterElement("machineControlsTray"); function verticallyCenterElement(elementName) { var element = $("#" + elementName); var height = element.height(); var windowHeight = $(window).height(); var newTop = (windowHeight - height) / 2; element.css("top", newTop); }OK, so I finally figured this out. I had to do a little bit more manipulation of different pieces, and add some vertical centering script (I can't get the CSS to cooperate).
CSS:
#machineControlsOuterContainer { position: relative; overflow: hidden; } #machineControlsContainer { position: absolute; height: 100%; z-index: 100; width: 150px; right: -120px; } #machineControlsThumb { width: 30px; height: 60px; font-family: sans-serif; font-size: 12pt; border: 1px solid; background-color: lightblue; -ms-opacity: 0.4; opacity: 0.4; margin: auto; position: absolute; left: 0px; } #machineControlsRotatedContainer { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); margin: auto; padding: 0; line-height: 30px; } #machineControlsTray { position: absolute; right: 0; height: auto; } #machineControlsThumbText { line-height: 60px; text-align: center; } #machineControls { background-color: lightblue; -ms-opacity: 0.5; opacity: 0.5; width: 120px; font-family: sans-serif; font-size: 12pt; text-align: left; border: 2px solid black; border-spacing: 0; } #machineControls td { height: 30px; border: 1px solid black; padding-left: 4px; }Adjustment script:
$(window).resize(function () { verticallyCenterElement("machineControlsThumb"); verticallyCenterElement("machineControlsTray"); }); verticallyCenterElement("machineControlsThumb"); verticallyCenterElement("machineControlsTray"); function verticallyCenterElement(elementName) { var element = $("#" + elementName); var height = element.height(); var windowHeight = $(window).height(); var newTop = (windowHeight - height) / 2; element.css("top", newTop); }更多推荐
发布评论