Пропустить

[BETA] jQuery Accordion Block

Здесь авторы могут постить бета-версии своих модификаций для phpBB 3.0.x. Внимание! Не устанавливайте бета-версии модов на работающие форумы!
Свернуть Развернуть Правила форума Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).

[BETA] jQuery Accordion Block

Сообщение vavanych » 29.01.2010 16: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
Вложения
[BETA]_jQuery_Accordion_Block.zip
(43.75 КБ) Скачиваний: 36
Последний раз редактировалось vavanych 30.01.2010 18:56, всего редактировалось 2 раз(а).

vavanych
phpBB 1.0.0
 
Сообщения: 7
Зарегистрирован: 08.01.2010 20:57
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: [BETA] jQuery Accordion Block

Сообщение Medion » 29.01.2010 16:55

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

Medion
phpBB 1.0.0
 
Сообщения: 8
Зарегистрирован: 02.12.2008 9:38
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: [BETA] jQuery Accordion Block

Сообщение vavanych » 29.01.2010 17:16

Обновил первый пост.
или на сайте демо
Последний раз редактировалось vavanych 03.02.2010 16:37, всего редактировалось 1 раз.

vavanych
phpBB 1.0.0
 
Сообщения: 7
Зарегистрирован: 08.01.2010 20:57
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: [BETA] jQuery Accordion Block

Сообщение Rayden » 30.01.2010 2:00

Бестолковый мод и по большому счету ненужный.
Зачем городить кучу кода и цеплять кучу файлов, когда все можно сделать в одну строчку?
phpBB2 FAQ
phpBB3 FAQ
Аватара пользователя
Rayden
Former team member
 
Сообщения: 3841
Зарегистрирован: 27.06.2005 0:07
Благодарил (а): 0 раз.
Поблагодарили: 27 раз.

Re: [BETA] jQuery Accordion Block

Сообщение FladeX » 30.01.2010 2:11

Rayden
так это ж для примера. Можно использовать и для разделов - складывать и раскладывать. В общем, на усмотрение конечного пользователя :)
//
// Okay, let's do the loop, yeah come on baby let's do the loop
// and it goes like this ...
| phpBB Adept ] | Каталог форумов | генератор sitemap для форумов | форум про форумы
Аватара пользователя
FladeX
Former team member
 
Сообщения: 2104
Зарегистрирован: 02.06.2007 22:44
Откуда: Саранск
Благодарил (а): 6 раз.
Поблагодарили: 53 раз.

Re: [BETA] jQuery Accordion Block

Сообщение Nekstati » 01.02.2010 4: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. Правда, без анимации.
Аватара пользователя
Nekstati
Лидер поддержки
Лидер поддержки
 
Сообщения: 2181
Зарегистрирован: 19.03.2009 17:43
Благодарил (а): 6 раз.
Поблагодарили: 607 раз.

Re: [BETA] jQuery Accordion Block

Сообщение FladeX » 01.02.2010 11:30

Nekstati
и никаких функций для этого не надо добавлять? Что-то я туплю)
//
// Okay, let's do the loop, yeah come on baby let's do the loop
// and it goes like this ...
| phpBB Adept ] | Каталог форумов | генератор sitemap для форумов | форум про форумы
Аватара пользователя
FladeX
Former team member
 
Сообщения: 2104
Зарегистрирован: 02.06.2007 22:44
Откуда: Саранск
Благодарил (а): 6 раз.
Поблагодарили: 53 раз.

Re: [BETA] jQuery Accordion Block

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

FladeX
dE() - это штатная функция двига. Пошарь по яваскриптовсим файлам.
Профессионал - тот же дилетант, только знающий, где ошибётся.
Генератор db_update.php для phpBB2 с некоторыми удобствами. Многие моды я беру или ищу здесь, здесь, тут
Все консультации только на форуме, приваты и стук в аську по таким вопросам игнорируются!
FAQ-phpBB3 | Ошибки новичков, или как не поссориться с модератором | Правила конференции

наш форум http://forum.aeroion.ru/cat1.html
Аватара пользователя
Поручик
Former team member
 
Сообщения: 4002
Зарегистрирован: 12.05.2005 16:25
Откуда: Оренбург (Южный Урал)
Благодарил (а): 26 раз.
Поблагодарили: 47 раз.

Re: [BETA] jQuery Accordion Block

Сообщение Rayden » 01.02.2010 18:21

FladeX
а я о чем твержу третий день? :)
Причем там можно указать, закрыть блок, открыть блок или переключить.
Я ж говорю, БО на этом сделан :)
phpBB2 FAQ
phpBB3 FAQ
Аватара пользователя
Rayden
Former team member
 
Сообщения: 3841
Зарегистрирован: 27.06.2005 0:07
Благодарил (а): 0 раз.
Поблагодарили: 27 раз.

Re: [BETA] jQuery Accordion Block

Сообщение vavanych » 04.02.2010 19: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">
// &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.

vavanych
phpBB 1.0.0
 
Сообщения: 7
Зарегистрирован: 08.01.2010 20:57
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: [BETA] jQuery Accordion Block

Сообщение vanche » 07.03.2010 23:06

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

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

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

vanche
phpBB 1.0.0
 
Сообщения: 2
Зарегистрирован: 07.03.2010 23:02
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: [BETA] jQuery Accordion Block

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

vanche, это код только для Prosilver.
Аватара пользователя
Nekstati
Лидер поддержки
Лидер поддержки
 
Сообщения: 2181
Зарегистрирован: 19.03.2009 17:43
Благодарил (а): 6 раз.
Поблагодарили: 607 раз.

Re: [BETA] jQuery Accordion Block

Сообщение Caeterra » 31.01.2012 4: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;
 
}


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

Caeterra
phpBB 1.2.1
 
Сообщения: 26
Зарегистрирован: 09.02.2011 9:38
Благодарил (а): 1 раз.
Поблагодарили: 1 раз.


Вернуться в Бета-версии модов для phpBB 3.0.x

 

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

Бессрочный конкурс phpBB-ориентированных материалов
FastVPS — надёжный и доступный хостинг для phpBB
Место для вашей рекламы