CSS / jQuery: как я могу получить прокручиваемую область для правильного изменения размера при изменении размера контейнера? - PullRequest
Новая
       5

CSS / jQuery: как я могу получить прокручиваемую область для правильного изменения размера при изменении размера контейнера?

3 голосов
/ 24 января 2010

Я использую jQuery для отображения области с вкладками, и у меня есть таблица под вкладками. Все это, вкладки и таблица, можно изменять.

Я бы хотел, чтобы таблица имела полосу прокрутки, чтобы при изменении размера контейнера полоса прокрутки изменялась.

Прямо сейчас у меня есть две проблемы.

1) Я бы хотел, чтобы полоса прокрутки простиралась от нижних вкладок до нижней части объекта контейнера вкладок. Я хотел бы, чтобы это было динамичным, поскольку пользователь изменяет размеры окна. Но я не могу держать нижнюю часть полосы прокрутки точно над дном моего контейнера

2) Весь контейнер (вкладки и таблица) можно перетаскивать. Но это, кажется, отключает перетаскивание полосы прокрутки (поэтому вы не можете перетаскивать скролл- «лифт» .. вам нужно нажать на стрелки или «шахту лифта» полосы прокрутки, чтобы переместить ее. Я пытался параметр 'handle' в jQuery и не может заставить его работать.

Чтобы быть точным, я включил весь код, чтобы вы могли воспроизвести проблему. Откройте этот файл .htm, попробуйте растянуть окно и попробуйте поработать со скроллером, и вы увидите мои проблемы. растяжение окна приводит к тому, что скроллер тянется далеко от дна контейнера.

Любые попытки помочь приветствуются!

Редактировать -> Теперь я вижу, что мои попытки отобразить прокручиваемую область отключили функцию «щелкнуть по вкладке». Таким образом, код ниже на самом деле имеет три проблемы - вы не можете нажать на вкладку и получить какие-либо действия. (с одной вкладкой, если вы щелкнете по ней, содержимое должно скрыться. Очевидно, мое наложение элементов div нарушило эту функцию!) 

<html><head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</script>


<style type="text/css">
#grid-tabs {
    width: 720px;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 185px;
}
.outer-container{
    height:         100%;
    position:       relative;
    top:            -45px;
}
.filler{
    height:         60px;
    position:       relative;
    top:            -60px;
}
.inner-container{
    height:         auto;
    overflow-y:     scroll;
    position:       relative;
    top:            -15px;
}
.scroll-area{
    height:         70%;
    position:       relative;
    top:            0px;
}
table{
    border:1px solid #62bbe8;
}
td {
    width: 50px;
}

</style>
</head><body>

<div id='grid-tabs'>
    <ul>
    </ul>

    <div class='outer-container'>
        <div class='filler'>
        </div>
        <div class='inner-container'>
            <div class='scroll-area'>
            <table class='content'>
                <tbody>
                    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
                    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
                    <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
                    <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
                    <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
                    <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
                    <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
                    <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
                    <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr>
                    <tr><td>A.1</td><td>A.2</td><td>A.3</td></tr>
                    <tr><td>B.1</td><td>B.2</td><td>B.3</td></tr>
                    <tr><td>C.1</td><td>C.2</td><td>C.3</td></tr>
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery('#grid-tabs').tabs({collapsible:true}).draggable().resizable();
    jQuery('#grid-tabs').tabs('add','#grid-tabs-1',"Tab 1");

</script>
</body>

1 Ответ

3 голосов
/ 24 января 2010

ОК, я отвечаю на свой вопрос.

Мне удалось решить три проблемы, и я получил перетаскиваемую область вкладок с полосой прокрутки, которая правильно изменила размеры.

Вот окончательный код. Смотрите это в действии в JS Bin.

Обратите внимание на магию, содержащуюся в этой строке: 

        jQuery('#grid-tabs').tabs({collapsible:true})
            .draggable({handle:'ul'})
            .resizable({alsoResize:'.container'});

alsoResize! это трюк И сделав «ul» моим дескриптором (это означает, что его можно перетаскивать в разделе вкладок), теперь полоса прокрутки работает.

Отлично! Надеюсь, это кому-нибудь поможет ... 

    <html><head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
    </script>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
    </script>


    <style type="text/css">
    #grid-tabs {
        width: 720px;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 185px;
    }
    .container{
        height:         auto;
        overflow-y:     scroll;
        position:       relative;
        top:            0px; /* changed */
    }
    .scroll-area{
        height:         70%;
        position:       relative;
        top:            0px;
    }
    table{
        border:1px solid #62bbe8;
    }
    td {
        width: 50px;
    }

    </style>
    </head><body>

    <div id='grid-tabs'>
        <ul>
        </ul>

            <div class='container'>
                <div class='scroll-area'>
                <table class='content'>
                    <tbody>
                        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
                        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
                        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
                        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
                        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
                        <tr><td>6.1</td><td>6.2</td><td>6.3</td></tr>
                        <tr><td>7.1</td><td>7.2</td><td>7.3</td></tr>
                        <tr><td>8.1</td><td>8.2</td><td>8.3</td></tr>
                        <tr><td>9.1</td><td>9.2</td><td>9.3</td></tr>
                        <tr><td>A.1</td><td>A.2</td><td>A.3</td></tr>
                        <tr><td>B.1</td><td>B.2</td><td>B.3</td></tr>
                        <tr><td>C.1</td><td>C.2</td><td>C.3</td></tr>
                    </tbody>
                </table>
                </div>
            </div>

    </div>

    <script type="text/javascript">
        jQuery('#grid-tabs').tabs({collapsible:true}).draggable({handle:'ul'}).resizable({alsoResize:'.container'});
        jQuery('#grid-tabs').tabs('add','#grid-tabs-1',"Tab 1");

    </script>
    </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...