0 Пользователей и 1 Гость просматривают эту тему.
  • 26 Ответов
  • 19065 Просмотров
*

Adeptus

  • Завсегдатай
  • 1861
  • 219 / 15
Accordion extended (download)
« : 26.03.2008, 17:06:02 »
Случайно набрел в форуме на гениальную идею коллеги Alex_B про аккордеон в контенте.

мне эта идея так понравилась, что я "сработал" и представляю уважаемому сообществу

Accordion Extended для контента Joomla!

Общая идея принадлежит г-ну Alex_B, ему же принадлежит реализация "обертки" контента в дивы.

Что изменено/добавлено:

- активный заголовок контента меняет цвет бэкграунда (задается в скрипте autoaccordion),
- активному заголовку контента добавляется картинка-индикатор (задается в CSS шаблона),
- активный контент открывается с fade-эффектом,
- курсор в виде пойнтера только для неактивных элементов,
- переключение аккордеона сделано двумя путями:

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

Посмотреть новый аккордеон в работе можно у меня на сайте.

Инструкция по установке и настройке:

1. подключите в секции <head> вашего шаблона библиотеку Mootools (если она еще не подключена). Для этого добавьте в секцию head строку:

Код
<script language="javascript" type="text/javascript" src="[путь до вашей библиотеки MooTools]/mootools.js"></script>

2. подключите в секции <head> вашего шаблона скрипт AutoAccordion (в приложении). Для этого добавьте в секцию head строку:

Код
<script language="javascript" type="text/javascript" src="[путь до вашего скрипта]/autoaccordion.js"></script>

3. включите в секцию <head> вашего шаблона скрипт:

Код
<script type="text/javascript">
window.addEvent('domready', function(){
var myaccord = new AutoAccordion($$('td.contentheading', 'accordion'), $$('div.contentpaneopen_accordion', 'accordion'));
});
</script>

4. добавьте в файл template_css.css вашего шаблона новый класс (картинка info.gif для примера прилагается):

Код
.accord {
background: url(../images/info.gif); /*это картинка, которая будет добавлена к активному заголовку*/
background-position:right;/*это позиция картинки - справа*/
background-repeat:no-repeat;
}

5. картинку info.gif положите в каталог images вашего шаблона.

Наслаждайтесь!


Все имеющиеся вопросы по моим расширениям можно задавать в моем форуме.

[вложение удалено Администратором]
« Последнее редактирование: 26.05.2009, 18:44:02 от Adeptus »
*

FrosTPK

  • Захожу иногда
  • 98
  • 13 / 0
Re: Accordion extended (download)
« Ответ #1 : 01.04.2008, 20:04:45 »
ОгРоМнОе спасибо, лови +  ^-^
*

BOLGAR

  • Осваиваюсь на форуме
  • 27
  • 1 / 0
Re: Accordion extended (download)
« Ответ #2 : 17.05.2008, 22:29:47 »
Сделал как вы сказали , но не видно изменений в отображение контента

Может что не так сделал

вот что я вставил

<script language="javascript" type="text/javascript" src="http://gstu.global.by/templates/ja_sargas/autoaccordion/mootools.js"></script>
<script language="javascript" type="text/javascript" src="http://gstu.global.by/templates/ja_sargas/autoaccordion/autoaccordion.js"></script>
<script type="text/javascript">
   window.addEvent('domready', function(){
      var myaccord = new AutoAccordion($$('td.contentheading', 'accordion'), $$('div.contentpaneopen_accordion', 'accordion'));
   });
</script>

вот сюда
<head>

<script language="javascript" type="text/javascript" src="http://gstu.global.by/templates/ja_sargas/autoaccordion/mootools.js"></script>
<script language="javascript" type="text/javascript" src="http://gstu.global.by/templates/ja_sargas/autoaccordion/autoaccordion.js"></script>
<script type="text/javascript">
   window.addEvent('domready', function(){
      var myaccord = new AutoAccordion($$('td.contentheading', 'accordion'), $$('div.contentpaneopen_accordion', 'accordion'));
   });
</script>

<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="<?php echo $ja_template_path;?>/css/template_css.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="<?php echo $ja_template_path;?>/scripts/ja.script.js"></script>
<link href="<?php echo $ja_template_path;?>/css/colors/<?php echo $ja_color; ?>.css" rel="stylesheet" type="text/css" />
<?php genMenuHead(); ?>

<?php //genColorHead(); ?>

<?php if ( $my->id ) { initEditor(); } ?>

<!--[if lte IE 6]>
<style type="text/css">
.clearfix {   height: 1%;}
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {   display: inline-block;}
</style>
<![endif]-->




<script type="text/javascript" src="<?php echo $ja_template_path;?>/scripts/opacity.js"></script>
<?php
global $_MAMBOTS;
$_MAMBOTS->trigger( 'onAfterHead' );
?>
<noscript><div style="padding:2px; background-color:#cc0066; font-height:bold; color:white; border:1px #cc0099 solid;">Javascript must be enabled in your browser to use this page.<br />Please enable Javascript under your Tools menu in your browser.<br />Once javascript is enabled <a href="index.php">Click here</a> to go back to Сайт студентов ГГТУ им П.О. Сухого</div></noscript></head>

<body id="bd" class="<?php echo "$ja_width fs".$ja_font_size;?>">
<a title="Skip to content" href="<?php echo getCurrentURL();?>#Content" style="display: none;">Skip to content</a>

<!-- BEGIN: HEADER -->
<a name="Top" id="Top"></a>

<div id="ja-headerwrap">
   <div id="ja-header" class="clearfix">
   
      <h1>
         <a href="index.php">
         <script type="text/javascript">
            od_displayImage('sitelogo', '<?php echo $ja_template_path;?>/images/logo', 300, 63, '', '<?php echo $mosConfig_sitename?>');
         </script>
         </a>
      </h1>

      <div id="ja-sh">
      <?php if ($ja_tool || mosCountModules('user4')) {?>
      <div id="ja-usertoolswrap">
         <div id="ja-usertools">
            <?php genToolMenu($ja_tool & 1); /*screen tool*/ ?>
            <?php genToolMenu($ja_tool & 2); /*color tool*/ ?>
            <?php if (mosCountModules('user4')) {?>
            <div id="ja-search">
            <?php mosLoadModules ( 'user4', -1 ); ?>
            </div>
            <?php } ?>
         </div>
      </div>
      <?php } ?>
   
      
      <!-- END: MAIN NAVIGATION -->
      </div>

   </div>
</div>
<!-- END: HEADER -->
*

fs-p

  • Захожу иногда
  • 127
  • 49 / 0
Re: Accordion extended (download)
« Ответ #3 : 18.05.2008, 04:34:00 »
Для начала - в админке (общие настройки - материалы) отключи заголовки как ссылки (т.е. сделать - нет).

Библиотека mootools должна быть загружена только 1 раз. Если она используется еще где-либо на сайте, то соответсвенно в том модуле или компоненте нужно отключить ее загрузку.

Еще у тебя используется скрипт src="<?php echo $ja_template_path;?>/scripts/ja.script.js">
Возможен конфликт скриптов
*

vlad_2222

  • Осваиваюсь на форуме
  • 37
  • 0 / 1
Re: Accordion extended (download)
« Ответ #4 : 07.09.2008, 15:55:43 »
Да что ж такое,??? в одном шаблоне кривовато но  работает ... а в моем ну никак, чего может не хватать? подскажите плз
*

VETERINAR

  • Давно я тут
  • 855
  • 165 / 14
  • Kiss my shiny metal ass!
Re: Accordion extended (download)
« Ответ #5 : 07.09.2008, 16:19:09 »
Да что ж такое,??? в одном шаблоне кривовато но  работает ... а в моем ну никак, чего может не хватать? подскажите плз

Наоборот, может не нехватать, а быть лишнее. Возможно, у Вас в шаблоне используется какой-то компонент, или просто шаблон использует какую-то javascript библиотеку, которая конфликтует с аккордеоном.

Какие ещё javascript-ы подключаются? Какие ни будь специфические мамботы, или ещё что-то, что плотно использует javascript стоит?

Если открыть сайт в Internet Explorer, то в левом нижнем углу есть значок "выполнено, но с ошибками на странице"?

Есть возможность куда-то залить сайт с шаблоном и показать?
*

Adeptus

  • Завсегдатай
  • 1861
  • 219 / 15
*

vlad_2222

  • Осваиваюсь на форуме
  • 37
  • 0 / 1
Re: Accordion extended (download)
« Ответ #7 : 07.09.2008, 18:18:19 »
Наоборот, может не нехватать, а быть лишнее. Возможно, у Вас в шаблоне используется какой-то компонент, или просто шаблон использует какую-то javascript библиотеку, которая конфликтует с аккордеоном.

Какие ещё javascript-ы подключаются? Какие ни будь специфические мамботы, или ещё что-то, что плотно использует javascript стоит?

Если открыть сайт в Internet Explorer, то в левом нижнем углу есть значок "выполнено, но с ошибками на странице"?

Есть возможность куда-то залить сайт с шаблоном и показать?


http://bisnes.com.ua/temp/index.php   например меню "Вакансии"  . в шаблоне panoie - не работает. Взял первый попавшийся шаблон  - Nature _01? еего выбрать то - работает,   Магия? ))
руководствовался с этим http://joomlaforum.ru/index.php/topic,17663.0.html

а то что в даном топе так не работает вообще )))


« Последнее редактирование: 07.09.2008, 19:23:01 от vlad_2222 »
*

vlad_2222

  • Осваиваюсь на форуме
  • 37
  • 0 / 1
Re: Accordion extended (download)
« Ответ #8 : 08.09.2008, 01:21:51 »
 !!!???!!!  !!!???!!!  !!!???!!!
*

vlad_2222

  • Осваиваюсь на форуме
  • 37
  • 0 / 1
Re: Accordion extended (download)
« Ответ #9 : 08.09.2008, 01:39:40 »
Наоборот, может не нехватать, а быть лишнее. Возможно, у Вас в шаблоне используется какой-то компонент, или просто шаблон использует какую-то javascript библиотеку, которая конфликтует с аккордеоном.



Какие ещё javascript-ы подключаются? Какие ни будь специфические мамботы, или ещё что-то, что плотно использует javascript стоит?

Если открыть сайт в Internet Explorer, то в левом нижнем углу есть значок "выполнено, но с ошибками на странице"?



Есть возможность куда-то залить сайт с шаблоном и показать? 
нет там никаких библиотек, шаблон самый простетский

пишет ошибка стр 14. Объект не поддерживает это свойство или метод
www.bisnes.com.ua/temp в одном шаблоне работает(nature_01) в другом нет (paranoie)

 !!!???!!! !!!???!!! !!!???!!! !!!???!!! !!!???!!! !!!???!!! !!!???!!! !!!???!!! !!!???!!! !!!???!!! !!!???!!! !!!???!!!
*

VETERINAR

  • Давно я тут
  • 855
  • 165 / 14
  • Kiss my shiny metal ass!
Re: Accordion extended (download)
« Ответ #10 : 08.09.2008, 03:45:40 »
Ну, как это не используется. Из исходного кода страницы:

Код: javascript
<script src="http://bisnes.com.ua/temp/modules/mod_alivesearch/js/jquery.js" type="text/javascript"></script>
<script src="http://bisnes.com.ua/temp/modules/mod_alivesearch/js/alivesearch.js" type="text/javascript" charset="windows-1251"></script>
<link href="http://bisnes.com.ua/temp/modules/mod_alivesearch/css/alivesearch.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready( function()
{
var width = $("table.mylivesearch_table").width()-10;
$("input.alivesearch_input").css("width",width+"px");
$('input[name="alivesearch"]').focus(function(){
$(this).val("");
$(this).css("border","1px solid red").css("color","black").css("backgroundColor","#FFFFE6");
});
$('input[name="alivesearch"]').blur(function(){
$(this).val("быстрый поиск...");
$(this).css("border","1px solid #CCCCCC").css("color","#CCCCCC").css("backgroundColor","#FFFFFF");
});
$('input[name="alivesearch"]').liveSearch(
{
ajaxURL:'http://bisnes.com.ua/temp/modules/alivesearch.php?id=50&alivesearch=',
minsize:3 });
});
</script>

Ещё и jquery. Наличие этого модуля - единственное заметное различие между шаблонами. Я более чем уверен, что тут несовместимость Javascript. Попробуйте отключить его и посмотреть заработает или нет.
*

vlad_2222

  • Осваиваюсь на форуме
  • 37
  • 0 / 1
Re: Accordion extended (download)
« Ответ #11 : 08.09.2008, 11:00:50 »
 ^-^  СПАсибо дружище , действительно убрал модуль     Adeptus LiveSearch от адептуса и все заработало......

как я понял несовместимость не лечится ни как , нужно выбрать чтото одно? либо аккордион ЛИбО живой поиск?
*

VETERINAR

  • Давно я тут
  • 855
  • 165 / 14
  • Kiss my shiny metal ass!
Re: Accordion extended (download)
« Ответ #12 : 08.09.2008, 11:04:49 »
Ну, почему, лечится. Но я очень плохо знаю javascript, чтобы решать проблемы несовместимости. Возможно, подскажет Адептус, который, несомненно, разбирается в этом вопросе лучше меня.

Я решал путем изменения очередности подключения скриптов, убирал подключения одних и тех же библиотек разными модулями. В общем, решал путем танцев с бубном вокруг костра. Несовместимости это ещё тот геморрой...

Там, скорее всего, два раза подключается библиотека jquery.js. Один раз вместе с аккордионом. Второй раз с модулем. Я бы попробовал сначала просто убрать:

<script src="http://bisnes.com.ua/temp/modules/mod_alivesearch/js/jquery.js" type="text/javascript"></script>

Из модуля поиска. Может ему хватит той библиотеки, что уже подключена выше. А может и нет.  Может наоборот, из аккордеона "вычистить" jquery и подключить выше библиотеку, которую использует поиск. У Адептуса нужно спросить как правильнее поступить.

« Последнее редактирование: 08.09.2008, 11:09:25 от VETERINAR »
*

Adeptus

  • Завсегдатай
  • 1861
  • 219 / 15
Re: Accordion extended (download)
« Ответ #13 : 08.09.2008, 23:02:30 »
В модуле "Живого поиска" есть функция - "Загружать JQuery или нет?"
*

VETERINAR

  • Давно я тут
  • 855
  • 165 / 14
  • Kiss my shiny metal ass!
Re: Accordion extended (download)
« Ответ #14 : 08.09.2008, 23:18:22 »
Всё, оказывается, на много проще :)
*

Adeptus

  • Завсегдатай
  • 1861
  • 219 / 15
Re: Accordion extended (download)
« Ответ #15 : 08.09.2008, 23:22:36 »
Всё, оказывается, на много проще :)
Не то слово... :)
*

vlad_2222

  • Осваиваюсь на форуме
  • 37
  • 0 / 1
Re: Accordion extended (download)
« Ответ #16 : 09.09.2008, 12:37:50 »
 :D век живи век учись.... я 2 дня убил на этот глюк, наверное узнал больше в других вопросах  нежели в этом.


*

Adeptus

  • Завсегдатай
  • 1861
  • 219 / 15
Re: Accordion extended (download)
« Ответ #17 : 09.09.2008, 19:42:44 »
:D век живи век учись.... я 2 дня убил на этот глюк, наверное узнал больше в других вопросах  нежели в этом.
Так что решилось - расскажите?
*

vlad_2222

  • Осваиваюсь на форуме
  • 37
  • 0 / 1
Re: Accordion extended (download)
« Ответ #18 : 10.09.2008, 19:58:50 »
на сайте использовал живой поиск и аккордион

В модуле "Живого поиска" есть функция - "Загружать JQuery или нет?"   отключил загрузку , теперь  работает аккордион а поиск не работает.

 решили не мучаться и купить аккордион адептуса, надеюсь он поможет настроить оба модуля  ^-^ . Вданном случае просто нет времени разбираться со всеми ньюансами
*

Adeptus

  • Завсегдатай
  • 1861
  • 219 / 15
Re: Accordion extended (download)
« Ответ #19 : 10.09.2008, 22:31:51 »
на сайте использовал живой поиск и аккордион
В модуле "Живого поиска" есть функция - "Загружать JQuery или нет?"   отключил загрузку , теперь  работает аккордион а поиск не работает.
 решили не мучаться и купить аккордион адептуса, надеюсь он поможет настроить оба модуля  ^-^ . Вданном случае просто нет времени разбираться со всеми ньюансами
Я тоже надеюсь, что ОН поможет... :)
*

Fomen

  • Захожу иногда
  • 99
  • 4 / 0
  • Землю крестьянам!!!
Re: Accordion extended (download)
« Ответ #20 : 01.10.2008, 22:43:39 »
Адептус, а можно использовать этот аккордеон для разбиения текста? Например, чтоб была видна вводная часть статьи, а основной текст стал бы виден после нажатия соотвествующей кнопки "читать все"?
*

VETERINAR

  • Давно я тут
  • 855
  • 165 / 14
  • Kiss my shiny metal ass!
*

Fomen

  • Захожу иногда
  • 99
  • 4 / 0
  • Землю крестьянам!!!
Re: Accordion extended (download)
« Ответ #22 : 01.10.2008, 23:18:15 »
Это радует. Но как? У меня статьи нестандартно выводятся, а в модуле (аттач).

[вложение удалено Администратором]
« Последнее редактирование: 01.10.2008, 23:49:34 от Fomen »
*

Adeptus

  • Завсегдатай
  • 1861
  • 219 / 15
Re: Accordion extended (download)
« Ответ #23 : 07.10.2008, 09:56:38 »
Это радует. Но как? У меня статьи нестандартно выводятся, а в модуле (аттач).

Это ж не я вам сказал, что "можно". Я например не в курсе - как это?

Тот, кто сказал что можно - пусть и отвечает, как... :)
*

Fomen

  • Захожу иногда
  • 99
  • 4 / 0
  • Землю крестьянам!!!
Re: Accordion extended (download)
« Ответ #24 : 07.10.2008, 14:43:45 »
:) Да будет так)))
*

tkheun

  • Захожу иногда
  • 145
  • 1 / 0
Re: Accordion extended (download)
« Ответ #25 : 24.05.2009, 12:15:01 »
А откуда скачать скрипт autoaccordion.js?
*

Adeptus

  • Завсегдатай
  • 1861
  • 219 / 15
Re: Accordion extended (download)
« Ответ #26 : 26.05.2009, 18:44:36 »
А откуда скачать скрипт autoaccordion.js?

Из первого поста темы.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

AFM версия 2.7 с AJAX-превью! (download)

Автор Adeptus

Ответов: 111
Просмотров: 74390
Последний ответ 23.04.2011, 15:20:24
от Adeptus