torturesru
Гуру форума
- Регистрация
- 20 Сен 2012
- Сообщения
- 302
- Реакции
- 83
- Автор темы
- #1
Проблема: длинные описания фильмов и необходимо часть описания убрать под спойлер. В админке и в редакторе не нашел такой возможности. На фирменном форуме есть рекомендация следующего вида:
Но как это сделать я не понял. Был бы очень благодарен за объяснение в стиле "для самых тупых". Стоит последняя вариация третьей версии шопскрипта.
Заранее спасибо.
1. Если вы еще не подключили библиотеку jQuery, то качаем ее.
2. Подключаем ее между тегами <head></head>:
Код:
<script type="text/javascript" src="{$smarty.const.URL_JS}/jquery.js"></script>
3. Для удобства создаем новый файл, например myshop.js.
4. Также подключаем его между тегами <head></head>:
Код:
<script type="text/javascript" src="{$smarty.const.URL_JS}/myshop.js"></script>
5. Бросаем нашу библиотеку и созданный файл в папку published/SC/html/scripts/js
6. Где нужно вывести вопрос-ответ, добавляем:
Код:
<h3 class="openIt myPlus">Вопрос: Как вам позвонить?</h3>
<div class="closeIt">
Ответ: Возьмите телефон и позвоните )
</div>
Таких вопросов и ответов можно добавить сколько угодно.
7. Открываем наш файл myshop.js (в моем примере он) и добавляем в него код:
Код:
$(document).ready(function() {
//Скрываем все ответы по умолчанию
$('.closeIt').hide();
//Обрабатываем нажатия
$('.openIt').toggle(function() {
$(this).removeClass('myPlus').addClass('myMinus');
$(this).next().slideDown(200); //показываем ответ
},
function() {
$(this).removeClass('myMinus').addClass('myPlus');
$(this).next().slideUp(200); //скрываем ответ при повторном нажатии
});
}); //end Ready
Стиль CSS, для + и -
Код:
.myPlus { padding-left: 15px; background: url('путь к фото плюс'); background-repeat: no-repeat; background-position: 1px 3px; }
.myMinus { padding-left: 15px; background: url('путь к фото минус'); background-repeat: no-repeat; background-position: 1px 3px; }
.openIt { cursor: pointer; display: inline-table; }
2. Подключаем ее между тегами <head></head>:
Код:
<script type="text/javascript" src="{$smarty.const.URL_JS}/jquery.js"></script>
3. Для удобства создаем новый файл, например myshop.js.
4. Также подключаем его между тегами <head></head>:
Код:
<script type="text/javascript" src="{$smarty.const.URL_JS}/myshop.js"></script>
5. Бросаем нашу библиотеку и созданный файл в папку published/SC/html/scripts/js
6. Где нужно вывести вопрос-ответ, добавляем:
Код:
<h3 class="openIt myPlus">Вопрос: Как вам позвонить?</h3>
<div class="closeIt">
Ответ: Возьмите телефон и позвоните )
</div>
Таких вопросов и ответов можно добавить сколько угодно.
7. Открываем наш файл myshop.js (в моем примере он) и добавляем в него код:
Код:
$(document).ready(function() {
//Скрываем все ответы по умолчанию
$('.closeIt').hide();
//Обрабатываем нажатия
$('.openIt').toggle(function() {
$(this).removeClass('myPlus').addClass('myMinus');
$(this).next().slideDown(200); //показываем ответ
},
function() {
$(this).removeClass('myMinus').addClass('myPlus');
$(this).next().slideUp(200); //скрываем ответ при повторном нажатии
});
}); //end Ready
Стиль CSS, для + и -
Код:
.myPlus { padding-left: 15px; background: url('путь к фото плюс'); background-repeat: no-repeat; background-position: 1px 3px; }
.myMinus { padding-left: 15px; background: url('путь к фото минус'); background-repeat: no-repeat; background-position: 1px 3px; }
.openIt { cursor: pointer; display: inline-table; }
Заранее спасибо.
