Форум ChatPlanet.ru

Форум ChatPlanet.ru (http://www.chatplanet.ru/forum/index.php)
-   Шаблоны (http://www.chatplanet.ru/forum/forumdisplay.php?f=15)
-   -   Теги по категориям (http://www.chatplanet.ru/forum/showthread.php?t=708)

Mickeleangelo 09.01.2010 03:10

Теги по категориям
 
Сейчас я расскажу вам довольно простой способ разбить теги на категории. Сразу предупреждаю, что никакого автоматизма не будет и при изменении в тегах надо будет делать изменения и в разбивке.

1. Открываем страницу с тегами чата: /help?tags и сразу лезем в исходный код. Как вы видите, там есть небольшая шапка, а за ней сразу идут теги. Давайте перенесем шапку и подвал на отдельную свободную страницу в админке:
Код HTML:

<html><head><title>Помощь</title>
%CSS(5)%
</head>
<body>

<center><h2>Тэги</h2></center>

<!-- Тут были теги -->

<div align=right><a href="/help">помощь</a></div>

</body>
</html>

2. Подготовим немного кода для того, чтобы появились категории
Код HTML:

<html><head><title>Помощь</title>
%CSS(5)%
<style type="text/css">
.catmenu {
  text-align: center;
}
.catmenu span {
  margin: 0 10px; /* Отступы между пунктами */
  padding: 3px 7px; /* Отступы внутри пунктов */
}
</style>
<script type="text/javascript">
categories = 4; // Сюда пишем общее количество категорий
function ChangeCategory(catnum)
{
  for(i=1;i<=categories;i++){
    var catdiv = document.getElementById("cat" + i);
    var catsp = document.getElementById("catsp" + i);
    if(i == catnum){
        catdiv.style.display = "block";
        catsp.style.background = "#FFF68D"; // Фон текущего пункта
        catsp.style.color= "#000"; // Цвет текущего пункта
        catsp.style.cursor= "auto";
    }else{
        catdiv.style.display = "none";
        catsp.style.background = "transparent";
        catsp.style.color= "inherit";
        catsp.style.cursor= "pointer";
    }
  }
}
</script>

</head>
<body>

<center><h2>Тэги</h2></center>

<!-- Меню начало -->
<div class="catmenu">
    <span id="catsp1" onclick="ChangeCategory(1);">Вход / Выход</span>
    <span id="catsp2" onclick="ChangeCategory(2);">Веселые</span>
    <span id="catsp3" onclick="ChangeCategory(3);">Грустные</span>
    <span id="catsp4" onclick="ChangeCategory(4);">Другие</span>
</div>
<!-- Меню конец -->

<!-- Категории начало -->

<div id="cat1">

</div>

<div id="cat2">

</div>

<div id="cat3">

</div>

 <div id="cat4">

</div>

 <!-- Категории конец -->

<div align=right><a  href="/help">помощь</a></div>

<script type="text/javascript">
ChangeCategory(1);
</script>
</body>
</html>

3. Осталось теперь в каждом блоке категорий сделать список <ul>, в который помещаются нужные теги. Коды тегов берите со стандартной страницы. По-умолчанию, в шаблонах сделано так, что каждый тег начинается с <li>. Пример того, что получается:
Код HTML:

<html><head><title>Помощь</title>
%CSS(5)%
<style type="text/css">
.catmenu {
  text-align: center;
}
.catmenu span {
  margin: 0 10px; /* Отступы между пунктами */
  padding: 3px 7px; /* Отступы внутри пунктов */
}
</style>
<script type="text/javascript">
categories = 4; // Сюда пишем общее количество категорий
function ChangeCategory(catnum)
{
  for(i=1;i<=categories;i++){
    var catdiv = document.getElementById("cat" + i);
    var catsp = document.getElementById("catsp" + i);
    if(i == catnum){
        catdiv.style.display = "block";
        catsp.style.background = "#FFF68D"; // Фон текущего пункта
        catsp.style.color= "#000"; // Цвет текущего пункта
        catsp.style.cursor= "auto";
    }else{
        catdiv.style.display = "none";
        catsp.style.background = "transparent";
        catsp.style.color= "inherit";
        catsp.style.cursor= "pointer";
    }
  }
}
</script>

</head>
<body>

<center><h2>Тэги</h2></center>

<!-- Меню начало -->
<div class="catmenu">
    <span id="catsp1" onclick="ChangeCategory(1);">Вход / Выход</span>
    <span id="catsp2" onclick="ChangeCategory(2);">Веселые</span>
    <span id="catsp3" onclick="ChangeCategory(3);">Грустные</span>
    <span id="catsp4" onclick="ChangeCategory(4);">Другие</span>
</div>
<!-- Меню конец -->

<!-- Категории начало -->

<div id="cat1">
<ul>

<li>/bye<table cellspacing=0 cellpadding=0><tr><td><b>*** nick <font color=#00FFFF>И<font color=#09DADA>С<font color=#12B5B5>Ч<font color=#1B9999>Е<font color=#248B8B>З<font color=#1D6666>А<font color=#164141>Е<font color=#103030>Т...</td></tr></table>

</ul>
</div>

<div id="cat2">
<ul>

<li>/@<table cellspacing=0 cellpadding=0><tr><td><b>*** nick <font color=#FF7893>@<font color=#A3CF33>}<font color=#55CC33>-,-`-,-</td></tr><tr><td><b>*** nick <font color=#F0A893>@<font color=#C3FF33>}<font color=#77FF77>-,-`-,-</td></tr><tr><td><b>*** nick <font color=#FFF8F3>@<font color=#93FF63>}<font color=#A9FC33>-,-`-,-</td></tr><tr><td><b>*** nick <font color=#FFC893>@<font color=#A3FF33>}<font color=#99CC33>-,-`-,-</td></tr><tr><td><b>*** nick <font color=#AFC8C3>@<font color=#53FF53>}<font color=#99EC33>-,-`-,-</td></tr></table>
<li>/crypt<table cellspacing=0 cellpadding=0><tr><td><b>*** nick <font color=#E3C4D0>Hold me. Kiss me. Love me. Kill me. Drag-and-drop and plug-and-play me..</td></tr><tr><td><b>*** nick <font color=#FF0000>выливает себе на голову бутыль кетчупа..</td></tr><tr><td><b>*** nick <font color=#6666F0>поправляет <font color=#FFFF6F>НИМБ</font> над головой и сдувает пылинки с крылушек..</td></tr><tr><td><b>*** nick <font color=#0000FF>..Дельфины - это не только вкусные плавники, но и пара не-деЦких <font color=#FFFF00>ангельских</font> крылушков..</td></tr></table>

</ul>
</div>

<div id="cat3">
<ul>

<li>/cry<table cellspacing=0 cellpadding=0><tr><td><b>*** nick ..плакает..</td></tr><tr><td><b>*** nick ..кап-кап слёзки на подушку..</td></tr><tr><td><b>*** nick <font color=#FFFAFA>закатывает истерику</td></tr><tr><td><b>*** nick <font color=#FFCCFF>хнык-хнык <font color=#FF99FF>хнык-хнык <font color=#FF66FF>хнык-хнык <font color=#FF33FF>хнык-хнык</td></tr></table>
<li>/crystal<table cellspacing=0 cellpadding=0><tr><td><b>*** nick <font color=#B6C1F8>..кристальная слеза сверкает..</td></tr><tr><td><b>*** nick <font color=#FFB6C1>..лица магический овал..</td></tr><tr><td><b>*** nick <font color=#F0F230>..вот она какая, большая сетевая.. <font color=#FF0000>ЛЮБО-О-О-ОВЬ!..</td></tr></table>
<li>/dead<table cellspacing=0 cellpadding=0><tr><td><b>*** nick <font color=#EEFFEE>находится в состоянии клинической смерти 8-(</td></tr><tr><td><b>*** nick <font color=#FF6677>.. нет, я так больше не могу! (пистолет к голове) <font color=#FFCCCC>Бах!</font> .. скорую вызывали?</td></tr><tr><td><b>*** nick <font color=#FF66AA>в жутких мучениях, с дыркой в голове покидает наш мир</td></tr></table>

</ul>
</div>

<div id="cat4">
<ul>

<li>/drink<table cellspacing=0 cellpadding=0><tr><td><b>*** nick <font color=#337766>напивается..</td></tr><tr><td><b>*** nick <font color=#997766>мучается жаждой.. пить хочет..</td></tr></table>

</ul>
</div>

<!-- Категории конец -->

<div align=right><a href="/help">помощь</a></div>

<script type="text/javascript">
ChangeCategory(1);
</script>
</body>
</html>

4. Дополнительно можно настроить виртуальную страницу /tags/ —> /page/X/, а полностью сделанную страницу можете посмотреть в нашем демо-чате.

eXandr 09.01.2010 03:19

Надо потрахатся, но зачотно:))))))

Mickeleangelo 09.01.2010 04:36

Цитата:

Сообщение от eXandr (Сообщение 15691)
Надо потрахатся

Операция анти-трах. Зачем переносить теги ручками, если за нас это может сделать машина? Правильно, незачем. Идем в админку, меняем HTML Шаблоны-1 — окно списка тегов:
Код HTML:

<style type="text/css">
.catmenu {
  text-align: center;
}
.catmenu span {
  margin: 0 10px;
  padding: 3px 7px;
}
</style>
<script type="text/javascript" src="http://www.chatplanet.ru/service/jquery.js"></script>
<script type="text/javascript">
categories = 4; // Сюда пишем общее количество категорий
function ChangeCategory(catnum)
{
  for(i=1;i<=categories;i++){
    var catdiv = $("#cat" + i);
    var catsp = $("#catsp" + i);
    if(i == catnum){
        catdiv.show();
        catsp.css("background", "#FFF68D").css("color", "#000").css("cursor", "auto");
    }else{
        catdiv.hide();
        catsp.css("background", "transparent").css("color", "").css("cursor", "pointer");
    }
  }
}
</script>


%NICK = %?%USER('NICK')%%:%nick?%%
<center><h2>Тэги</h2></center>

<!-- Меню начало -->
<div class="catmenu">
    <span id="catsp1" onclick="ChangeCategory(1);">Вход / Выход</span>
    <span id="catsp2" onclick="ChangeCategory(2);">Веселые</span>
    <span id="catsp3" onclick="ChangeCategory(3);">Грустные</span>
    <span id="catsp4" onclick="ChangeCategory(4);">Другие</span>
</div>
<!-- Меню конец -->

<!-- Категории начало -->

<div id="cat1">
<ul>
</ul>
</div>

<div id="cat2">
<ul>
</ul>
</div>

<div id="cat3">
<ul>
</ul>
</div>

<div id="cat4">
<ul>
%CHAT('TAGS', '<li tagid="%TAG%">/%TAG%<table cellspacing=0 cellpadding=0>%PHRASES%</table>', '<tr><td><b>%ACTION% %NICK% %PHRASE%</td></tr>')%
</ul>
</div>

<!-- Категории конец -->

<div align=right><a href="/help">помощь</a></div>

<script type="text/javascript">
var TAGS = [];
TAGS['cat1'] = ['bye', 'gone', 'greza', 'hi', 'mail', 'min', 'observes', 'quit', 'sleep', 'smile', 'up', 'чмок', 'щасвирнус'];
TAGS['cat2'] = ['@', 'crypt', 'hlop', 'ik', 'kiss', 'love', 'noprivat', 'qtoolxu', 'woman', 'вин'];
TAGS['cat3'] = ['cry', 'crystal', 'dead', 'mdr', 'shifooloo', 'xmm'];
// Последний TAGS['cat4'] не надо
$(document).ready(function(){
  for(var catid in TAGS) {
    var tagids = TAGS[catid];
    for(var tagid in tagids){
        $("ul li[tagid='" + tagids[tagid] + "']").appendTo("#" + catid + " ul");
    }
  }
});
ChangeCategory(1);
</script>

Обилию кода не пугаемся. Итак, что мы сделали:

1. Практически 1 в 1 скопировали код из предыдущего моего сообщения. Только дополнительно подключили библиотеку jQuery и соответственно, упростили функцию смены категории.

2. Изначальный код тегов мы поместили сразу в последнюю категорию <div id="cat4">, а в сам код тегов добавили tagid="%TAG%" к <li>

3. Самое интересное — в самом низу, там мы определяем, какие теги по каким категориям разнести:
Код:

TAGS['cat1'] = ['bye', 'gone', 'greza', 'hi', 'mail', 'min', 'observes',  'quit', 'sleep', 'smile', 'up', 'чмок', 'щасвирнус'];
TAGS['cat2'] = ['@', 'crypt', 'hlop', 'ik', 'kiss', 'love', 'noprivat',  'qtoolxu', 'woman', 'вин'];
TAGS['cat3'] = ['cry', 'crystal', 'dead', 'mdr', 'shifooloo', 'xmm'];

Для последней категории определять теги не надо, так как они и так уже там.

4. Готовый пример, опять же, можете посмотреть в нашем демо-чате.

eXandr 09.01.2010 04:39

Мля без каментов:)))))))
Антитрах рулит)))))

InterSphere 09.01.2010 09:14

можно ли скрыть из списка той или иной тэг?

Mickeleangelo 09.01.2010 10:06

InterSphere, конечно можно. Дописываем код:
Код:

<script type="text/javascript">
var TAGS = [];
TAGS['cat1'] = ['bye', 'gone', 'greza', 'hi', 'mail', 'min', 'observes', 'quit', 'sleep', 'smile', 'up', 'чмок', 'щасвирнус'];
TAGS['cat2'] = ['@', 'crypt', 'hlop', 'ik', 'kiss', 'love', 'noprivat', 'qtoolxu', 'woman', 'вин'];
TAGS['cat3'] = ['cry', 'crystal', 'dead', 'mdr', 'shifooloo', 'xmm'];
// Последний TAGS['cat4'] не надо
var DELTAGS = ['admin', 'kill', 'someothertag'];
$(document).ready(function(){
  for(var catid in TAGS) {
    var tagids = TAGS[catid];
    for(var tagid in tagids){
        $("ul li[tagid='" + tagids[tagid] + "']").appendTo("#" + catid + " ul");
    }
  }

  for(tagid in DELTAGS){
      $("ul li[tagid='" + DELTAGS[tagid] + "']").remove();
  }
 });
ChangeCategory(1);
</script>


DJScorpion 09.01.2010 14:33

Mickeleangelo,
А можно сделать новую категорию ? Если можно, то у меня не получилось это сделать. Я её сделал под номером 4 а ту что была раньше четвёртой сделал пятой.
Теперь при нажатии на категорию 4 (которая кстати не кликабельна) перебрасывает на пятую но в пятой выводятся тэги из четвёртой (((
Для удобства категория 4 это "ссылки" категория 5 это "другие".
Спасибо !)

Mickeleangelo 09.01.2010 16:58

DJScorpion, проверь, везде ли сделал изменения:
  1. В js коде количество категорий
  2. В меню
  3. Сам блок категории
  4. Определение, какой тег в какой категории

DJScorpion 09.01.2010 17:52

Цитата:

Сообщение от Mickeleangelo (Сообщение 15719)
1 В js коде количество категорий
2 В меню
3 Сам блок категории
4 Определение, какой тег в какой категории

1. categories = 5; // Сюда пишем общее количество категорий
2. <span id="catsp3" onclick="ChangeCategory(4);"><u>Ссылки </u></span>
<span id="catsp4" onclick="ChangeCategory(5);"><u>Другие</u></span>
3. <div id="cat4">
<ul>
</ul>
</div>

<div id="cat5">
<ul>
.......
</ul>
</div>

4. TAGS['cat4'] = ['day', 'golos', 'pravo', 'priv', 'tags', 'top20', 'рега', 'рег', 'срег'];
// Последний TAGS['cat5'] не надо

Вот как у меня.. что не правельно ?


P.S.
Удали моё предыдущее сообщение.. я по ошибки не в ту тему написал ))

Mickeleangelo 09.01.2010 18:36

Цитата:

Сообщение от DJScorpion (Сообщение 15721)
<span id="catsp3" onclick="ChangeCategory(4);"><u>Ссылки </u></span>
<span id="catsp4" onclick="ChangeCategory(5);"><u>Другие</u></span>

Вот тут явно косяки.


Текущее время: 13:21. Часовой пояс GMT +4.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
При перепечатке материалов форума обязательна активная ссылка на тему — источник информации.