jQuery: как сделать «пейджер в реальном времени» в зависимости от размера экрана браузера без обновления «контента»? - PullRequest
0 голосов
/ 22 декабря 2010

jQuery: как сделать real-time pager в зависимости от размера экрана браузера без content обновления?

Пример этого вы можете увидеть в http://www.nytimes.com/chrome/ alt text

HTML и CSS в http://jsfiddle.net/laukstein/qjGrV/

#content{
    display:block;
    width:100%;
    height:40%;
    min-height:205px;
    max-height:408px;
    overflow:hidden;
}
li{
    width:100px;
    height:100px;
    margin:1px;
    float:left;
    background:#ccc;
}
...
<ul id="content">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>
<div id="pager"><!--here lets show 1,2,3,4 etc. depending on screen size--></div>

1 Ответ

2 голосов
/ 22 декабря 2010

Теперь, когда я понял ваш вопрос, позвольте мне дать 2цента.

Страница nty chrome состоит из таблиц. Их пользовательское приложение jquery под названием «solo» определяет размер окна и обновляет количество <tr> и <td> в зависимости от размера окна.

Например, если ширина окна мала, таблица воссоздается с использованием jQuery, чтобы отображались только ее значения. Если высота окна достаточно высока, чтобы отобразить две строки, таблицу переформатируют и заполняют дополнительными историями (я предполагаю, что с помощью aJax, хотя контент на странице будет стоить немного, а показывать и скрывать истории по мере необходимости).

...