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


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

6028
8.4 из 10
Проголосовало: 5






Вас давно интересует вопрос: "как сделать переключатели назад, вперёд и убрать лишнюю информацию?" Так вам очень крупно повезло, в этой теме вы как раз узнаете как это сделать, причем без использования скриптов скрипты 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 стилях.

На этом всё, спасибо за внимание!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://www.uotvet.ru/
  • Всего комментариев: 1

Sansey
0
Sansey написал: Написано 05 Апреля 2015 в 18:42
Комментарий №1
НЕ РАБОТАЕТ!

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • sasha2016tv написал:
  • Хороший скрипт
    Ох. Вижу, что обсуждение очень старое. Но!
    На других CMS так же будет все это реализовано. На нормальных CMS.
    Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

    Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
    Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
    Последние темы
    Опрос
    229
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: