Пагинация страниц
Привет. Застрял на этом деле. Не могу сообразить логику. Открываю страницу. На ней текст. Нужно что бы и скролился вниз и "листался"(пока кнопки) в любой момент. Начал с подсчёта строк. Но все строки не знаю как посчитать. Скорее всего никак. Только в окне. Как это применить не понятно. Стал считать теги <p>. Их можно посчитать все. Но куда думать дальше никак... Подскажите, кто знает. Всё на стороне клиента. С сервера только файл с тестом.
|
Я думаю, если бы было возможно, то были бы и примеры этого.
|
ureech,
если оглавления нет, делишь высоту текста на высоту просмотра, получаешь количество кнопок, на каждую кнопку цепляешь нужную величину прокрутки, если кнопок только две, верх и низ, тогда к текущей прокрутке , прибавляешь/вычитаешь высоту просмотра. |
Цитата:
|
Хотя, если будет количество кнопок, то уже легче) Но весь вопрос в том как получить всю высоту текста. Как то считать все символы не хотелось бы. И конечно есть оглавление)
|
Ааа, понял про высоту)
|
Ну вот что то такое.
Недостаток - режет строки. Верхняя часть строки на предыдущей странице, нижняя на следующей.
<!DOCTYPE>
<html>
<head>
<style>
#page {
position: relative;
width:300px;
height:600px;
overflow: hidden;
border: 1px solid blue;
padding: 10px;
}
#paginator {
display: flex;
}
</style>
</head>
<body>
<div id=page>
</div>
<div id="paginator"></div>
<script>
const text = `
<h2>Introduction</h2>
<p>This Ecma Standard defines the ECMAScript 2023 Language. It is the
fourteenth edition of the ECMAScript Language Specification.
Since publication of the first edition in 1997, ECMAScript has
grown to be one of the world's most widely used general-purpose programming languages.
It is best known as the language embedded in web browsers but has also been widely adopted
for server and embedded applications.
<p>ECMAScript is based on several originating technologies, the most well-known being
JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan
Eich at Netscape and first appeared in that company's Navigator 2.0 browser.
It has appeared in all subsequent browsers from Netscape and in all browsers
from Microsoft starting with Internet Explorer 3.0.
<p>The development of the ECMAScript Language Specification started in November 1996.
The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997.
<p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure,
and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General
Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with
ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.
<p>The third edition of the Standard introduced powerful regular expressions,
better string handling, new control statements, try/catch exception handling,
tighter definition of errors, formatting for numeric output and minor changes
in anticipation of future language growth. The third edition of the ECMAScript
standard was adopted by the Ecma General Assembly of December 1999 and published
as ISO/IEC 16262:2002 in June 2002.
<p>After publication of the third edition, ECMAScript achieved massive adoption
in conjunction with the World Wide Web where it has become the programming
language that is supported by essentially all web browsers. Significant work
was done to develop a fourth edition of ECMAScript. However, that work was not
completed and not published as the fourth edition of ECMAScript but some of it was
incorporated into the development of the sixth edition.
<p>The fifth edition of ECMAScript (published as ECMA-262 5th edition) codified de
facto interpretations of the language specification that have become common among
browser implementations and added support for new features that had emerged since the
publication of the third edition. Such features include accessor properties,
reflective creation and inspection of objects, program control of property
attributes, additional array manipulation functions, support for the JSON
object encoding format, and a strict mode that provides enhanced error checking
and program security. The fifth edition was adopted by the Ecma General Assembly of December 2009.
<p>The fifth edition was submitted to ISO/IEC JTC 1 for adoption under the fast-track
procedure, and approved as international standard ISO/IEC 16262:2011. Edition 5.1
of the ECMAScript Standard incorporated minor corrections and is the same text as
ISO/IEC 16262:2011. The 5.1 Edition was adopted by the Ecma General Assembly of June 2011.
<p>Focused development of the sixth edition started in 2009, as the fifth edition
was being prepared for publication. However, this was preceded by significant
experimentation and language enhancement design efforts dating to the publication
of the third edition in 1999. In a very real sense, the completion of the sixth
edition is the culmination of a fifteen year effort. The goals for this edition
included providing better support for large applications, library creation,
and for use of ECMAScript as a compilation target for other languages. Some
of its major enhancements included modules, class declarations, lexical
block scoping, iterators and generators, promises for asynchronous programming,
destructuring patterns, and proper tail calls. The ECMAScript library of
built-ins was expanded to support additional data abstractions including maps,
sets, and arrays of binary numeric values as well as additional support
for Unicode supplementary characters in strings and regular expressions.
The built-ins were also made extensible via subclassing. The sixth
edition provides the foundation for regular, incremental language and library
enhancements. The sixth edition was adopted by the General Assembly of June 2015.
`
const page = document.getElementById('page');
const paginator = document.getElementById('paginator');
page.innerHTML = text;
let pageheight = page.clientHeight;
let textheight = page.scrollHeight;
const nbutton = ((textheight / pageheight) |0) +1;
let y = 0;
const pagebeg = [];
for (let i = 0; i < nbutton; i++){
pagebeg.push(y);
y += pageheight;
const button = document.createElement('button');
button.dataset.npag = '' + i;
button.textContent = i+1;
paginator.append(button);
}
paginator.addEventListener('click', ({target}) => {
if (target.nodeName != 'BUTTON') return;
const nbutton = target.dataset.npag;
const beg = pagebeg[nbutton];
page.scrollTo(0, beg);
})
</script>
</body>
</html>
Надо еще делать пересчет при ресайзе. А как сделать, что бы при ресайзе остаться на том же (хотя бы приблизительно) месте, я без понятия. |
voraa, спасибо за пример. завтра гляну. Сегодня голова уже не варит). Я уже вывел количество кнопок,их тоже js рисует. Завтра буду с прокруткой и пагинацией разбираться. Надеюсь ваш пример поможет). С обрезанием строк думаю решить путём расчёта высоты строки. Насчёт ресайза пока не понял).
|
voraa,
А что такое npag в 103 стр.? |
Цитата:
dataset https://developer.mozilla.org/en-US/...lement/dataset |
Цитата:
Если сделать так, то и этот скрипт справится. |
К сожалению вариант voraa, мне не подходит. У меня другая логика. На данный момент стоит такой вопрос. В моём тексте, например 40 отрезков <p>...</p>. При подсчёте среднего числа кнопок для этого текста получаю, например 4 кнопки. Подсчёт вёлся с округлением в большую сторону. Все <p>...</p> разного размера, поэтому выводить по 10 не вариант. Нужно выводить те, что в видимой области окна. +- пару строк роли не играют. Можно будет прокрутить.
str = $(str).filter("p");
count= str.length // общее количество тегов <p>...</p>
clientCount = Math.ceil($(window).height()/count);// среднее количество в окне
count_button = Math.ceil($(document).height()/count)/clientCount; // количество кнопок
/** перебираю теги **/
for (var i = 0; i < str.length; i++) {
???
}
Как я рассуждаю. При переборе тегов мне нужно получить количество тегов в видимой области окна. То есть заполнять $(window).height() тегами. Предварительно получая количество строк в теге и вычисляя их ширину. Осталось изобразить всё это на "бумаге"). Как всё сделать по отдельности ещё представляю, но вот в кучу собрать...) |
А ширина и высота области, в которой показывается страница фиксирована?
Напрашивается такое решение. Делаете div со стилями
{
width: 400px; /* подставить ширину своей области*/
position: absolute;
visibility: hidden;
}
Запихиваете в него свой текст в innerHTML Потом пробегаетесь по параграфам в этом div и берете их offsetTop и offsetTop+offsetHeigth. Это уже поможет вычислить какие параграфы к какой странице относятся. Далее просто в свою основную область выводите нужные параграфы. |
На данный момент размеры не фиксированные. Изначально не хотелось возиться с размерами). Придётся под устройства подгонять и тп.Но если не выкручусь видимо придётся к этому вернуться.
|
Цитата:
|
Чего то попробовал сделать (самому интересно стало, вдруг пригодится когда)
Файл большой, код сюда не вмещается Даю ссылку на Гугл диск Основная идея - Делаем невидимое окно, размерами такое же, как область просмотра. В него загружаем текст. И в нем по размерам считаем, какие параграфы помещаются на страницу. При ресайзе количество страниц может измениться. Я сделал, что после ресайза мы пересчитываем количество страниц, и переходим на ту страницу, что бы был виден параграф, который был первым на видимой странице до ресайза. Что смог прокомментарил, что бы понятнее было |
voraa,
:thanks: |
voraa,
Вот только вернулся к данной теме. Изменился приоритет задач. Перекинули на другое. Сейчас буду что то пробовать. Отпишусь, в любом случае |
voraa,
просмотрел ваш пример. Как я понял вы водите блоки по тегу <p>. А если в теге всего одно предложение)? У меня такая ситуация. Я разделил текст по тегам, но в теге разное количество текста. И в одном clientHeight 5.8 тегов помещается, а в другом 8.2). К тому же с переносами строк тоже не ахти как. Вот не знаю как это решить лучше. То ли блоки из тегов составлять, то ли изначально считать символы в строке то ли...? |
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Я не в ту сторону думал).
Цитата:
var result = [];
var page = document.querySelector('#' + id)
var contentBox = $(page).find('.page');
var str = contentBox ? contentBox[0].innerHTML : '' // Object { 0: p, 1: p, 2: p, 3: p, 4: p, 5: p, 6: p, 7: p, 8: p, 9: p, … }
str = $(str).filter("p");
var countP = $(str).filter("p").length
for (let i = 0; i < countP; i++){
result.push(?????);
}
в каждой str[i].innerHTML один <p>text</p> Теперь надо перебрать объект, что бы в каждой str[i].innerHTML стало по заданному количеству <p>...</p> И тогда можно будет повесить их на соответственную кнопку. Я так думаю) |
Чет я не понял ничего.
Без верстки (html) понять трудно. var str = contentBox ? contentBox[0].innerHTML : '' - это будет какая то строка, а не объект ЗЫ Зачем jquery мешать с ванилой. Трудно разбирать, что jquery элемент, а что обычный элемент dom |
Не могу догнать как цикл написать. Например для одной итерации
var text = []
for (let i = 0; i < countP; i++) {
if (i < 5) {
text[i] = str[i].innerHTML
result[i].push(text[i]);
}
}
А как для всего массива сделать? |
Вёрстку не могу написать). там всё динамически. Много получится.
Цитата:
|
В браузере можно тут глянуть.
http://spbfbsa/filereader/index/3685...ad580110#item1 Только надо в какой то главе смотреть |
Цитата:
var page = document.querySelector('#' + id)
var contentBox = $(page).find('.page');
var str = contentBox ? contentBox[0].innerHTML : '' // Object { 0: p, 1: p, 2: p, 3: p, 4: p, 5: p, 6: p, 7: p, 8: p, 9: p, … }
str = $(str).filter("p");
Вот словами объясните этот кусок. Что у вас вычисляет каждая строка Что в str после третьей строки? |
Блин, я запутался. Да str. это строка
|
Сделать на каждой странице одинаковое количество параграфов простое дело. Но какой смысл, если все параграфы разной высоты? И как вычислить, какое именно количество параграфов должно быть на странице. Почему 5, а не 8?
|
Нет не одинаковое. Я посчитаю сколько параграфов помещается в окно и столько и буду выводить. Да, там не целые числа, но это уже другой вопрос)
|
| Часовой пояс GMT +3, время: 13:08. |