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，但请注意，样式确实不因某种原因正确地工作 - 它不值得搞乱，因为它足够接近，但请注意拇指按钮与普通浏览器设置中的选项卡不重叠。）

这正是我想要的。我希望从右侧滑出的面板具有相同的行为和设计，打开按钮垂直居中并旋转，从窗口右侧滑动打开视图（从右到左滑动）。

我已经找到了很多不同的答案，例如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);
}

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

1 个答案: