Как написать панель предварительного просмотра (мастер / деталь) с HTML и CSS - PullRequest
Новая
       19

Как написать панель предварительного просмотра (мастер / деталь) с HTML и CSS

3 голосов
/ 08 января 2009

В современную эпоху CSS, как бы я создал пару панелей (например, окно предварительного просмотра, как в Outlook, или для основных / подробных видов)? В идеале там, где верхняя (главная) панель получит полосы прокрутки и т. Д .?

Предполагаемый вариант использования заключается в том, что пользователь может прокручивать в верхнем окне, всегда имея возможность видеть окно предварительного просмотра / подробности (я собираюсь загрузить данные для выбранной строки в нижнюю панель через jQuery). *

В старом мире (макеты таблиц) у меня может быть что-то вроде: 

<html>
<body>
  <table height="100%" border="1" width="100%">
    <tr height="*"><td>master</td></tr>
    <tr height="100"><td>detail</td></tr>
</body>
</html>

Так как же это перевести на CSS? (и, в частности, получение полос прокрутки в двух окнах).

Ответы [ 3 ]

8 голосов
/ 08 января 2009

Ну, если вы на самом деле используете Windows, то звучит так, будто вы говорите о фреймах или даже iFrames.

Однако я предполагаю, что когда вы говорите «окно», вы просто имеете в виду идею прокручиваемой области. Для этого для свойства css "overflow" можно установить значение "scroll", и оно будет прокручиваться, если размер содержащихся элементов больше размера самого себя.

Простой пример кода: 

#window-one, #window-two {
    width: 100%;
    height: 50%;
    overflow: scroll;
}
<html>
  <body>
    <div id="window-one">
      <p>Content for window one goes here.</p>
    </div>
    <div id="window-two">
      <p>Content for window two goes here.</p>
    </div>
  </body>
</html>

Это создаст две "панели" (окна), которые занимают 50% высоты, но охватывают всю ширину окна. Полосы прокрутки будут автоматически установлены на панелях, даже если они не нужны (в этом случае они отключены).

3 голосов
/ 08 января 2009 

<html>
    <body>
        <div style="height: 70%; border: 1px solid #000; overflow: auto;">
            <div style="background: #ddd; height: 1000px;">master</div>
        </div>
        <div style="height: 30%; border: 1px solid; #000; overflow: auto;">
            <div style="background: #ddd; height: 1000px;">detail</div>
        </div>
    </body>
</html>
3 голосов
/ 08 января 2009

Есть много хороших способов сделать это - вы можете использовать любой элемент уровня блока (например, div) с overflow:scroll. Это позволит вам делать то, что вы хотите, не прибегая к чему-то сложному, например, к фреймам (если только это не то, что вам нужно).

Попробуйте что-то вроде этого: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>untitled</title>
        <style type="text/css">
            .pane {
                margin:20px;
                width:300px;
                height:100px;
                overflow:scroll;
            }
        </style>
    </head>
    <body>
        <div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ipsum id diam ullamcorper viverra. Ut nec risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar. Integer vel est. Sed elementum, tortor nec sollicitudin semper, eros purus suscipit pede, in dictum metus ligula id mauris. Donec augue metus, malesuada a, ultricies eu, volutpat quis, est. Fusce suscipit. Mauris magna. Nulla facilisi. Praesent sem odio, imperdiet ac, vestibulum quis, lacinia eget, nibh. Nunc faucibus pede nec pede. Duis eget risus. In hac habitasse platea dictumst. Cras nunc odio, tempus et, condimentum ut, lacinia quis, est. Fusce ipsum metus, accumsan a, faucibus et, semper vitae, pede. Cras est. Vivamus metus dui, lobortis at, fermentum cursus, dapibus eget, orci. Cras imperdiet. </div>
        <div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac ipsum id diam ullamcorper viverra. Ut nec risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar. Integer vel est. Sed elementum, tortor nec sollicitudin semper, eros purus suscipit pede, in dictum metus ligula id mauris. Donec augue metus, malesuada a, ultricies eu, volutpat quis, est. Fusce suscipit. Mauris magna. Nulla facilisi. Praesent sem odio, imperdiet ac, vestibulum quis, lacinia eget, nibh. Nunc faucibus pede nec pede. Duis eget risus. In hac habitasse platea dictumst. Cras nunc odio, tempus et, condimentum ut, lacinia quis, est. Fusce ipsum metus, accumsan a, faucibus et, semper vitae, pede. Cras est. Vivamus metus dui, lobortis at, fermentum cursus, dapibus eget, orci. Cras imperdiet. </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...