Здравствуйте, уважаемые форумчане !
Нужен скрипт-аккордеон, который будет не только скрывать текст, но и воспроизводить мультимедиа-контент.
Но скрипт должен работать с множеством ссылок (блоков) - и к тому же, работать автоматически.
Например, при открытии одного из блоков срабатывает плеер (запускает музыку) ... а при открытии любого другого блока - предыдущий блок закрывается (и выключается его плеер), и включается плеер с музыкой из текущего блока.
И таким образом должны работать (автоматически включаться-выключаться) все мультимедийные ссылки.
При этом необходимо использование только средств, встроенных в браузеры - т.к. скрипт должен работать не только на странице сайта, но и на локальном компьютере (отключенном от Интернет).
Т.е., никаких сторонних сервисов или сторонних скриптовых библиотек - только HTML, и возможно Java.
Покопался в Сети, нашёл пару скриптов ...
|
Код:
|
<html>
<head>
<script>function showTooltip(divID1, divID2)
{
var myHiddenDiv = document.getElementById(divID2);
var myDiv = document.getElementById(divID1);
myHiddenDiv.style.display = 'none';
if(myDiv.style.display == 'none')
{
myDiv.style.display = 'block';
}
else
{
myDiv.style.display = 'none';
}
return false;
}
</script>
</head>
<body>
<a href='javascript:;' onclick='showTooltip("tooltip1", "tooltip2")'> show1 </a>
<div id="tooltip1" style='display: none'>
<a href=#>blah bla1</a>
</div>
<br>
<a href='javascript:;'>
<span onclick='showTooltip("tooltip2", "tooltip1")'> show2</span></a>
<div id="tooltip2" style='display: none'>
<a href=#>blah bla2</a>
</div>
</body>
</html> |
|
Код:
|
<html>
<head>
<script type="text/javascript">
//обьявление функции которая выполняет переключение между вкладками
function showTab(pTabIndex)
{
var i=0; for (i=0 ; i<tabs.length ; i++)
{
//делаем нужный контент-вкладку видимой.
//стальное - невидимами
tabs[i].style.display = (i == pTabIndex) ? "block" : "none";
//выделяем гиперссылку-корешок, соответствующую видимой вкладке,серым фоном , остальные - белым
tabs[i].style.backgroundColor = (i == pTabIndex) ? "#cccccc" : "#ffffff";
}
}
</script>
<!-- создаём стилевые классы для контейнеров ,содержащего гиперссылки-корешки вкладок ,
и для контейнера б содержащего сами вкладки -->
<style>
.tabhost { border: thin solid #cccccc; padding:5px; }
.tabhs A { border: thin solid #cccccc; padding: 5px 5px 0px 5px ; }
</style>
</head>
<body>
<div class="tabhs">
<A id="tabH1" href="#" ONCLICK="showTab(0);">вкладка 1 </A>
<A id="tabH2" href="#" ONCLICK="showTab(1);">вкладка 2 </A>
<A id="tabH3" href="#" ONCLICK="showTab(2);">вкладка 3 </A>
</div> <div class="tabhost">
<div id="tab1"><p>это содержимое первой вкладкиp</p> </div>
<div id="tab2"><p>это содержимое второй вкладкиp</p> </div>
<div id="tab3"><p>это содержимое третей вкладки </p> <p>это содержимое </p>
<p>это содержимое </p> <p>это содержимое </p> </div>
</div>
<script TYPE="text/javascript">
var tabs = new Array();
tabs[0] = document.all["tab1"];
tabs[1] = document.all["tab2"];
tabs[2] = document.all["tab3"];
tabs[3] = document.all["tab4"];
tabs[4] = document.all["tab5"];
var tabHs = new Array();
tabHs[0] = document.all["tabH1"];
tabHs[1] = document.all["tabH2"];
tabHs[2] = document.all["tabH3"];
tabHs[3] = document.all["tabH4"];
tabHs[4] = document.all["tabH5"];
//делаем изначально видимую первую вкладку
showTab(0);
</SCRIPT>
</body>
</html> |
Но эти скрипты работают не так, как мне нужно.
Первый скрипт исправно автоматически выключает мультимедиа-контент при переходе к следующей ссылке - но зато скрипте использует всего ДВА блока, и сделать большее их количество не получается.
Да и если бы даже получилось оформить массив ссылок в том виде, как это изначально сделано в скрипте - то скрипт был бы весьма запутанным, и добавлять в него при необходимости новые блоки было бы сущим кошмаром.
Второй скрипт можно нагрузить любым количеством ссылок (и массив там получается относительно компактный и достаточно удобный для редактирования) - но при этом в скрипте НЕ работает автоматическое отключение мультимедиа-контента (т.е. одновременно продолжают работать плееры во всех ранее открытых ссылках).
Может кто-нибудь написать требуемый скрипт - или хотя бы откорректировать имеющийся (2-й) вариант скрипта ?
.