Переключатели страниц для uCoz назад и вперед без JS для модуля Новости от uOtvet.ru
827материалов
228тем на форуме
3004комментария
6159пользователей

Переключатели страниц для uCoz назад и вперед без JS для модуля Новости от uOtvet.ru


Вас давно интересует вопрос: "как сделать переключатели назад, вперёд и убрать лишнюю информацию?" Так вам очень крупно повезло, в этой теме вы как раз узнаете как это сделать, причем без использования скриптов скрипты jquery/js. Кстати на просторах uCoz можно найти различные JS решения по данному вопросу, но они все созданы по одному простому принципу, скрывают старые переключатели и прописывают новые. 

К сожалению старый HTML код переключателей все ровно будет прописан в шаблоне сайта, так как он является системным кодом от uCoz. 

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

Начнем мы с модуля Новости сайта и так давайте приступим. 
Шаг №1 - Замена надписей 

Для начала давайте заменим символы переключателей страниц « и » к примеру на Вперёд и Назад. Для этого нам следует зайти 

в Админ панель => Замена стандартных надписей 

где следует выбрать категорию Разное


далее найти нужные символы для замены и рядом с полями нажать на ссылку Изменить, и вписать нужные слова, Вперёд и Назад. 

Незабываем нажать на кнопку Сохранить

Шаг №2 - CSS стили 

Для данного примера я взял свои CSS стили переключателей страниц: 
Код
/* Переключатели страниц   
   ------------------------------------------*/#pagesBlock1 a:link,   
#pagesBlock1 a:visited,   
#pagesBlock1 a:hover,   
#pagesBlock1 a:active {   
   margin: 0px 2px;   
   padding:3px 6px;   
   background:#fff;   
   border:1PX SOLID #CAD1DB;   
   border-radius:3px;   
   color:#777;   
}   

#pagesBlock1 a:hover{   
   color:#fff;   
   background:#72B2DA;   
   border:1PX SOLID #72B2DA;   
}

Обратите внимание на то, что я уже взял за основу идентификатор pagesBlock1, который прописан в HTML коде переключателей ниже. 

Шаг №3 - HTML код 

в данном коде нам следует скрыть с глаз долой следующие теги: 

1. тег b, отвечающий за отображение номера страницы на которой находиться пользователь 
2. три точки, разделяющие отображение первых двух и последних страниц сайта 
3. не нужные ссылки на другие страницы 

скрывать данную информацию будем благодаря CSS стилям. 

Код
#pagesBlock1 a,   
#pagesBlock1 b,   
#pagesBlock1 .swchItemDots {display:none}

а для того чтоб отобразить первую и последнюю ссылку с надписями Вперёд и Назад, дописываем следующие значения в CSS код: 
Код
#pagesBlock1 a:last-child,   
#pagesBlock1 a:first-child {display:inline!important;}

Теперь на Главной странице сайта будет отображаться кнопка с надписью Вперёд, а на странице Архив материала Вперёд и Назад. 

Примечание 

Я уверен, что многим читателям захочется вернуть на страницу Архив материалов сайта, номер страницы на которой находится пользователь. 

Для этого заходим в Админ панель => Дизайн => Управление дизайном (Шаблоны) и выбираем Новости сайта => Страница архива материалов 

где следует заменить тег 
Код
<body>

на 
Код
<body class="page-number-yes">

а в CSS стилях прописать следующие значения: 
Код
.page-number-yes #pagesBlock1 b {display:inline!important;}

И в завершении, чтобы не запутаться в CSS стилях посмотрим на конечный код: 
Код
/* Переключатели страниц   
   ------------------------------------------*/   
#pagesBlock1 b,   
#pagesBlock1 a:link,   
#pagesBlock1 a:visited,   
#pagesBlock1 a:hover,   
#pagesBlock1 a:active {   
   margin: 0px 2px;   
   padding:3px 6px;   
   background:#fff;   
   border:1PX SOLID #CAD1DB;   
   border-radius:3px;   
   color:#777;   
}   

#pagesBlock1 b ,   
#pagesBlock1 a:hover{   
   color:#fff;   
   background:#72B2DA;   
   border:1PX SOLID #72B2DA;   
}   

#pagesBlock1 a,   
#pagesBlock1 b,   
#pagesBlock1 .swchItemDots {display:none}   

#pagesBlock1 a:last-child,   
#pagesBlock1 a:first-child {display:inline!important;}   
.page-number-yes #pagesBlock1 b {display:inline!important;}

P.S 
Хочу обратить внимание на то, что выше написанное примечание не будет работать в модуле Блог. 

Данное CSS решение я тестировал на последних версиях современных браузерах, есть вероятность того, что на более старых версиях не будет работать значения :last-child и :first-child, в CSS стилях. 

На этом всё, спасибо за внимание!

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 20.09.2014 в 14:35
Материал просмотрен: 2371 раз
Категория материала: Скрипты для uCoz
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо
Источник

1 комментарий


FeerNoom
VLADIMIR @FeerNoom 16.06.2015 18:401
+1
Намного приятней и красивей стандартных)
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта