Включить или выключить - управление элементами - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 04.12.2016
Скрипты для uCoz » Эффекты для сайта uCoz » Включить или выключить - управление элементами

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Включить или выключить - управление элементами

Скрипт для подключения и отключения элементов на сайте




Скриптом можно управлять элементами сайта включая или отключая их, в роли элементов может выступать любые видимые объекты.Применение эффекта полностью лежит на воображении веб-мастера, изгаляться можно до бесконечности.Суть работы скрипта в применении свойства display и прикреплении идентификаторов элементам управления.Действовать скрипт будет только в пределах страницы на которой находятся предметы воздействия, к ним нужно будет прикрепить имя ID для связи с кнопками включения и отключения.Если элементу изначально поставлено значение свойства display:none; можно будет включать его, если значение не проставлено тогда можно отключать.Для примера я подвесил якоря IDентификаторов на несколько элементов на этой странице, чтобы было понятнее как это работает. Если столкнётесь с трудностями в понимании или будут предложения, используйте форму комментариев.





Пример скрипта для использования


<script>
function Open()
{
document.getElementById("DS").style.display="block";
}
function Close()
{
document.getElementById("DS").style.display="none";
}
</script>
<button type="button" onclick="Open()">Включить</button>
<button type="button" onclick="Close()">Отключить</button>



С добавленными кнопками он может выглядеть так

Так можно добавить кнопок хоть сколько, в этой строке getElementById, то что в скобках это идентификатор который нужно будет присвоить элементу упрвления.Далее, на включение, например function Vkl() стоит значение display="block", оно будет делать предмет воздействия видимым, а function Close() имеет значение display="none" и убирает элемент. Вместо Open(),Close(),Vkl() и Otkl() можете установить свои названия, главную роль играет значение самого свойства display.



<script>
function Open()
{
document.getElementById("DS").style.display="block";
}
function Close()
{
document.getElementById("DS").style.display="none";
}
function Vkl()
{
document.getElementById("DSA").style.display="block";
}
function Otkl()
{
document.getElementById("DSA").style.display="none";
}
</script>
<button type="button" onclick="Open()">Включить</button>
<button type="button" onclick="Close()">Отключить</button>
<button type="button" onclick="Vkl()">Включить</button>
<button type="button" onclick="Otkl()">Отключить</button>



Подключение скрипта к элементам

Смотрите, для добавления нового материала я использую HTML разметку и самое верхнее описание у меня заключено в тег <p>.Я взял и прикрепил к нему идентификатор из примера скрипта вот так <p id="DS">тут у меня описание</p>, а ниже этой строки вставил скрипт из первого примера и получились кнопки которые могут управлять этим описанием, нажмите на кнопки и посмотрите как там моё описание.



Подключаем ещё что нибудь

Во втором примере с добавленными кнопками я тоже прикрепил идентификатор и выглядело это так:
<code class="code" id="DSA">Здесь скрипт для показа</code>А ниже этой строки я добавил скрипт из этого же примера, а значит теперь не только описание можно убрать но и пример тоже, там ведь 4 кнопки, одна пара убирает описание другая демонстрационное поле CODE, пробуем




Двойное использование одного идентификатора

Тут как раз есть ещё одна тема и она как нельзя кстати предлагает себя описать. Дело в том, что я уже давно повесил один якорь (id) на стандартную форму комментариев, сделал это для упрощения прокручивания страницы прямо из описания, на "Странице материла и комментариев к нему" я прикрепил его к таблице, вот так:
<table border="0" style="width:100%;" class="catsTable" id="dscomment">
а в самом верхнем описании я предлагаю воспользоваться формой комментариев если вдруг чо, изнутри она выглядит так:
<a href="#dscomment" class="colorpicker">форму комментариев</a>
Видите в ссылке вместо адреса стоит ссылка на якорь, так тоже можно приколоться.А можно и поизгаляться над формой комментариев раз уж такая тема, для этого подготовим скрипт под готовый id.



Вставляем идентификатор якоря


<script>
function Nado()
{
document.getElementById("dscomment").style.display="block";
}
function Nenado()
{
document.getElementById("dscomment").style.display="none";
}
</script>
<button type="button" onclick="Nenado()">Удалить форму коментов</button>
<button type="button" onclick="Nado()">Вернуть её назад</button>



Теперь ниже этой строки вставляем скрипт из примера и пробуем воздействовать на форму комментариев:



И наконец пробуем включать изначально отключенные элементы

Для включения изначально отключенных элементов нужно эти самые элементы сделать невидимыми, тоесть присвоить им значение свойства display:none;.Такм элементом может быть любая штука, например видеоплеер, хочу заодно прорекламировать своё творение, видеоплеер с мувиками Counter Strike Source отличного качества в количестве более 100.Беру скрипт плеера и устанавливаю ему значение display:none; в стиле, заодно присваиваю id вызова кнопками скрипта, выглядит это так



<object type="application/x-shockwave-flash" data="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" width="500" height="281" id="player" style="display:none;">
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="movie" value="http://delaisait.ucoz.ru/script/video/uppod/uppod.swf" />
<param name="FlashVars" value="pl=c:2iob3gRLvao40dF73aF7GCmzUaJevI9zvcyj354VGCJhGxo70NJz3iuLkCJMGfk72a4j3ctBGihb&amp;st=c:2iob3gRLvao40dF73aF7GCmzUaJevI9zvcyj354VGCJa2xo40NJz3iuLkCJVGgYVtiDNOgEBGihb" />
</object>



Теперь нужно сделать скрипт с кнопками его вызова, заодно можете посмотреть на качество вложенных в видеоплеер мувиков, сам плеер будет находиться ниже кнопок



<script>
function Goumuve()
{
document.getElementById("player").style.display="block";
}
function Gameover()
{
document.getElementById("player").style.display="none";
}
</script>
<button type="button" onclick="Goumuve()">Показать плеер</button>
<button type="button" onclick="Gameover()">Убрать плеер</button>



Помещаем скрипт с кнопками для плеера и сам плеер





Надеюсь Вы выберите время для экспериментов с применением скрипта, тому кто не нашол для себя ничего нового прошу не судить меня предвзято.Для испытаний с неограниченными возможностями эффекта скрипта предоставляю Вам редактор. Желаю удачи!


Любые решения с использованием скрипта доверьте редактору HTML









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1608 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: отключить, подключить, управление, кнопки

    Всего комментариев: 2
    0   Спам
    2 IZOTOP   (09.03.2013 07:44)
    Аватар IZOTOP Алексей Вы чертовски правы, валидность сопоставляется свойствам элементов и указанным в них значениям. Использовать "валидатор" лаборатории http://validator.w3.org/ безнравственно по отношению к своему творению. Их параметры предельно предвзяты и не имеют здравого смысла в совокупности.
    Роль любого государства проявляется в навязывании правил, этим оно создаёт безопасность существования власти.
    К Вашему сведению, система uCoz не может использовать "валидный" результат поставки кода потребителю, даже если изначально использовать тип документа HTML5, перестроить атрибуты таблиц на которых строится построение шаблона системы, изменить параметры вида материалов и свойства показа категорий не приведёт к "идеалу".Многие согласны с тем что валидность может существовать только условно, тратить время своей жизни на капризы "закона" никто не стремится.Другими словами, хочеш быть хорошим мальчиком будь им, это твоя жизнь и никто не в праве остановить тебя тратить время зря.

    0   Спам
    1 alurbur   (09.03.2013 05:10)
    Аватар alurbur Сайт с этими скриптами не пройдет проверку на валидность CSS!


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]