Главная » Для UCOZ » 2016 » Сентябрь » 23 » Облако тегов с переключателем вида и фильтром по алфавиту

Разное

Облако тегов с переключателем вида и фильтром по алфавиту



Теги: облако тегов, Информеры


Итак, представляю вам новый вариант облака тегов для сайтов uCoz. В чём его особенность?
- возможность переключения между стандартным видом облака тегов и списком в один клик
- возможность фильтрации тегов по алфавиту в обе стороны
- сочетание двух первых опций.



ДЕМО

Итак, для начала вам понадобится создать информер "Облако тегов". При этом в опциях выбираете способ вывода "Облако тегов". Вставляете его в нужное вам место таким образом:

Код

<div id="tags"><ul>$MYINF_1$</ul></div>


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

Код

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


а в самом низу кода страниц, перед закрывающим тегом body, подключаем скрипты:

Код


<script type="text/javascript" src="js/tinysort.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
   
  // create a style switch button
  var switcher = $('<a href="javascript:void(0)" class="btn"><i class="fa fa-clone" aria-hidden="true"></i> Вид отображения тегов</a>').toggle(
  function(){
  $("#tags ul").hide().addClass("tagItem").fadeIn("fast");
  },
  function(){
  $("#tags ul").hide().removeClass("tagItem").fadeIn("fast");
  }
  );
  $('#tags').append(switcher);
   
  // create a sort by alphabet button
  var sortabc = $('<a href="javascript:void(0)" class="btn"><i class="fa fa-sort-alpha-asc" aria-hidden="true"></i> Сортировать по алфавиту</a>').toggle(
  function(){
  $("#tags ul a").tsort({order:"asc"});
  },  
  function(){
  $("#tags ul a").tsort({order:"desc"});
  }  
  );
  $('#tags').append(sortabc);  
   

   
});
</script>


В шаблоне "Таблица стилей (CSS) добавить стили:

Код

.eTag {
font-size:12px!important;
}
.eTag:before {
content: "\f02b";font-family: FontAwesome;margin-right:2px;
}  
#tags ul{
margin:1em 0;
padding:.5em 10px;
text-align:left;
background: #f7f9fa;
background: -moz-linear-gradient(top, #f7f9fa 0%, #f7f9fa 100%);
background: -webkit-linear-gradient(top, #f7f9fa 0%,#f7f9fa 100%);
background: linear-gradient(to bottom, #f7f9fa 0%,#f7f9fa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f7f9fa',GradientType=0 );
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#tags ul a{
text-decoration:none;
color:#6a7077;
padding:0 2px;  
}
#tags ul a:hover{  
color:#34495e;
}  
   
/* Альтернативный шаблон */

#tags .tagItem a{
text-align:left;
padding:0;
background: #f7f9fa;
}
#tags .tagItem a{
padding:2px 10px;
display:block;
border-bottom:1px #e4e5e7 solid;
}
#tags .tagItem a:before {
content: "-";  
}
#tags .tagItem a:nth-child(2n) {
background: #f1f3f6;
}  

[role="button"] {
  cursor: pointer;
}
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:focus,
.btn:active:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus {
  color: #333333;
  text-decoration: none;
}
.btn:active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-default {
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
}
.btn-default:focus {
  color: #333333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #333333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active {
  color: #333333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active:hover,
.btn-default:active:focus {
  color: #333333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.btn-default:active {
  background-image: none;
}
Обсуждение материала:
Комментариев: 6
1 ps-studio
В 12:02, 21.10.2016 оставил(а) комментарий:
Это решение используется на данном сайте, можете протестить его работу)
0 1488
В 10:18, 24.01.2017 оставил(а) комментарий:
Установил в блок, почему при нажатий сортировка, уходит за блок...
вот скриншот анимированный:
http://s019.radikal.ru/i621/1701/99/428b7caf3a61.gif
0 ps-studio
В 10:23, 24.01.2017 оставил(а) комментарий:
Значит не применяются стили альтернативного шаблона,надо смотреть...
0 1488
В 23:03, 24.01.2017 оставил(а) комментарий:
Применяются стили! так как вертикально работает разворот, тока сортировка что-то не так...
0 ps-studio
В 23:58, 24.01.2017 оставил(а) комментарий:
Сейчас создал новый сайт, по своей же инструкции из этого топика всё сделал, всё работает, ничего никуда не уплывает.
Скопируйте стили и скрипты с тестовой страницы, может так поможет
0 ps-studio
В 00:06, 25.01.2017 оставил(а) комментарий:
Здесь в статье тоже обновил на всякий случай и код стилей и код скриптов, мало ли...
avatar

    Оформляем теги в информере облака

    23.09.2016

    Сегодня еще один вариант для оформления тегов в информере облака тегов для uCoz. Всё оформление на чистом CSS, без использования изображений. Установка очень простая и понятная.

    Комментарии: 0   Просмотры: 286

    Оформление ссылок в информере "Облако тегов"

    26.08.2016

    Ну вот и до ссылок добрались) казалось бы, а чего тут можно придумать, ссылки они ссылки и есть. Однако же нет, можно. И в этом материале вы увидите, как можно видоизменить обычные ссылки в информере "Облако тегов". Этот информер я взял всего лишь в качестве примера, потому как то решение, которое мы с вами рассмотрим, применимо к любой ссылке (например, для ссылок меню и т.д.) Мы сделаем их более выразительными, добавим иконки для каждой ссылки и плавное затухание при наведении/убирании курсора мыши.

    Комментарии: 0   Просмотры: 260

Новые пользователи

Хостинг от uCoz