Хак постраничной навигации сайта на CMS Joomla!
    Эта статья поможет Вам модернизировать и видоизменить до неузнаваемости иногда очень незаметный но порой такой важный элемент вашего сайта на CMS Joomla!, как постраничная навигация. Казалось бы – мелочь, ан нет. Из мелочей складывается картина. Поэтому я предлагаю уделить вашей навигации наипристальнеейшее внимание.
    В линейке 1.0.x CMS Joomla! постраничная навигация имеет стандартный вид, и даже малоопытному хакеру достаточно просто взлянуть на нее чтобы понять на каком движке построен сайт.

<< В начало < Предыдущая 1 2 3 4 5 Следующая > В конец >>

    По прочтению данной статьи вы без особого труда сможете сделать любую постраничную навигацию, которая будет ограничена лиш вашей собственной фантазией

Примеры модернизации постраничной навигации
1.    Для начала нам нужно сделать небольшой хак файла includes/pageNavigation.php предварительно сделав его резервную копию(!). Для упрощения модификации прилагаю уже хакнутый файл  pageNavigation.php которым вам достаточно заменить оригинальный. Саму же суть хака мы рассмотрим чуть ниже.

2.    Скопируйте следующие описания стилей и вставте их в низ файла template_css.css (templates/название_шаблона/css/template_css.css) вашего шаблона и сохраните его.

/******************************************************/
/*            PAGENAV                                                         */
/******************************************************/
#flash_pagenavL{
background-position :top left;
background-repeat : no-repeat;
height: 17px;
}
#flash_pagenavR{
    display:block;
    margin-left:12px;
    background-position :top right;
    background-repeat : no-repeat;
    padding-right:12px;
    height: 17px;
}
#flash_pagenavR a:link,#flash_pagenavR a:visited,#flash_pagenavR a:hover{
    display:inline-block;
    font-family : sans-serif;
    text-decoration:none;
 
}
a.pagenavA:link, a.pagenavA:visited{

    color:#000000;
    margin-right:1px;
    margin-left:1px;
    /*font-weight : bold;*/
    font-family : sans-serif;
    border-bottom:3px solid #2E98C3;
    width:10px;
}
#flash_pagenavR a:hover{
border-bottom:3px solid #ff6633;
}
.pagenavS{
display:inline-block;
margin-right:1px;
margin-left:1px;
width:10px;
font-family : sans-serif;
border-bottom:3px solid #ff6633;
}

#flash_pagenavR .pagenavLLast,
#flash_pagenavR .pagenavPrev10,
#flash_pagenavR .pagenavPrev1,

#flash_pagenavR .pagenavRLast,
#flash_pagenavR .pagenavNext10,
#flash_pagenavR .pagenavNext1{

margin-right:2px;
margin-left:2px;
padding-right:2px;
padding-left:2px;

}

#flash_pagenavR .pagenavLLast{background: url(../images/leftlast.gif) no-repeat left ;}
#flash_pagenavR .pagenavPrev10{background: url(../images/left10.gif) no-repeat left ;}
#flash_pagenavR .pagenavPrev1{background: url(../images/left1.gif) no-repeat left ;}

#flash_pagenavR .pagenavRLast{background: url(../images/rightlast.gif) no-repeat right ;}
#flash_pagenavR .pagenavNext10{background: url(../images/right10.gif) no-repeat right ;}
#flash_pagenavR .pagenavNext1{background: url(../images/right1.gif) no-repeat right ;}

3.    Скопируйте изображения стрелочек в папку images вашего шаблона (templates/название_шаблона/images/).

ImageImageImageImageImageImage

4.    Вуаля!:) У вас должна получится следующая навигация. Наслаждайтесь. В некоторых браузерах после изменений нужно очистить кэш либо ctrl+F5.

Измененная постраничная навигация

    Также аналогично и для прочих панелей навигации. Повторяем все последовательные действия начиная с п.2 (поскольку хакнутый файл  pageNavigation.php общий для всего сайта и всех шаблонов).

2.    Копируем следующее описание стилей css и вставляем их в низ файла template_css.css (templates/название_шаблона/css/template_css.css) вашего шаблона и сохраняем его.

/******************************************************/
/*            PAGENAV                                                          */
/******************************************************/
#flash_pagenavL{
background-position :top left;
background-repeat : no-repeat;
height: 17px;
}
#flash_pagenavR{
    display:block;
    margin-left:12px;
    background-position :top right;
    background-repeat : no-repeat;
    padding-right:12px;
    height: 17px;
}
#flash_pagenavR a:link,#flash_pagenavR a:visited,#flash_pagenavR a:hover{
    color:#ffffff;
    display:inline-block;
    font-family : sans-serif;
    text-decoration:none;
    background-color: #ff9933;
    padding-right:2px;
    padding-left:2px;
 
}
a.pagenavA:link, a.pagenavA:visited{
 
    color:#ffffff;
    /*margin-right:1px;*/
    margin-left:1px;
    font-weight : bold;
    font-family : sans-serif;
    border:1px solid #7e7e7e;
    width:10px;
 
}
#flash_pagenavR a:hover{
border:1px solid #7e7e7e;
}
.pagenavS{
color:#ff9933;
display:inline-block;
/*margin-right:1px;*/
margin-left:1px;
padding-right:2px;
    padding-left:2px;
width:10px;
font-weight : bold;
font-family : sans-serif;
border:1px solid #7e7e7e;
}

#flash_pagenavR .pagenavLLast,
#flash_pagenavR .pagenavPrev10,
#flash_pagenavR .pagenavPrev1,

#flash_pagenavR .pagenavRLast,
#flash_pagenavR .pagenavNext10,
#flash_pagenavR .pagenavNext1{
width:8px;
border:1px solid #7e7e7e;
/*margin-right:1px;*/
margin-left:1px;
padding-right:4px;
padding-left:4px;

}

#flash_pagenavR .pagenavLLast{background: url(../images/leftlast.gif) no-repeat left ;}
#flash_pagenavR .pagenavPrev10{background: url(../images/left10.gif) no-repeat left ;}
#flash_pagenavR .pagenavPrev1{background: url(../images/left1.gif) no-repeat left ;}

#flash_pagenavR .pagenavRLast{background: url(../images/rightlast.gif) no-repeat right ;}
#flash_pagenavR .pagenavNext10{background: url(../images/right10.gif) no-repeat right ;}
#flash_pagenavR .pagenavNext1{background: url(../images/right1.gif) no-repeat right ;}

3.    Копируем изображения стрелочек в папку images вашего шаблона (templates/название_шаблона/images/).

ImageImageImageImageImageImage

4.     В этот раз у нас вышла следующая панелька навигации сайта:
Измененная постраничная навигация


Создание индивидуальной навигации

Для создания индивидуальной постраничной навигации вашего сайта на CMS Joomla! вам помогут следующие иллюстрации:
Создание фона
Создание стилей CSS

Хак файла pageNavigation.php

Теперь подробнее рассмотрим непосредственно модификацию файла, который отвечает в CMS Joomla! за вывод постраничной навигации.

Оригинал модифицируемой функции в pageNavigation.php (примерно 109 строка для версии Joomla_1.0.10-RE):
 
function writePagesLinks( $link ) {
    $txt = '';
 
    $displayed_pages = 10;
    $total_pages = ceil( $this->total / $this->limit );
    $this_page = ceil( ($this->limitstart+1) / $this->limit );
    $start_loop = (floor(($this_page-1)/$displayed_pages))*$displayed_pages+1;
    if ($start_loop + $displayed_pages - 1 < $total_pages) {
      $stop_loop = $start_loop + $displayed_pages - 1;
    } else {
      $stop_loop = $total_pages;
    }
 
    $link .= '&amp;limit='. $this->limit;
 
        if (!defined( '_PN_LT' ) || !defined( '_PN_RT' ) ) {
            DEFINE('_PN_LT','&lt;');
            DEFINE('_PN_RT','&gt;');
        }
        if (_PN_LT || _PN_RT) $pnSpace = " ";
 
    if ($this_page > 1) {
      $page = ($this_page - 2) * $this->limit;
      $txt .= '<a href="'. sefRelToAbs( "$link&amp;limitstart=0" ) .'
" class="pagenav" title="'. _PN_START .'">'. _PN_LT . _PN_LT . $pnSpace . _PN_START .'</a> ';
      $txt .= '<a href="'. sefRelToAbs( "$link&amp;limitstart=$page" ) .'
" class="pagenav" title="'. _PN_PREVIOUS .'">'. _PN_LT . $pnSpace . _PN_PREVIOUS .'</a> ';
    } else {
      $txt .= '<span class="pagenav">'. _PN_LT . _PN_LT . $pnSpace . _PN_START .'</span> ';
      $txt .= '<span class="pagenav">'. _PN_LT . $pnSpace . _PN_PREVIOUS .'</span> ';
    }
 
    for ($i=$start_loop; $i <= $stop_loop; $i++) {
      $page = ($i - 1) * $this->limit;
      if ($i == $this_page) {
        $txt .= '<span class="pagenav">'. $i .'</span> ';
      } else {
        $txt .= '<a href="'. sefRelToAbs( $link .'&amp;limitstart='. $page ) .'
" class="pagenav"><strong>'. $i .'</strong></a> ';
      }
    }
 
    if ($this_page < $total_pages) {
      $page = $this_page * $this->limit;
      $end_page = ($total_pages-1) * $this->limit;
      $txt .= '<a href="'. sefRelToAbs( $link .'&amp;limitstart='. $page ) .' 
" class="pagenav" title="'. _PN_NEXT .'">'. _PN_NEXT . $pnSpace . _PN_RT .'</a> ';
      $txt .= '<a href="'. sefRelToAbs( $link .'&amp;limitstart='. $end_page ) .' 
" class="pagenav" title="'. _PN_END .'">'. _PN_END . $pnSpace . _PN_RT . _PN_RT .'</a>';
    } else {
      $txt .= '<span class="pagenav">'. _PN_NEXT . $pnSpace . _PN_RT .'</span> ';
      $txt .= '<span class="pagenav">'. _PN_END . $pnSpace . _PN_RT . _PN_RT .'</span>';
    }
    return $txt;
  }
Теперь приведем хакнутую версию. Как видите, тут переменная $txt, которая будет на выходе функции, обрамлена тегом table и span. Так же все элементы внесены в классы.

function writePagesLinks( $link ) {
    $txt = '';
    $displayed_pages = 10;
    $total_pages = ceil( $this->total / $this->limit );
    $this_page = ceil( ($this->limitstart+1) / $this->limit );
    $start_loop = (floor(($this_page-1)/$displayed_pages))*$displayed_pages+1;
    if ($start_loop + $displayed_pages - 1 < $total_pages) {
      $stop_loop = $start_loop + $displayed_pages - 1;
    } else {
      $stop_loop = $total_pages;
    }
 
    if ($start_loop > $displayed_pages) {
    $page = ($this_page - 2) * $this->limit;
    $page_p10 = ($start_loop * $this->limit)-2;
    $txt .= '<a href="'. sefRelToAbs( "$link&amp;limitstart=0" ) .'
" class="pagenavLLast" title="На первую">&nbsp;</a> ';
    $txt .= '<a href="'. sefRelToAbs( "$link&amp;limitstart=$page_p10" ) .'
" class="pagenavPrev10"  title="Предыдущие '.$displayed_pages.'">&nbsp;&nbsp;</a> ';
    $txt .= '<a href="'. sefRelToAbs( "$link&amp;limitstart=$page" ) .'
" class="pagenavPrev1" title="Назад">&nbsp;</a> ';
    }
    for ($i=$start_loop; $i <= $stop_loop; $i++) {
      $page = ($i - 1) * $this->limit;
      if ($i == $this_page) {
        $txt .= '<span class="pagenavS">'. $i .'</span> ';
      } else {
        $txt .= '<a href="'. sefRelToAbs( $link .'&amp;limitstart='. $page ) .'
" class="pagenavA">'. $i .'</a> ';
      }
    }
    if ($i < $total_pages) {
    $page = $this_page * $this->limit;
    $page_p10 = $start_loop+($displayed_pages-1);
    $end_page = ($total_pages-1) * $this->limit;
    $txt .= '<a href="'. sefRelToAbs( $link .'&amp;limitstart='. $page ) .' 
" class="pagenavNext1" title="Вперёд">&nbsp;</a> ';
    $txt .= '<a href="'. sefRelToAbs( "$link&amp;limitstart=$page_p10" ) .'
" class="pagenavNext10"  title="Следующие '.$displayed_pages.'">&nbsp;&nbsp;</a> ';
    $txt .= '<a href="'. sefRelToAbs( $link .'&amp;limitstart='. $end_page ) .' 
" class="pagenavRLast" title="На последнюю ('.$total_pages.')">&nbsp;</a>';
    }
    
    //adjustment
    
    $txt = '<table cellpadding="0" cellspacing="0" align="center">
<tr><td id="flash_pagenavL"><span id="flash_pagenavR">'.$txt.'</span></td></tr></table>';
    
    return $txt;
  }


Идея и исполнение  --Svist--, joomlaforum.ru

P.S.: работу данного хака вы можете увидеть на этом сайте.
 

Комментарии  

  1. #1 Enter
    2008-06-0911:35:03 Да классный хак Главное - рабочий!
  2. #2 Aleks_El_Dia
    2008-06-1408:37:07 Естественно рабочий
  3. #3 Игорь
    2008-07-1715:35:03 5 балов автору
  4. #4 Vastus
    2008-08-0610:03:44 Зачет!
  5. #5 gadson
    2008-08-0719:56:26 А для Joomla 1.5 данный хак применим?
  6. #6 Aleks_El_Dia
    2008-08-0810:28:03
    Цитирую gadson:
    А для Joomla 1.5 данный хак применим?

    Нет. Но можно, при желании, используя идею этой темы, создать аналогичный для линейки 1.5.x

Добавить комментарий

:D:lol::-);-)8):-|:-*:oops::sad::cry::o:-?:-x:eek::zzz:P:roll::sigh:


Защитный код
Обновить

« Пред.   След. »
Последние новости
Joomla! 1.5.4 Joomla! 1.0.15
© 2008 AEDStudio Joomla! Direction - Статьи о CMS Joomla!
Design & Powered by AEDStudio Joomla! Direction