Как разделить html на полноэкранные страницы высотой? - PullRequest
Новая
       23

Как разделить html на полноэкранные страницы высотой?

4 голосов
/ 11 ноября 2011

Мне нужно разделить некоторое HTML-содержимое на страницы, чтобы каждая страница имела высоту экрана и некоторую предопределенную ширину. Разделение страницы может произойти в середине абзаца (или, возможно, какого-то другого элемента HTML), поэтому эту ситуацию нужно как-то обработать.

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

Я должен признать, что я совсем новичок в HTML и всем остальном, извините, если мои предположения глупы, но в настоящее время я рассматриваю следующий подход: измерить фактическую высоту видимой области (нужно выяснить, как еще ), затем возьмите мой HTML-документ и постепенно добавляйте тег за тегом, помещайте его в невидимый div и вычисляйте его результирующую высоту. Когда у меня будет высота больше, чем высота страницы, я закончу. Однако этот подход не будет работать в случае длинных тегов, например длинный абзац.

Заранее спасибо.

РЕДАКТИРОВАТЬ : спасибо за ваши предыдущие ответы. Я попытался использовать подход ручного расчета размера элементов и столкнулся с одной проблемой, которую я не могу решить хорошим способом. Это проблема падения прибыли. То, что я пытаюсь сделать, - это перебрать все параграфы в моем документе и суммировать результаты вызова .outerHeight (true) jQuery. Это должно дать мне полную высоту элемента, включая отступы, поля и границы. И он на самом деле делает то, что говорит, но проблема в том, что он не учитывает коллапс полей. Из-за этого я получаю неправильный общий размер (больше, чем реальный), потому что браузер отбрасывает некоторые поля (из смежных абзацев в моем случае), но я принимаю их во внимание.

Любые идеи, как решить эту проблему, кроме введения алгоритма, определяющего, какие поля свернуты, а какие нет? Я думаю, что это некрасиво ...

Ответы [ 5 ]

1 голос
/ 30 августа 2012

Вы можете использовать многостолбцовые правила CSS3, например: http://www.quirksmode.org/css/multicolumn.html Или для поддержки во всех браузерах используйте плагин javascript: http://welcome.totheinter.net/columnizer-jquery-plugin/

Этот плагин даже имеет многостраничный пример с несколькими столбцами: http://welcome.totheinter.net/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/

1 голос
/ 11 ноября 2011

Я могу вспомнить одну структуру, которая, кажется, делает то, что вам нужно (и немного больше): https://github.com/Treesaver/treesaver

0 голосов
/ 17 октября 2016

В случае, если кто-то еще ищет что-то подобное, я недавно сделал это с помощью JQuery. Также первая страница остается пустой (для заголовка и т. Д.):

https://jsfiddle.net/xs31xzvt/

Он в основном перебирает подвижные элементы и вставляет их в новый div, если предыдущий div заполнен. 

 (function($) {

    $(document).ready(formatPages)
    function formatPages() {
        var container = $('.container');
        var subPage = $('.subpage').get(0);
        var subPageHeight = subPage.offsetHeight;
        var subPageScrollHeight = subPage.scrollHeight;
        // See how many pages we'll need
        var pages = Math.floor(subPageScrollHeight / subPageHeight) + 1;
        //add a new page
        var pageCount = 2;
        var pageDiv = createPageDiv(pageCount);
        var subPageDiv = createSubPageDiv(pageCount);

        var addPage = function (){
            pageCount++;
            pageDiv = createPageDiv(pageCount);
            subPageDiv = createSubPageDiv(pageCount);
            pageDiv.append(subPageDiv);
            container.append(pageDiv);
            pageContentHeight = 0;
        }
        addPage()
        container.append(pageDiv);
        $('.movable').each(function() {
            var element = $(this);
            //remove the element
            element.detach();
            //try to add the element to the current page
            if (pageContentHeight + element.get(0).offsetHeight > subPageHeight) {
                subPageDiv.append(getFooterDiv().show());
                //add a new page
                addPage();
            }
            subPageDiv.append(element);
            pageContentHeight += element.get(0).offsetHeight;
        });
    }



    function createPageDiv(pageNum) {
        return $('<div/>', {
            class: 'page',
            id: 'page' + pageNum
        });
    }
    function createSubPageDiv(pageNum) {
        return $('<div/>', {
            class: 'subpage',
            id: 'subpage' + pageNum
        });
    }
    function getFooterDiv() {
        return $('.footer').first().clone();
    }
}(jQuery));
0 голосов
/ 30 января 2014

Используйте свою собственную логику для вычисления высоты каждого элемента в теле html с использованием кода jQuery 

$('selector').height();

Используя это, вы можете вычислить высоту некоторых элементов html и принять решениесколько элементов должно отображаться на экране вашего устройства.

для получения дополнительной информации посетите страницу jQuery Height Documentation

0 голосов
/ 12 ноября 2011

jQuery даст вам высоту (в пикселях) элемента с функцией height ().

jQuery("BODY").height() даст вам максимальную высоту порта просмотра (хотя, только если ваша высота содержимого> = высота ТЕЛА - в противном случае вы получите высоту пространства, занимаемого телом в просмотр порта.)

Подсчет высоты P-тегов (или других тегов) кажется хорошим способом. Я полагаю, если вы хотите разбить содержимое тега P для больших абзацев, вы можете определить максимальную высоту «обрыва» для последнего тега P на странице. Затем вы можете разбить оставшуюся часть содержимого тега P, создав новый тег P с jQuery("#the-next-page-id).append(jQuery("<P>"+restOfTheParagraphContent+"</P>"))

...