javascript - 右侧的滑动面板，就像顶部的现有面板一样

Question

我现有的 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">
            &bull;&bull;&bull;
        </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，但请注意，出于某种原因，该样式在那里不能 正常工作 - 不值得乱动它，因为它已经足够接近了，但请注意拇指按钮在正常的浏览器设置中不会与选项卡重叠。)

这正是我想要的。对于从右侧滑出的面板，我希望具有相同类型的行为和设计，打开按钮垂直居中并旋转，从窗口右侧滑开进入 View (从右向左滑动)。

我已经找到了很多关于这个的不同答案，例如 CSS- hide element off the right of the screen获取屏幕外定位，我查看了Can't get Slide Out Tab on the right hand side of my page但这对旋转文本使用了图像，我不想这样做(除其他差异外)。看起来脚本会很相似，但我一直在研究如何正确构建 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">&bull;&bull;&bull;</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 () {

    });
});

我知道我很接近，但我就是无法完成关闭循环。

谢谢!

Answer 1

好吧，我终于明白了。我不得不对不同的部分进行更多操作，并添加一些垂直居中脚本(我无法让 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);
}