Показывать 3 числа только до и после точного числа в постинкременте
Я не уверен, как задать этот вопрос. Если бы я точно знал, что искать, мне бы не пришлось публиковать здесь сообщения. Я объясню ситуацию, я надеюсь, что вы, ребята, можете сказать мне, что именно искать (или какой тип функции).
Это код, над которым я работаю —
$walkaround_pages = 15;
$walkaround_page = $_GET['walkaround_page'];
for ($wp = 1; $wp <= $walkaround_pages; $wp++) {
echo '<a class="pagination_links'.(($wp==$walkaround_page)?' current_page':"").'" href="/panel/?walkaround_page='.$wp.'">'.$wp.'</a>';
}
Это создает ссылки на страницы. Когда общее количество страниц ($walkaround_pages) более 10, это не подходит для мобильных устройств. Поэтому я хочу сделать что-то вроде текущей страницы ($walkaround_page) скажем, 7, он покажет только 3 цифры до (4,5,6) и 3 цифры после (8,9,10) вместо того, чтобы показывать все цифры от 1 до 15.
Может кто-нибудь сказать, пожалуйста, что именно я ищу?
Решение
Вы можете проработать начальную и конечную части цикла относительно страницы, на которой вы сейчас находитесь, и просто зациклить на этом …
$walkaround_pages = 15;
$max_gap = 3; // How many pages before and after you want
$walkaround_page = $_GET['walkaround_page'];
$start = max(1,$walkaround_page-$max_gap);
$end = min($walkaround_pages,$walkaround_page+$max_gap);
for ($wp = $start; $wp <= $end; $wp++) {
При запуске, это случай вычитания количества элементов, но убедитесь, что 1 — это наименьшее значение, которое он может пройти, аналогично концу — добавьте количество страниц, но ограничиваясь общим количеством страниц.
Другие решения
Просто добавьте условие, прежде чем эхо
if( abs($wp - $walkaround_page) <= 3){
echo '<a class="pagination_links'.(($wp==$walkaround_page)?' current_page':"").'" href="/panel/?walkaround_page='.$wp.'">'.$wp.'</a>';
}
абс Функция возвращает абсолютное значение, поэтому возвращает положительное число, если оно является одним из 3 меньших или больших чисел, чем текущая страница.
увидеть живое демо
Вот пример CSS с использованием @media править.
Самое замечательное в этом то, что вы можете сделать его очень плавным. Например, когда пользователь поворачивает свое устройство, будут отображаться дополнительные ссылки.
То же самое, если пользователь изменяет размер окна браузера.
.wide a, .narrow a {
padding:0px 0.5em;
}
.wide a:hover, .narrow a:hover {
color:#fff;
background:#345;
}
/* this would be in your @media rule */
/* @media screen and (max-width: 480px) { */
.narrow a:nth-of-type(n+6) {
display:none;
}
/* } */<p>For demonstration only</p>
<div class="wide">
<a href="#">1</a> <a href="#">2</a> <a href="#">3</a>
<a href="#">4</a> <a href="#">5</a> <a href="#">6</a>
<a href="#">7</a> <a href="#">8</a> <a href="#">9</a>
<a href="#">10</a>
</div>
<p>Below is all you would have</p>
<div class="narrow">
<a href="#">1</a> <a href="#">2</a> <a href="#">3</a>
<a href="#">4</a> <a href="#">5</a> <a href="#">6</a>
<a href="#">7</a> <a href="#">8</a> <a href="#">9</a>
<a href="#">10</a>
</div>