[vavanych]

jQuery Accordion Block
Мод добавляет складную информационную панель.

Редактируемые файлы:
overall_header.html
overall_footer.html

В overall_header.html найти:

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

			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>

После добавить:

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

<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery-1.3.2.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/ui.core.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/ui.accordion.js"></script>
<script type="text/javascript">
	$(function() {
		$("#accordion").accordion();
	});
	</script>

Делаем файл block_accordion.html со следующим содержимом:

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

<div id="accordion">

	<h3><a href="#"> Секция 1</a></h3>
	<div>
		<p>
Текст Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
		</p>
	</div>

	<h3><a href="#">Секция 2</a></h3>
	<div>
		<p>
Текст Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
		</p>
	</div>

	<h3><a href="#">Секция 3</a></h3>
	<div>
		<p>
Текст Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
		</p>
		<ul>
			<li>Текст</li>
			<li>Текст</li>
			<li>Текст</li>
		</ul>
	</div>

	<h3><a href="#">Секция 4</a></h3>
	<div>
		<p>
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст
		</p>

		<p>
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст 
Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст  Текст
		</p>
	</div>
</div>

</div>

Файл block_accordion.html копируем в template вашего стиля.

В файле overall_footer.html найти:

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

<div id="page-footer">

Перед добавить:

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

<!-- INCLUDE block_accordion.html -->

Следующие файлы копируем в template вашего стиля:

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

jquery-1.3.2.js
ui.core.js
ui.accordion.js

Очищаем кэш, готово.

[Medion]

а где мона посмотреть на неё?

[vavanych]

Обновил первый пост.
или на сайте демо

[Rayden]

Бестолковый мод и по большому счету ненужный.
Зачем городить кучу кода и цеплять кучу файлов, когда все можно сделать в одну строчку?

[FladeX]

Rayden
так это ж для примера. Можно использовать и для разделов - складывать и раскладывать. В общем, на усмотрение конечного пользователя

[Nekstati]

А вот как это делается без jQuery.

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

<div class="panel">
    <div class="inner"><span class="corners-top"><span></span></span>
        <div class="content">
            
            <h3><a href="" onclick="dE('acc1');dE('acc2',-1);dE('acc3',-1);return false;">Section 1</a></h3>
            <p id="acc1">Content of section 1</p>
                
            <h3><a href="" onclick="dE('acc1',-1);dE('acc2');dE('acc3',-1);return false;">Section 2</a></h3>
            <p id="acc2" style="display: none">Content of section 2</p>
            
            <h3><a href="" onclick="dE('acc1',-1);dE('acc2',-1);dE('acc3');return false;">Section 3</a></h3>
            <p id="acc3" style="display: none">Content of section 3</p>
                
        </div>
    <span class="corners-bottom"><span></span></span></div>
</div> 

1 КБ вместо 150. Правда, без анимации.

[FladeX]

Nekstati
и никаких функций для этого не надо добавлять? Что-то я туплю)

[Поручик]

FladeX
dE() - это штатная функция двига. Пошарь по яваскриптовсим файлам.

[Rayden]

FladeX
а я о чем твержу третий день?
Причем там можно указать, закрыть блок, открыть блок или переключить.
Я ж говорю, БО на этом сделан

[vavanych]

http://www.phpbb.com/community/index.php
Смотрим в head:
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
........

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="/js/scripts.js?2009110701" type="text/javascript"></script>

<script type="text/javascript">
// &lt;![CDATA[
............................

</head>
Интересно, почему оффсайт не прибег к стандартным функциям движка ? А использует кучу кода и цепляет кучу файлов =|
Небольшой аддон. Раскрытие по наведению курсора.
В overall_header.html найти:

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

<script type="text/javascript">
   $(function() {
      $("#accordion").accordion();
   });
   </script>

Заменить на:

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

<script type="text/javascript">
   $(function() {
      $("#accordion").accordion({
         event: "mouseover"
      });
   });
   </script>

Собственно можно поиграться с эффектами, событиями и тп. на свое усмотрение. Не исключено использование для bbcodes.

[vanche]

Nekstati писал(а):А вот как это делается без jQuery.

1 КБ вместо 150. Правда, без анимации.

У меня этот код ни в одном браузере не работает

[Nekstati]

vanche, это код только для Prosilver.

[Caeterra]

Можно еще проще..
в оверале который хедер:

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

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/jquery.js"></script>

(подключаем библиотеку,должна лежать в \styles\prosilver\template\jquery.js)

в.. ну например факе боди:

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

<!-- INCLUDE overall_header.html -->




<script type="text/javascript" >
$(document).ready(function(){
    $(".accordion h3") ;
    $(".accordion p").hide();
 
 
    $(".accordion h3").click(function(){
 
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        
     });
  
 });
</script>
<table  width='100%'  >
<tr>
<td valign="top">
 <!-- BEGIN faq_block -->
 <!-- IF faq_block.SWITCH_COLUMN or (SWITCH_COLUMN_MANUALLY and faq_block.S_ROW_COUNT == 4) -->
 <!-- ENDIF -->
<!-- BEGIN faq_row -->
 <div class="menu">

<div class="accordion"> 
 <h3> {faq_block.faq_row.FAQ_QUESTION} </h3>
 <p> {faq_block.faq_row.FAQ_ANSWER} <p/><br/><br/>
</div> </div>
<!-- END faq_row -->
 <!-- END faq_block --> 
</td>
 </tr>
 </table>
<!-- INCLUDE overall_footer.html -->

ну и в коммоне цсс:

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

.menu {
	margin-bottom: 5px;
	width: 100%;
	font-size: 12px;
	font-family:  Arial, Verdana, Helvetica, sans-serif;
	text-align:left;
	color:#424242;
	
}
.accordion {
	width: 100%;
	 
}
.accordion h3 {
color:#424242;
	 
	margin: 0; 
	padding: 8px 10px 8px 10px;
	font-size: 12px;
	font-family:  Arial, Verdana, Helvetica, sans-serif;
        cursor: pointer;
	 }

.accordion h3:hover {
	background-color: #c50202;
	color:#fff;
}
.accordion h3.active {
	background-color: #c50202;
	color:#fff;

}
.accordion p {
	background: #f7f7f7;
	margin: 0;
	padding:15px;
 
}

стили под себя соответственно..