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


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

5944
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 4
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: