[BETA] jQuery Accordion Block

vavanych · Сообщение **vavanych** » 29.01.2010 13:44

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

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

2222.png

111.png

Medion · Сообщение **Medion** » 29.01.2010 13:55

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

vavanych · Сообщение **vavanych** » 29.01.2010 14:16

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

Rayden · Сообщение **Rayden** » 29.01.2010 23:00

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

FladeX · Сообщение **FladeX** » 29.01.2010 23:11

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

Сообщение **Nekstati** » 01.02.2010 1:49

А вот как это делается без 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 · Сообщение **FladeX** » 01.02.2010 8:30

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

Поручик · Сообщение **Поручик** » 01.02.2010 8:40

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

Rayden · Сообщение **Rayden** » 01.02.2010 15:21

FladeX
а я о чем твержу третий день?

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

vavanych · Сообщение **vavanych** » 04.02.2010 16:19

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">
// <![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 · Сообщение **vanche** » 07.03.2010 20:06

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

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

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

Сообщение **Nekstati** » 07.03.2010 20:28

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

Caeterra · Сообщение **Caeterra** » 31.01.2012 1:08

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

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

<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;
 
}

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

phpBB Guru - Официальная русская поддержка форума phpBB

[BETA] jQuery Accordion Block

[BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block

Re: [BETA] jQuery Accordion Block