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

6123
8.6 из 10
Проголосовало: 6






Вас давно интересует вопрос: "как сделать переключатели назад, вперёд и убрать лишнюю информацию?" Так вам очень крупно повезло, в этой теме вы как раз узнаете как это сделать, причем без использования скриптов скрипты 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 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: