🇯🇸 Простой спойлер для сайта
Чтобы сделать такой спойлер у себя на сайте сначала вначале HTML странице (или в шаблоне) установите скрипт спойлера:
HTML
Далее в нужном месте страницы установите сам спойлер.
Данный код можно вcтавить на любую HTML сраницу в то место, где нужен спойлер. Содержимое спойлера может быть любое на Ваше усмотрение.
Также этот спойлер можно вставлять и в шаблоны сайта uCoz, а в самом содержимом использовать системные переменные Ucoz.
Несколько спойлеров на одной странице
Если на одной странице нужно установить несколько таких спойлеров, тогда нужно сделать следующее.
За спойлер отвечает идентификатор: id = «spoiler1»
Именно его и нужно поменять в HTML коде спойлера (он там встречается 2 раза) и вставить весь HTML код с новым идентификатором на страницу, где нужен еще один спойлер. И так столько раз, сколько нужно спойлером на странице.
Но чтобы вас не путать, просто ниже прикладываю код второго спойлера, где spoiler1 я уже заменила на spoiler2.
Редактирование кнопки спойлера
Сама кнопка это следующая строка. Чтобы отредактировать кнопку — нужно вносить изменения именно в эту строку:
Тег применяется для создания различных кнопок, флажков, переключателей и полей для заполнения (форм). У этого тега очень много атрибутов, но для редактирования нашей кнопки мы рассмотрим лишь некоторые.
Атрибут type — в нашем случае только два варианта:
— button — простая кнопка;
— image — кнопка изображение. Применяя этот атрибут не забудьте добавить атрибут src и путь к файлу картинке.
Атрибут value — в данном случае текст Вашей кнопки, чтобы его изменить просто введите другой текст;
Атрибут style — можно применить для изменения цвета кнопки и цвета шрифта. За цвет кнопки будет отвечать background, а за текст шрифта color.
И в итоге у Вас может быть такая цветная кнопка:
Также существует еще много вариантов установки спойлера на сайт. Один из них — спойлер с плавным открытием и закрытием.
25 комментариев для “🇯🇸 Простой спойлер для сайта”
Добрый день!
Помогите с решением вопроса по размещению нескольких кнопок на странице. Я уже по всякому попробовал менять имя SPOLER (6шт), но так и не нашел правильное решение.
а можно как нибудь поменять стиль кнопки. чтобы она была не по размеру текста написанного в ней а больше.и как можно поменять стиль кнопки ?
Думаю, в моем случае она задана настройками шаблона дизайна сайта. Ее не должно быть в стандартном варианте.
Забыл сказать самое главное: желательно, чтобы спойлеры можно было нумеровать, так как на одной странице их будет не менее трех.
3go1st, В статье в разделе «Несколько спойлеров на одной странице» описано как нумеровать спойлеры и размещать несколько спойлеров на одной странице.
Добрый день, 3go1st. Пришлите, пожалуйста, ссылку на свой спойлер, так как я тестировала такой вариант у себя на сайте и все работает.
Со спойлером картинкой Я разобрался, спасибо. У меня еще возникла потребность вот в чем.
Чтобы при клике на слово или картинку, открывался спойлер в другом месте страницы. Например клик на слово ОТКРЫТЬ, открывалось окно с контентом намного ниже или выше от этого слова, допустим слово ОТКРЫТЬ в вверху страницы, а открывается спойлер, где-то в середине, после определенных модулей и текста.
Заранее спасибо за ответ!
Огроменное спасибо. Единственное внятное пояснение из всей той кучи, что я нашла. Особенно про «галочку на Ucoz» — спойлер не раскрывался, пока не сняла эту галку.
И снова здравствуйте))
Столкнулся с проблемой: в случае спойлера в виде картинки, при клике на картинку, показывается скрытый текст буквально секунду и обновляется страница, спойлер соответственно закрывается.
Вот как я прописал код:
Слово spoiler не нумеровал и не менял, оставил как есть, вместо слова «путь_к_картинке», добавил ссылку на картинку, так что, больше ничего не менял.
День добрый, 3go1st))) У меня все работает! http://js.do/natrud/42074
Если Вы работаете на uCoz, в режиме редактирования материала проверьте стоит ли у вас галочка «Заменять переводы строк тегом «. Этой галочки быть НЕ должно!
Способ с Youtube сразу отпадает, т.к. этот видеохостинг, скажем так, довольно строгий в отношении модерации, да и на него всегда есть ссылка перехода, т.е. есть возможность уйти с сайта, то что имеется у меня никак не уводит с сайта. Осталось как-то разобраться с автозапуском, может есть способ какой-то ограничительной области, куда можно поместить ссылку, как бы её заморозив. Быть может как-то так: при открытии спойлера открывается картинка с экраном плеера, при клике на неё (картинку) запускается видео. Не подскажете как это реализовать ??
Единственное что могу посоветовать это варианты со всплывающими окнами, так как в таком случае видео будет начинаться только во всплывающем окне. Реализовать можно как через спойлер:
< a href = "javascript://" onclick = "new _uWnd('ajax','Видео','600','360',
< a href = "javascript://" onclick = "new _uWnd('ajax','Видео','600','360',
Я вот что понял, моя ссылка на видео имеет свойство запускаться автоматически, среди всего текста ссылки я не нашел чего-то, чтобы могло её остановить, может есть какой-то способ остановить ?? Вот пример ссылки: http://n20.filecdn.to/ff/YjkzZDU4ZGI1OTRjNTRkMmI5ZGFmNWUzNTI1ODFjYmV8ZnN0b3wxNTY1MzU3ODYzfDEwMDAwfDJ8MHxmf DIwfDgwZmY3ZjVmOTk1NzY1NGMyMTY3NjkzODA2YWZjMjM0fDB8MjU6bC4xODpyLjMzOjAuMjQ6ei40Oj R8MHwxMjY2MjA0NDAx/play_28dxdv80afkvv.mp4
Я все думала над Вашим видео. Вероятно, автоматический запуск видео зависит именно от настоек сайта, на котором оно находится. Например, на Youtube такого нет. А что если скачать это видео и загрузить на youtube, и на Вашем сайте уже размещать ссылку с youtube?
Уже близко, Ура !! Мне пришлось убрать из Вашего кода //www.youtube.com/embed/ID_youtube_video и вставить свою ссылку на видео, только вот маленкая проблемка, видео запускается автоматически, даже без нажатия на кнопку спойлера, выглядит это так: спойлер скрыт, идет звук видео, само видео можно увидить только после открытия спойлера, что в коде изменить, чтобы видео запускалось только после открытия спойлера?
Попробовал вариант с видео Youtube, только со своей картинкой и своей ссылкой на видео, не из Youtube, все работает, только я спрашивал, как сделать запуск видео без картинки, чтобы сразу после клика на спойлер, под спойлером начинало идти видео, В САМОМ СПОЙЛЕРЕ, без всплывающего окна, как получается с примером видео в Youtube.
Спасибо огромное, спойлер работает и даже несколько одновременно, но у меня вопрос, как под него спрятать видео, на видео есть именно ссылка, не хтмл код видео, а ссылка! Когда вставляю туда эту ссылку, отображается только буквенный текст ссылки. Как сделать чтобы при открытии спойлера начинало идти видео, при этом в маленьком окошке (т.е. в не развернутом виде), так чтобы сайт оставался открытым, самый простой пример, что-то типа как ВКонтакте.
Вот пример ссылки на видео с мультфильмом:
http://n4.filecdn.to/ff/OWNhODRhMzRiNjQ3MDE4ZGJjZjcyMDNlY2QyMjY0Zjh8ZnN0b3wxNTY1MzU3ODYzfDEwMDAwfDJ8MHxkf DR8MWFlNjI5ZDRhODEwMzhmMzg4OTE5YTUxZGI1NmY5YzF8MHwzOjF8MHwxNzQ5MjQ1MTgx/play_28dxjzc0obtez.mp4
Добавить комментарий Отменить ответ
Добрый день! Пожалуйста, отправьте мне сайм скрипт на email: admin@stepfor.top Также, в письме напишите почту,с которой совершалась покупка. Посмотрю.
Подскажите , пожалуйста ,около месяца уже не запускается скрипт, выдает ошибку TypeError: oid is null, line 51 (Error code: -991).…
Html код спойлер для ucoz
Сначала хотел назвать этот пост «Стандартный юКозовский спойлер (uSpoiler) на новый лад», но, когда сохранял документ, передумал.
Но, не в этом дело.
Еще один вопрос возник, насчет спойлеров на форуме, возможно ли с помощью CSS сделать, чтобы они открывались по клику не только на кнопку но и по всему блоку.
П.С.: Принцип работы, чтобы был, как на рутракере(торрентс.ру).
И, что самое интересно, ни одного более-менее толкового ответа на этот вопрос, я не припомнил. Хотя, думаю, что по вопросам HTML / CSS / JavaScript облазил этот форум досконально.
И это, конечно же, не значит, что именно эта статья — самый, что ни на есть преправильный ответ на этот вопрос.
Конечно нет.
Это — просто мой вариант изменения стандартного, для сайтов в uCoz , спойлера.
- 1. Изменить, внешний вид спойлера.
- 2. Изменить событие «click()» и поведение при клике.
- 3. Всё это должно быть максимально просто, и при минимальном вмешательстве в исходный код.
Если вы не в курсе, стандартный спойлер выглядит вот так (с моими стилями «по умолчанию»):
Оригиналы файлов:
http://casting.mp3.ru/upload/audio/LikBezz_AlwaysTheSunExtendedMixRichardDurandmp3_Jul_14_22_02_40_GMT_2010_1208297076.mp3
http://casting.mp3.ru/upload/audio/LikBezz_ATBfeatTiffLaceyMyEverythingmp3_Jul_14_22_51_48_GMT_2010_880786160.mp3
А это его исходник:
Задаём стилевое оформление.
Ну, с этим всё просто.
Примерно вот так. Плюсы/минусы — стандартные юКозовские. Лежат у всех по адресу — «/.s/img/icon/pm.gif».
У меня это будет так:
Стили прописаны относительно ячейки «.posttdMessage» — это актуально, если у вас для тегов «input» уже прописаны стили по умолчанию, и, если у вас разные стили оформления спойлеров для форума и других модулей/страниц сайта.
Всё бы хорошо, но установленные по умолчанию значения для открытого [-] и закрытого [+] немного «не в кассу» .
Хотя, можно оставить и так, и просто убрать из стилей фоновую картинку (плюс-минус) .
Если вам этого достаточно — установите прозрачный фон, и поправьте отступы.
Примерно, вот так:
Ну а если же нет, пишем скрипт, точнее, не пишем, а дорабатываем имеющийся. ヅ
Вот его законченная версия.
$(‘td.posttdMessage .uSpoilerButton’).each(function () — проходимся по всем кнопкам «uSpoilerButton» в ячейке «posttdMessage»
$(this).val($(this).val().replace(/\[[+-]]/g, »)) — убираем символы для открытого [-] или закрытого [+] значения ЭТОЙ $(this) кнопки.
.removeAttr(‘onclick’) — удаляем имеющийся по умолчанию атрибут «onclick» — от стандартного скрипта.
$(this).click(function() — вешаем свою функцию на событие «onclick»
$(this).parent().parent().toggleClass(‘uSpoilerOpened’) — поднимаемся на два уровня вверх от кнопки «uSpoilerButton» , то есть до родительского дива с классом «uSpoilerClosed» и вешаем на него функцию «.toggleClass()» — переключает класс указанный в скобках — если у элемента указанный class существует, то удаляет его, если не существует — добавляет.
.find(‘.uSpoilerText’).slideToggle(‘fast’) — находим див контента «uSpoilerText» и устанавливаем для него функцию «.slideToggle()» Скрывает видимые элементы и показывает скрытые используя эффект изменения высоты. Скорость (в скобках) может быть «slow» , «normal» , или «fast» . Либо задаваться числом в мс.
По этому вопросу, у меня, на текущий момент, больше нет соображений. ヅ
Если у вас остались вопросы, или что-то не получается — пишите на форум, и, если кратко, в комментариях.
Html код спойлер для ucoz
Поменяй в ПУ окно ввода сообщений.
Если окно такое, как тут, то там можно перетянуть значки.
И спойлер тоже.
Но лично мне больше нравится другое окно.
Вот такое.
damir_sh, развертывающийся контент написать не очень трудно, но без php ты не сможешь дать каждому спойлеру свое имя, что бы при клике разворачивался один спойлер, а не все.
Так я сделал разворачиваюющуюся подпись пользователя, просто присвоил контенту такое же имя, как и у автора сообщения. Спойлеров же может быть много, их обуздать не удастся, нужно искать, в чем проблема оригинального спойлера юкоза.
webanet, би-би коды не сочетаются с кодом видео, вставленного до этого из вконтакта. Когда после html редактирования перехожу в bb и вставляю спойлер, то он не работает.
damir_sh, держите хтмл вариант
будет работать только в хтмл среде. там же и ифреймы контакта работают
вместо красного будете вписывать свое содержимое
получить хтмл с содержимым можно в другом окне браузера, создав тестовую новость и заполнив спойлер как нужно и после сохранения в би-би кодах перейти в хтмл панель и скопировать получившееся. довольно простое и эффективное колдунство по выдергиванию кода спойлера с содержимым в хтмл среду