Удобство раздвижных панелей


Есть ли лучший способ сделать то, что я делаю? Если нет, я бы просто общий обзор, как я это сделал и удобство использования его (как он работает и функционирует, не артистично, как он выглядит).

Вот рабочая JSFiddle.

В JavaScript

$(document).ready(function () {
    // initlize panels
    $('.panel').each(function (i) {
        var $tab = $(this).children('.tab');
        $tab.css({ 'top': $tab.position().top + i * ($tab.height() + 5) });
    });
    $('.tab').click(function () {
        var $panel = $(this).parent();
        if ($panel.attr('data-open') == 'yes') {
            $panel.animate({
                left: '-=300'
            }, 1000, function () {
                // Animation complete.
            });
            $panel.attr('data-open', 'no');
        } else {
            $('.panel').css({ 'z-index': 0 });
            $panel.css({ 'z-index': 1 });
            $panel.animate({
                left: '+=300'
            }, 1000, function () {
                // Animation complete.
            });
            $panel.attr('data-open', 'yes');
        }
    });
});

УСБ

body
{
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}
.panel
{
    position:absolute;
    top: 0px;
    bottom: 0px;
    left: -300px;
    width: 299px;
    border-right: 1px solid black;
    background-color: White;
}

.tab
{
    position: absolute;
    top: 10px;
    width: 16px;
    right: -17px;
    height: 75px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    cursor: pointer;
    background-color: White;
}

.tab div 
{
    position: relative;
    display: block;
    left: 1px;
    top: -15px; /* Same as height */
    width: 75px; /* Same as .tab height */
    height: 15px;
    font-size: 14px;
    font-weight:normal;
    line-height: 15px;
    text-align: center;
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    vertical-align: top;
}

В CSS - в т. е.-только CSS файл

.tab div
{
    top: 0;
}

HTML-код

<div id="panels">
    <div class="panel">
        <div class="tab"><div>Tab A</div></div>
    </div>
    <div class="panel">
        <div class="tab"><div>Tab B</div></div>
    </div>
    <div class="panel">
        <div class="tab"><div>Tab C</div></div>
    </div>
    <div class="panel">
        <div class="tab"><div>Tab D</div></div>
    </div>
</div>


1936
3
задан 3 декабря 2011 в 02:12 Источник Поделиться
Комментарии
1 ответ


  • на вкладке Ярлык, кажется, существуют в содержании которого он нашивая .. нехорошо, вам не кажется.

  • нет смысла использовать $(документ).готов(), просто положить ваш скрипт файл прямо перед и это уже будет выполнения, когда дом делается.

  • вместо того, чтобы добавить функцию для каждого .вкладка тега onclick функции отдельно, вы должны прочитать о мероприятии делегации и использовать

  • использовать замыкания для хранения активной вкладки, а не дом. DOM-манипуляции медленно

  • установка верхнего и нижнего значений в CSS не удается делать то, что вы хотите на ИЕ7

  • качество анимации на IE9-это ужасно

2
ответ дан 3 декабря 2011 в 03:12 Источник Поделиться