Изображение
Реализация вывода категорий форума через вкладки, при помощи jQuery, для стиля prosilver и его клонов.

Вывод категорий через вкладки позволяет сэкономить место на странице "Список форумов" и нажав на соответствующую вкладку, без перезагрузки страницы, увидеть её содержание.

Открываем forumlist_body.html в самое начало ставим:

Код: Выделить всё

<!-- IF SCRIPT_NAME eq 'index' -->
<div id="tab">
	<ul>
		<!-- BEGIN forumrow --><!-- IF forumrow.S_IS_CAT --><li><a href="#" name="#tab{forumrow.FORUM_ID}"><span>{forumrow.FORUM_NAME}</span></a></li><!-- ENDIF --><!-- END forumrow -->
	</ul>
</div>
<!-- ENDIF -->

<div id="forumlist">


Внимание!
Если у вас уже есть:

Код: Выделить всё

<div id="forumlist">
то тогда его ставить не нужно.

Если у вас:

Код: Выделить всё

<div class="forumlist">
то добавьте к нему id="forumlist":

Код: Выделить всё

<div id="forumlist" class="forumlist">
Далее находим:

Код: Выделить всё

<div class="forabg">
Меняем на:

Код: Выделить всё

<div class="forabg" id="tab{forumrow.FORUM_ID}">
В самый конец шаблона ставим:

Код: Выделить всё

</div>

<!-- IF SCRIPT_NAME eq 'index' -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function resetTabs(){
    $("#forumlist div.forabg").hide();
    $("#tab a").attr("id","");  
}

var myUrl = window.location.href; 
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); 
var myUrlTabName = myUrlTab.substring(0,4); 

(function(){
    $("#forumlist div.forabg").hide(); 
    $("#tab li:first a").attr("id","activetab"); 
    $("#forumlist div.forabg:first").fadeIn(); 
    
    $("#tab a").on("click",function(e) {
        e.preventDefault();
        if ($(this).attr("id") == "activetab"){ 
         return       
        }
        else{             
        resetTabs();
        $(this).attr("id","activetab"); 
        $($(this).attr('name')).fadeIn(); 
        }
    });

    for (i = 1; i <= $("#tab li").length; i++) {
      if (myUrlTab == myUrlTabName + i) {
          resetTabs();
          $("a[name='"+myUrlTab+"']").attr("id","activetab"); 
          $(myUrlTab).fadeIn(); 
      }
    }
})()
</script>
<!-- ENDIF -->
Внимание!
Если у вас уже был в шаблоне:

Код: Выделить всё

<div class="forumlist">
То закрывающий </div> ставить не нужно, ставьте:

Код: Выделить всё

<!-- IF SCRIPT_NAME eq 'index' -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function resetTabs(){
    $("#forumlist div.forabg").hide();
    $("#tab a").attr("id","");
}

var myUrl = window.location.href; 
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));   
var myUrlTabName = myUrlTab.substring(0,4); 

(function(){
    $("#forumlist div.forabg").hide(); 
    $("#tab li:first a").attr("id","activetab"); 
    $("#forumlist div.forabg:first").fadeIn(); 
    
    $("#tab a").on("click",function(e) {
        e.preventDefault();
        if ($(this).attr("id") == "activetab"){ 
         return       
        }
        else{             
        resetTabs();
        $(this).attr("id","activetab"); 
        $($(this).attr('name')).fadeIn(); 
        }
    });

    for (i = 1; i <= $("#tab li").length; i++) {
      if (myUrlTab == myUrlTabName + i) {
          resetTabs();
          $("a[name='"+myUrlTab+"']").attr("id","activetab"); 
          $(myUrlTab).fadeIn(); 
      }
    }
})()
</script>
<!-- ENDIF -->
Далее добавляем css, открываем тему вашего стиля и в самый конец добавляем:

Код: Выделить всё

/* Category Tabs */
#tab {
	line-height: normal;
	margin: 0 0 -1px 7px;
	min-width: 600px;
	height: 1%;
	overflow: hidden;
	border-bottom: 1px solid #DCDEE2;
}

#tab ul {
	margin:0;
	padding: 0;
	list-style: none;
}

#tab li {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 0.85em;
	font-weight: bold;
}

#tab a {
	float: left;
	background: url("{T_THEME_PATH}/images/bg_list.gif") repeat 0 100% #0076B1;
	margin: 0 1px 0 0;
	padding: 0 0 0 7px;
	text-decoration: none;
	position: relative;

	border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
}

#tab a span {
	float: left;
	display: block;
	background: url("{T_THEME_PATH}/images/bg_list.gif") repeat 0 100% #0076B1;
	padding: 7px 10px 4px 4px;
	color: #ccc;
	white-space: nowrap;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;

	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tab a span { float:none;}
/* End hack */

#tab a:hover {
	background-position: 0% 20%;
}

#tab a:hover span {
	color: #fff;
	background-position: 0% 20%;
}

#tab #activetab {
	background-position: 0 0%;
	border-bottom: 0;
}

#tab #activetab span {
	background-position: 0% 0%;
	padding-bottom: 5px;
	color: #fafafa;
}

Внимание!
В IE8 не будет закруглённых углов на вкладках, так как он не поддерживает CSS3.
В IE6 вкладки будут работать не так как должны.
Комментарии: 10

Галина 28 фев 2013, 10:17 Сообщение

Спасибо за скриптик! Очень удобно!
  • 0

romaamor 28 фев 2013, 11:01 Сообщение

CabinetAdmin писал(а):для стиля prosilver и его клонов.
А для subsilver2 Нету ?
  • 0

Галина 28 фев 2013, 11:49 Сообщение

Сейчас только увидела, что дна категория не видна. Почему это может быть? Может ли это быть связано с тем, что там нет подфорумов и тем?
  • 0

CabinetAdmin 28 фев 2013, 13:45 Сообщение

Галина
Создайте одну тему, тестовую, посмотрите.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 28 фев 2013, 13:48 Сообщение

romaamor
Нету, если есть у кого желание может попробовать сделать.
Сделать в принципе реально, но придётся много кода править...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Галина 28 фев 2013, 14:09 Сообщение

CabinetAdmin писал(а):Галина
Создайте одну тему, тестовую, посмотрите.
:D а как же я её создам? категории-то вообще в меню нет!
Создала тему в другом форуме, потом хотела переместить, Но... ссылка на данную категорию НЕ АКТИВНА.
Что не так?
Изображение
Изображение

Я ничего не понимаю! Может быть там только определённое кол-во категорий допустимо?
  • 0

CabinetAdmin 28 фев 2013, 16:29 Сообщение

Хорошо, категория есть, а форум в нём? Права доступа?
На другом стиле (style=1) этой категории тоже не видно. Значит точно не в модификации дело...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Галина 28 фев 2013, 16:32 Сообщение

CabinetAdmin писал(а):Хорошо, категория есть, а форум в нём? Права доступа?
Права доступа все сделала. Форум. А для чего форум? Разве нельзя писать только в категории? Открывать новые темы и всё. Вернее, я хотела открыть его как Архив тем.
Точно. Создала форум, категория появилась. :Yahoo!:
  • 0

CabinetAdmin 28 фев 2013, 16:48 Сообщение

Галина
Категория, это категория, она объединят в себя форумы. А вот в форумах как раз и создаются темы и сообщения.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Галина 28 фев 2013, 18:25 Сообщение

CabinetAdmin писал(а):Категория, это категория, она объединят в себя форумы. А вот в форумах как раз и создаются темы и сообщения.
:milo: Если б я всё это знала! :crazy:
  • 0

Похожие темы