Информер тегов с сортировкой по алфавиту

Разворачиваемый информер тегов с сортировкой по алфавиту — не займёт много места на странице и позволит пользователям находить нужные материалы по тегам. Стандартный информер выводит определенное количество ссылок на материалы, добавляя стили, которые часто рушат вёрстку, к тому же ориентироваться в в них достаточно сложно.

Решение представляет собой блок, содержащий небольшое количество тегов, ведь у нас нет задачи загрузить посетителя вашего сайта океаном тегов ваших материалов сходу. При нажатии на «Показать больше» будет выведен расширенный список тегов и в помощь пользователю появится кнопка «Сортировать по алфавиту».

Вам потребуется создать 2 информера и установить код в таблицу стилей и на необходимую страницу. Функционально, удобно, полезно. А теперь подробно:

Код информера


В панели управлений перейдите на вкладку «Инструменты», затем «Информеры» и создайте 2 информера для вывода минимального и полного списка тегов в блоке.

Первый информер

  • Название: Теги small
  • Раздел: Теги
  • Способ вывода: облако тегов
  • Модули: выберите один (рекомендуется) или несколько модулей. Материалы этих модулей будут выводиться в блоке
  • Количество тегов: 60 (любое количество, рекомендуем указать значение в пределах 40-80)
Нажмите на кнопку «Создать». Запомните код информера, например $MYINF_27$, код может отличаться именно в цифрах.

Второй информер

  • Название: Теги small
  • Раздел: Теги
  • Способ вывода: облако тегов
  • Модули: установите аналогичные первому информеру настройки
  • Количество тегов: 220 (любое количество, рекомендуем указать значение в пределах 200-250)
Нажмите на кнопку «Создать». Запомните код информера, например $MYINF_28$, код может отличаться именно в цифрах.

Код CSS


В панели управлений перейдите на вкладку «Дизайн», затем «Редактор». Вы окажитесь на странице редактирования таблицы (CSS) - если нет, то перейдите на эту вкладку. Установите в самом конце следующий код:
.text_center {text-align: center;}
.center{margin: 0 auto;}
hr.clear {height: 0;padding: 0;margin: 0;background: transparent !important;}
.pointer {cursor: pointer;}

.eTag {
display: block !important;
float: left;
height: 30px;
border: 1px solid #e2e2e2;
text-align: center;
padding: 4px 10px 2px 10px; /* 4px - отступ сверху, возможно, его придётся отредактировать под ваш шрифт */
position: relative;
margin: 0 8px 12px 0;
font-size: 11px!important; /* 11px - размер шрифта, возможно, его придётся отредактировать для правильного отображения */
color: #434343;
text-decoration: none!important;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-transform: uppercase; /* теги содержат символы в разном регистре, решаем эту проблему */
}

.eTag:hover {background:#e2e2e2;color: #434343}
#panel3, #panel3_b{
height:auto;
display:none;
position:relative;
}

.active2{display: none !important;}

Код


Варианты установки кода:
  • Установите приведённый ниже код на страницу нужного модуля, рекомендуем установить именно на «Главная страница модуля», или в любой глобальный блок, который расположен до закрывающего тега </body>
  • или
  • Установите код на нужную страницу сайта в режиме HTML редактора или в режиме визуального редактора, воспользовавшись кнопкой «источник».
<script type="text/javascript">
$(document).ready(function(){
$(".slide-btn2").click(function(){
$("#panel12").slideUp("slow");
$('.active2').removeClass('active2');
$("#panel3_b").slideToggle("slow");
$(this).toggleClass("active2");
return false;
});
});
</script>

<h4 class="h1">Популярные теги</h4>
<div id="panel12">
$MYINF_27$ <!-- номер 27 замените на номер первого информера -->
</div>

<div id="panel3_b" class="uEntriesList">
<div id="tags">$MYINF_28$ <!-- номер 28 замените на номер второго информера -->
</div>

<script type="text/javascript">
/*
* jQuery TinySort 1.0.2
* Copyright (c) 2008 Ron Valstar
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}(';(5($){$.r={Q:"G",1f:"1.0.2",M:{z:"H",9:"",D:"X",E:O}};$.8.K({r:5(d,e){6(d&&S(d)!="T"){e=d;d=U}3 f=$.K({},$.r.M,e);3 g={};4.v(5(i){3 a=(!d||d=="")?$(4):$(4).V(d);3 b=f.z=="Z"?""+I.15():(f.9==""?a.P():a.9(f.9));3 c=$(4).L();6(!g[c])g[c]={s:[],n:[]};6(a.7>0)g[c].s.q({s:b,e:$(4),n:i});W g[c].n.q({e:$(4),n:i})});w(3 h J g){3 j=g[h];j.s.16(5 18(a,b){3 x=a.s.t?a.s.t():a.s;3 y=b.s.t?b.s.t():b.s;6(B(a.s)&&B(b.s)){x=F(a.s);y=F(b.s)}u(f.z=="H"?1:-1)*(x<y?-1:(x>y?1:0))})}3 k=[];w(3 h J g){3 j=g[h];3 l=[];3 m=$(4).7;Y(f.D){A"10":$.v(j.s,5(i,a){m=I.11(m,a.n)});C;A"12":$.v(j.s,5(i,a){l.q(a.n)});C;A"13":m=j.n.7;C;14:m=0}3 n=[0,0];w(3 i=0;i<$(4).7;i++){3 o=i>=m&&i<m+j.s.7;6(N(l,i))o=17;3 p=(o?j.s:j.n)[n[o?0:1]].e;p.L().19(p);6(o||!f.E)k.q(p.1a(0));n[o?0:1]++}}u 4.1b(k)}});5 B(n){u/^[\\+-]?\\d*\\.?\\d*$/.1c(n)};5 N(a,n){3 b=O;$.v(a,5(i,m){6(!b)b=m==n});u b};$.8.G=$.8.1d=$.8.1e=$.8.r})(R);',62,78,'|||var|this|function|if|length|fn|attr|||||||||||||||||push|tinysort||toLowerCase|return|each|for|||order|case|isNum|break|place|returns|parseFloat|TinySort|asc|Math|in|extend|parent|defaults|contains|false|text|id|jQuery|typeof|string|null|find|else|start|switch|rand|first|min|org|end|default|random|sort|true|zeSort|append|get|setArray|exec|Tinysort|tsort|version'.split('|'),0,{}))
</script>
<script type="text/javascript">
$(document).ready(function(){
/* Создание ссылки сортировки по алфавиту */
var sortabc = $('<hr class="clear" /><div class="center text_center"><span href="javascript:void(0)" class="pointer">Сортировать по алфавиту</span></div>').toggle(
function(){
$("#tags a").tsort({order:"asc"});
},
function(){
$("#tags a").tsort({order:"desc"});
}
);
$('#tags').append(sortabc);
});
</script>
</div><hr class="clear" />
<div class="slide1 center text_center"><span class="slide-btn2 pointer">Показать больше</span></div>

Как это работает


Мы выводим в блок 2 информера с полным и кратким содержанием тегов. Скрипт скрывает краткий список и выводит полный, при нажатии на «Показать больше», при этом краткий список скрывается. Дальше активизируется второй скрипт, который отвечает за сортировку тегов по алфавиту. Кстати, он работает в обе стороны: «а-я» и «я-а», а также ему знакома латиница.

Демо   

egorshorin
27 января 2017