+7 495 008 8452
  • Загрузка
Выберите ваш цвет
Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.


Человеческий шаблон постраничной навигации

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

Решил потратить пол часа времени, и раз и навсегда сделать для себя удобное представление этого шаблона.

Итак, дизайнер нарисовал, а верстальщик сверстал красивый шаблончик.


Имеем такую вот верстку:
<ul class="pager">
   <li>Начало</li>
   <li><span>|</span></li>
   <li>Пред.</li>
   <li><span>|</span></li>
   <li class="num act">1</li>
   <li class="num"><a href="#">2</a></li>
   <li class="num"><a href="#">3</a></li>
   <li class="num"><a href="#">4</a></li>
   <li class="num"><a href="#">5</a></li>
   <li><span>|</span></li>
   <li><a href="#">След.</a></li>
   <li><span>|</span></li>
   <li><a href="#">Конец</a></li>
   <li><span>|</span></li>
   <li><a href="#">Все</a></li>
   <div class="clr"></div>
</ul>


Все просто и понятно.

За основу берем стандартный шаблон bitrix:system.pagenavigation. В нем почему-то стиль написания переменныех не такой, как в других шаблонах. Похоже что его делал другой человек.

Для удобства переименуем переменные в человекопонятные, и вынесим создание URL-ов в файл result_modifier.php чтобы отделить данные от представления.

Файл result_modifier.php
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

// page numbers
$arResult["NAV"]["RECORD_COUNT"] = $arResult["NavRecordCount"];
$arResult["NAV"]["PAGE_COUNT"] = $arResult["NavPageCount"];
$arResult["NAV"]["PAGE_NUMBER"] = $arResult["NavPageNomer"];
$arResult["NAV"]["PAGE_SIZE"] = $arResult["NavPageSize"];
$arResult["NAV"]["START_PAGE"] = $arResult["nStartPage"];
$arResult["NAV"]["END_PAGE"] = $arResult["nEndPage"];
$arResult["NAV"]["SHOW_ALL_MODE"] = $arResult["NavShowAll"];
$arResult["NAV"]["DO_SHOW_ALL"] = $arResult["bShowAll"];

$arResult["NavQueryString"] = str_replace('&amp;', '&', $arResult["NavQueryString"]);

parse_str($arResult["NavQueryString"], $GLOBALS["NAV"]["parsed_url"]);

// filename
$GLOBALS["NAV"]["nav_filename"] = $arResult["sUrlPath"];

// identificator of pager
$arResult["NAV"]["PAGER_ID"] = "PAGEN_".$arResult["NavNum"]; 
$arResult["NAV"]["SHOWALL_ID"] = "SHOWALL_".$arResult["NavNum"]; 


function MakeNewNavUrl($arAdd)
{
   $nav_url = $GLOBALS["NAV"]["nav_filename"]."?".http_build_query(array_merge($GLOBALS["NAV"]["parsed_url"], $arAdd), '', '&amp;'); 
   return $nav_url;
}

// first page url
$arResult["NAV"]["URL"]["FIRST_PAGE"] = MakeNewNavUrl(array($arResult["NAV"]["PAGER_ID"]=>"1"));

// previous page url
$arResult["NAV"]["URL"]["PREV_PAGE"]  = MakeNewNavUrl(array($arResult["NAV"]["PAGER_ID"]=>$arResult["NAV"]["PAGE_NUMBER"]-1));

// last page url
$arResult["NAV"]["URL"]["LAST_PAGE"]  = MakeNewNavUrl(array($arResult["NAV"]["PAGER_ID"]=>$arResult["NAV"]["PAGE_COUNT"]));

// next page url
$arResult["NAV"]["URL"]["NEXT_PAGE"] = MakeNewNavUrl(array($arResult["NAV"]["PAGER_ID"]=>$arResult["NAV"]["PAGE_NUMBER"]+1));

// some page url
for ($i=$arResult["NAV"]["START_PAGE"]; $i<=$arResult["NAV"]["END_PAGE"]; $i++)
{
   $arResult["NAV"]["URL"]["SOME_PAGE"][$i] = MakeNewNavUrl(array($arResult["NAV"]["PAGER_ID"]=>$i));
}
// show all url
$arResult["NAV"]["URL"]["SHOW_ALL"] = MakeNewNavUrl(array($arResult["NAV"]["SHOWALL_ID"]=>1));

// show by page url
$arResult["NAV"]["URL"]["SHOW_BY_PAGE"] = MakeNewNavUrl(array($arResult["NAV"]["SHOWALL_ID"]=>0));
?>

Теперь на выходе у нас получится красивый и аккуратный массив с данными, и не нужно будет в шаблоне формировать ссылки.

В последнее время мне нравится писать комментарии на английском, так я поддерживаю базовое знание английского языка. Небольшая зарядка для мозгов, так сказать.

Теперь можно со спокойной душой верстать шаблон (файл template.php):
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?if ($arResult["NavShowAlways"] || $arResult["NavPageCount"] > 1):?>
<ul class="pager">

   <?if ($arResult["NAV"]["PAGE_NUMBER"] == 1):?>
      <li>Начало</li>
      <li><span>|</span></li>
      <li>Пред.</li>
      <li><span>|</span></li>
   <?else:?>
      <li><a href="<?=$arResult["NAV"]["URL"]["FIRST_PAGE"]?>">Начало</a></li>
      <li><span>|</span></li>
      <li><a href="<?=$arResult["NAV"]["URL"]["PREV_PAGE"]?>">Пред.</a></li>
      <li><span>|</span></li>
   <?endif;?>

   <?for ($PAGE_NUMBER=$arResult["NAV"]["START_PAGE"]; $PAGE_NUMBER<=$arResult["NAV"]["END_PAGE"]; $PAGE_NUMBER++):?>
      <?if ($PAGE_NUMBER == $arResult["NAV"]["PAGE_NUMBER"]):?>
         <li class="num act"><?=$PAGE_NUMBER?></li>
      <?else:?>
         <li class="num"><a href="<?=$arResult["NAV"]["URL"]["SOME_PAGE"][$PAGE_NUMBER]?>"><?=$PAGE_NUMBER?></a></li>
      <?endif;?>
   <?endfor;?>

   <?if ($arResult["NAV"]["PAGE_NUMBER"] == $arResult["NAV"]["PAGE_COUNT"]):?>
      <li><span>|</span></li>
      <li>След.</li>
      <li><span>|</span></li>
      <li>Конец</li>
   <?else:?>
      <li><span>|</span></li>
      <li><a href="<?=$arResult["NAV"]["URL"]["NEXT_PAGE"]?>">След.</a></li>
      <li><span>|</span></li>
      <li><a href="<?=$arResult["NAV"]["URL"]["LAST_PAGE"]?>">Конец</a></li>      
   <?endif;?>


   <?if ($arResult["NAV"]["DO_SHOW_ALL"]):?>
      <li><span>|</span></li>
         <?if (!$arResult["NAV"]["SHOW_ALL_MODE"]):?>
            <li><a href="<?=$arResult["NAV"]["URL"]["SHOW_ALL"]?>">Все</a></li>
         <?else:?>
            <li><a href="<?=$arResult["NAV"]["URL"]["SHOW_BY_PAGE"]?>">Постранично</a></li>
         <?endif;?>
   <?endif;?>

   <div class="clr"></div>
</ul>
<?endif;?>


Варианта для "обратной навигации" я не делал, так как никогда её не использовал, и если честно, до сих пор не очень понимаю зачем она вообще нужна.

Вот и все. Теперь меня уже не будет бросать в дрожь при виде нестандартной навигационной цепочки.

P.S. Очень удручает что нету подсветки кода в блогах. Хоть бери, и вручную его раскрашивай.

 

 

Источник: http://dev.1c-bitrix.ru/community/webdev/user/16182/blog/1179/

Назад в раздел

Подписаться на новые материалы раздела:
Загрузка...