Теги по категориям

**Admin** Пн Ноя 01, 2010 11:00 pm

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

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/, а полностью сделанную страницу можете посмотреть в нашем демо-чате.