Форум русской поддержки Joomla!® CMS
10.12.2016, 20:38:26 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2 3 4 5 6 7 8 9   Вниз
  Добавить закладку  |  Печать  
Автор

Плагин Tabs & Sliders & Spoilers для Joomla 2.5/3.x

 (Прочитано 34750 раз)
0 Пользователей и 1 Гость смотрят эту тему.
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« : 20.08.2013, 04:54:10 »

В поисках нормального плагина табов.......в общем, поиски не удались - на JED либо нет под J3, либо коммерческое, либо тянет за собой еще и фреймворк **facepalm** и решила я тут сделать свое - что-нибудь легкое, адекватное и т.д. - на каждый день )))

Получилось 3 в 1
 - табы;
 - аккордеон ("гармошка");
 - спойлер;

минимум js (jQuery), минимум CSS

Работает с com_content

Смотрится по-умолчанию так -



Скачать или посмотреть демо можно тут - http://joomext.ru/plugin-tabs-slider-spoilers

Ставим, в менеджере включаем, если jQuery не подключен на сайте, то заходим в настройки и выставляем версию, например 1.8.1

В материале вставляем:
Показать текстовый блок

история версий:
Показать текстовый блок

Как убрать ссылку? Отвечаю: если плагин вам понравился, вы планируете его использовать в своих проектах, то можете поддержать развитие плагина, оплатив версию без копирайта, в противном случае, оставьте ссылку на месте.
« Последнее редактирование: 24.03.2015, 15:34:26 от ELLE » Записан
dimon888951
Осваиваюсь на форуме
***

Репутация: +24/-3
Offline Offline

Сообщений: 118


« Ответ #1 : 20.08.2013, 05:48:07 »

Спасибо за труды! Полезный плагин.

« Последнее редактирование: 20.08.2013, 21:07:51 от ELLE » Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #2 : 20.08.2013, 14:15:10 »

На здоровье  Smiley

По плагину есть что сказать? Может чего-то не хватает, ошибки и пр.
« Последнее редактирование: 20.08.2013, 21:08:12 от ELLE » Записан
wfedin
Живу я здесь
******

Репутация: +102/-0
Offline Offline

Пол: Мужской
Сообщений: 1295



« Ответ #3 : 20.08.2013, 15:34:39 »

Любопытно, что мне в табах не понравилось:
1. Содержание не занимает всё доступное место

2. Нужен параметр чтобы задать фикс. высоту табам {tab=first tab title here PARAM=280}, а лучше как-то чтобы в одном месте указал и все табы из группы съели...
« Последнее редактирование: 20.08.2013, 15:41:11 от wfedin » Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #4 : 20.08.2013, 15:43:28 »

Любопытно, что мне в табах не понравилось:
1. Содержание не занимает всё доступное место

2. Нужен параметр чтобы задать фикс. высоту табам {tab=first tab title here PARAM=280}, а лучше как-то чтобы в одном месте указал и все табы из группы съели...
ну это можно вместо 50%, выставить все 100%
просто смотрите - лучше залезть один раз подправить стили для себя, чем мусор складывать в исходом коде
можно сделать в настройках - и ширину, и высоту, и цвета, и все что хотите, но тогда это *** будет в коде висеть - почему я и не жалую все эти слайдеры с JED - верстальщики меня поймут  Wink
а так у нас всего один маленький js и небольшой CSS получается

« Последнее редактирование: 20.08.2013, 15:47:50 от ELLE » Записан
wfedin
Живу я здесь
******

Репутация: +102/-0
Offline Offline

Пол: Мужской
Сообщений: 1295



« Ответ #5 : 20.08.2013, 15:52:45 »

Тогда уж проще на мой взгляд просто цепануть скрипт в хеад и плагин не нужен. Извиняюсь если что, просто я так думаю.
Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #6 : 20.08.2013, 15:55:25 »

Тогда уж проще на мой взгляд просто цепануть скрипт в хеад и плагин не нужен. Извиняюсь если что, просто я так думаю.
я раньше тоже так думала, потом надоело с разметкой возиться
Записан
SmokerMan
Профи
********

Репутация: +694/-25
Offline Offline

Пол: Мужской
Сообщений: 5225



« Ответ #7 : 20.08.2013, 15:58:13 »

Глянул быстро
чего-то не понятно есть {/tabs}, а открывающего {tabs} нету
Логичней уже делать
{tabs}
{tab=first tab title here}
...
{/tabs}

Код:
function _replace_tab
заменить на
Код:
protected function replace_tab
Префикс "_" использовался для PHP < 5, когда еще не было более мене внятного ООП.

Код:
if(!preg_match("#{tab=.+?}|{slider=.+?}|{spoiler=.+?}#s", $row->text)) return;
вообще не понятно к чему, если уж делается проверка, то ее нужно добавлять в начало, а не в конец.
И лучше делать через
Код:
if(strpos($row->text, '{tab')!== false) return;
в каждой функции. Так будет гораздо быстрей.

+ сделать отдельно кнопочку для редактора, что бы это все ручками не писать.
Это так на будущее))
Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #8 : 20.08.2013, 16:02:30 »

SmokerMan, =>  Kiss
 drink
Записан
Efanych
Группа развития
*****

Репутация: +602/-0
Offline Offline

Пол: Мужской
Сообщений: 4321



« Ответ #9 : 20.08.2013, 23:35:14 »

Цитировать
Глянул быстро
чего-то не понятно есть {/tabs}, а открывающего {tabs} нету
Логичней уже делать
{tabs}
{tab=first tab title here}
...
{/tabs}

Несколько табов попадались (nonumber, uyguntabs) у них синтаксис тоже без открывающего {tabs}.
Мне бы так удобней было. Переезжать если что проще...
Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #10 : 21.08.2013, 00:02:45 »

просто без первого можно обойтись, а без последнего никак...даже не обязательно {/tabs}, любой символ\ограничитель
в него же и можно добавить параметры, как предложил wfedin, который позволял бы задать высоту для всех блоков табов...
типа {/tabs h=200}
Записан
Fedor Vlasenko
Профи
********

Репутация: +696/-5
Offline Offline

Пол: Мужской
Сообщений: 3820


Все начинается с Value


« Ответ #11 : 21.08.2013, 00:05:27 »

можно вопрос зачем конструкция {tab=second tab title here}, то есть зачем делать реализацию используя php
ведь не смотря на код потом обрабатываете регулярками. Это немного Неправильный подход. Ведь все равно обрабатываем js Тогда ему все и надо отдавать всю реализацию пример тот же Bootstrap. Особый вид разметки задание класса slider к примеру и js обрабатывает как нужно.
Пока писал накидал пример http://jsfiddle.net/vlasenkofedor/qPC6a/ без php
« Последнее редактирование: 30.12.2013, 00:35:00 от Fedor Vlasenko » Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #12 : 21.08.2013, 00:08:46 »

Федор, я ж уже говорила:
потом надоело с разметкой возиться
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #13 : 09.09.2013, 09:30:09 »

Интересный эффект: на странице с материалом, где есть какие-либо другие подключенные плагины (галерея, например), все нормально, а там где другие плагины не присутствуют - не работает, как будто бы jquery не подгружается.
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #14 : 09.09.2013, 11:53:44 »

Интересный эффект: на странице с материалом, где есть какие-либо другие подключенные плагины (галерея, например), все нормально, а там где другие плагины не присутствуют - не работает, как будто бы jquery не подгружается.
А ларчик просто открывался: ручками в настройках указал версию jquery. Учитывая, что я в новичок со стаже 1,5 мес - мне простительно   Smiley
Автору респект, я долго искал подобную штуку, вариант от nonumbers у меня работать почему-то отказался. Сорри за оффтоп Cheesy
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #15 : 09.09.2013, 22:06:06 »

Все бы ничего, но после того, как заработал Tabs & Sliders & Spoilers, перестала корректно работать галерея Simple Image Gallery (by JoomlaWorks): миниатюры отображаются, однако полные изображения открываются не во фрейме, а в отдельном окне. Как решить конфликт? Пробовал указать разные версии jquery, в т.ч указывал в галерее вообще его не грузить - эффект одинаков во всех случаях. ;(
Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #16 : 09.09.2013, 22:08:29 »

jQuery 2 раза грузится?
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #17 : 09.09.2013, 22:15:01 »

Допускаю, что да:

Код:
 <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script src="/media/plg_system_topofthepage/ScrollSpy-yui-compressed.js" type="text/javascript"></script>
  <script src="/media/plg_system_topofthepage/smoothscroll.js" type="text/javascript"></script>
  <script src="/media/plg_system_topofthepage/topofthepage.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/plugins/content/jw_sig/jw_sig/includes/js/jquery_fancybox/fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
  <script src="/plugins/content/jw_sig/jw_sig/includes/js/jquery_fancybox/fancybox/jquery.fancybox.pack.js?v=2.1.4" type="text/javascript"></script>
  <script src="/plugins/content/jw_sig/jw_sig/includes/js/jquery_fancybox/fancybox/helpers/jquery.fancybox-buttons.js?v=2.1.4" type="text/javascript"></script>
  <script src="/plugins/content/jw_sig/jw_sig/includes/js/jquery_fancybox/fancybox/helpers/jquery.fancybox-thumbs.js?v=2.1.4" type="text/javascript"></script>
  <script src="/plugins/content/jw_sig/jw_sig/includes/js/behaviour.js" type="text/javascript"></script>
  <script src="/plugins/content/uyguntabs/uyguntabs/includes/js/behaviour.min.js" type="text/javascript"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  <script src="/media/ext_tss/assets/js/script.js" type="text/javascript"></script>
  <script src="/media/system/js/caption.js" type="text/javascript"></script>
  <script type="text/javascript">
если не указать версию jquery в вашем компоненте, он не работает, а указать - грузит с Google вторую копию, может, и еще где подгружается - не до конца мне понятно, извините, новичок.
галерея - http://pu-5.ru/uchrezhdenie/dokumenty.html
слайдер - http://pu-5.ru/abiturientu.html

кстати, если не указывать в компоненте слайдера версию jquery, то он работает только на странице с галереей, на других не хочет почему-то...
вывод: на страницах, где нет галереи, jquery не грузиться, как заставить его грузиться на всех страницах? Joomla 3.1.5
« Последнее редактирование: 09.09.2013, 22:24:19 от AlekVolsk » Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #18 : 09.09.2013, 22:24:36 »

ну, у вас jQuery 2 раза подключен, noConflict тоже 2 раза
и кстати ошибка в фансибокс http://prntscr.com/1qbbco
jQuery отключите в плагине, подключена же уже библиотека
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #19 : 09.09.2013, 22:47:14 »

убрал noConflict из фансибокс, как исправить ошибку - не знаю. отключил jquery в плагине - он перестал работать
кстати, с помощью какого инструмента была найдена ошибка, если не секрет?
Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #20 : 09.09.2013, 22:57:13 »

оставьте свой e-mail, отправлю вам новую версию, попробуете
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #21 : 09.09.2013, 22:59:10 »

хм, в профиле указан
спасибо
« Последнее редактирование: 06.04.2015, 00:36:32 от AlekVolsk » Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #22 : 09.09.2013, 23:38:41 »

решил-таки проблему Wink))))
нашел в коде галереи, где грузится jquery:
Код:
if (strpos($popup_engine, 'jquery_')!== false && $jQueryHandling != 0)
{
if (version_compare(JVERSION, '3.0', 'ge')!==false)
{
JHtml::_('jquery.framework');
} else {
if($jQueryHandling=='1.9'){
$document->addScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
} else {
$document->addScript('//ajax.googleapis.com/ajax/libs/jquery/'.$jQueryHandling.'/jquery.min.js');
}
}
}

подумав, решил в слайдере жестко грузить jquery из ядра Joomla:
Код:
    JHtml::_('jquery.framework');
//    $jquery = $this->params->get('jquery');
//    if (isset($jquery)) {
//      $document->addScript('//ajax.googleapis.com/ajax/libs/jquery/'.$jquery.'/jquery.min.js');
//    }
подход, конечно, неправильный, ибо jquery ядром может просто не грузиться, но "на пока" сойдет, потом научусь - поправлю лучше.
большое спасибо за помощь и за компонент!
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #23 : 10.09.2013, 10:14:38 »

новая версия работает исправно, большое вам спасибо.

есть еще вопрос по css: как совместить градиент с изображением?
в слайдере для себя поправил:
Код:
.sliders .title  {
background:linear-gradient(top,#f7f7f7,#e9e7e7);
background:-webkit-linear-gradient(top,#f7f7f7,#e9e7e7);
background:-o-linear-gradient(top,#f7f7f7,#e9e7e7);
background:-moz-linear-gradient(top,#f7f7f7,#e9e7e7);
background:-ms-linear-gradient(top,#f7f7f7,#e9e7e7);
padding: 7px 15px;margin: 0;border: solid 1px #c4c4c4;border-bottom: none;cursor: pointer;
font-family: Verdana, sans-serif; font-size: 12px; text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.sliders .title:hover  {
background:linear-gradient(top,#f7f7f7,#e3e2e2);
background:-webkit-linear-gradient(top,#f7f7f7,#e3e2e2);
background:-o-linear-gradient(top,#f7f7f7,#e3e2e2);
background:-moz-linear-gradient(top,#f7f7f7,#e3e2e2);
background:-ms-linear-gradient(top,#f7f7f7,#e3e2e2);
}
.sliders .title.active  {
background:linear-gradient(top,#e9e7e7 0%, #e9e7e7 70%, #f7f7f7 100%);
background:-webkit-linear-gradient(top,#e9e7e7 0%, #e9e7e7 70%, #f7f7f7 100%);
background:-o-linear-gradient(top,#e9e7e7 0%, #e9e7e7 70%, #f7f7f7 100%);
background:-moz-linear-gradient(top,#e9e7e7 0%, #e9e7e7 70%, #f7f7f7 100%);
background:-ms-linear-gradient(top,#e9e7e7 0%, #e9e7e7 70%, #f7f7f7 100%);
}
.sliders .title.active:hover  {
background:linear-gradient(top,#e3e2e2 0%, #e3e2e2 70%, #f7f7f7 100%);
background:-webkit-linear-gradient(top,#e3e2e2 0%, #e3e2e2 70%, #f7f7f7 100%);
background:-o-linear-gradient(top,#e3e2e2 0%, #e3e2e2 70%, #f7f7f7 100%);
background:-moz-linear-gradient(top,#e3e2e2 0%, #e3e2e2 70%, #f7f7f7 100%);
background:-ms-linear-gradient(top,#e3e2e2 0%, #e3e2e2 70%, #f7f7f7 100%);
}
куда при этом воткнуть url(../images/arrow-square.gif) no-repeat right -51px - непредставляю себе возможным. вопрос, в общем-то не критичен, можно обойтись и без картинки, но если есть возможность совместить, подскажите решение, пожалуйста.
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #24 : 10.09.2013, 10:16:43 »

а еще очень хотелось бы иметь опцию изначально держать все разделы слайдера/спойлера свернутыми, хотя это уже блажь  Smiley

в табах обнаружил косячок: если закладок достаточно много, и они все не умещаются по ширине области, то отображаются только те первые закладки, ширина заголовков которых на 100% умещается по ширине модуля, остальные отбрасываются. возможно ли как-нибудь сделать скроллинг заголовков или отображение их в несколько строк?
« Последнее редактирование: 10.09.2013, 10:23:01 от AlekVolsk » Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #25 : 10.09.2013, 11:50:41 »

в общем, догадался методом тыка, как отобразить изначально все слайдеры скрытыми:  это:
Код:
jQuery(".sliders .desc:not(:first)").hide();
поменял на это:
Код:
jQuery(".sliders .desc").hide(); //:not(:first)
+ закомментировал jQuery(".sliders .title:first").addClass("active"); чтобы стиль к первому слайду не применялся как к раскрытому

остался открытым вопрос с отображением всех вкладок, в частности здесь:http://pu-5.ru/uchrezhdenie/dokumenty.html у меня их 4, по факту отображаются только 3...
« Последнее редактирование: 10.09.2013, 11:57:52 от AlekVolsk » Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #26 : 10.09.2013, 19:22:01 »

чтобы отобразить все вкладки, достаточно будет задать z-index http://prntscr.com/1qh40j
но табы в 2 и более рядов смотрятся на мой взгляд не очень...тогда уж лучше 2 блока табов делать или совместить табы со спойлером
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #27 : 10.09.2013, 20:32:06 »

да, действительно, смотрится не очень, я так понимаю, что реализация поведения заголовков табов аналогично поведению в винде (т.е. когда неактивные вкладки с другой строки расположены сверху) или требует более продвинутых знаний js или вообще малореальна. все равно спасибо за подсказку Azn
Записан
ELLE
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #28 : 10.09.2013, 21:06:41 »

вы имеете в виду как вкладки допустим в браузере? в независимости от них кол-ва они всегда в один ряд, уменьшается лишь их заголовок, то есть обрезается так, чтобы вместились все вкладки в одну строку
можно сделать...подсчитать все заголовки, 100% разделить на их кол-во и задать каждой вкладке, точнее заголовку, width="xx%"
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6461



« Ответ #29 : 10.09.2013, 21:13:31 »

нет, я имею ввиду как, например, в винде окошко свойств системы, где (в win7/win8) 5 вкладок в 2 строки (в xp их больше и в 3 строки), при этом заголовок активной вкладки всегда в нижней строке. или в одну строку с прокруткой
« Последнее редактирование: 10.09.2013, 21:20:45 от AlekVolsk » Записан
Страниц: [1] 2 3 4 5 6 7 8 9   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet