Эффекты на основе Java Script, jQuery и т.д.

Вернуться в каталог >>>

Переключатель с возможностью открытия дополнительных вкладок - окон

Demo #1 - базовый вариант и 2-а варианта меню.

Tab content 1 here
Tab content 1 here

Tab content 2 here
Tab content 2 here

Tab content 3 here
Tab content 3 here

Tab content 4 here
Tab content 4 here

Back Открыть 4-ю вкладку Forward

Demo #2 - вариант с вызовом дополнительных вкладок-окон при открытии заданных вкладок переключателя.

Tab content 1 here
Tab content 1 here>

Tab content 2 here
Tab content 2 here

Tab content 3 here
Tab content 3 here

Tab content 4 hereT
ab content 4 here

Открыть 3-ю вкладку

Перезагрузить и сделать 2-ю вкладук активной - URL parameter

Demo #3 - автоматический режим.

Tab content 1 here
Tab content 1 here

Открыть вкладку и идентификатором меню id="myfavorite"

Tab content 2 here
Tab content 2 here

Tab content 3 here
Tab content 3 here

Tab content 4 here
Tab content 4 here

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

Здесь пояснять нечего.

Внутри тега <BODY> - </BODY> там где у Вас будет текст.

<b>Demo #1</b> - базовый вариант и 2-а варианта меню.<br><br>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>  
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://webkpb.ucoz.ru" target="_blank">Библиотека Flash</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">Tab content 1 here<br>Tab content 1 here</div>
<div id="country2" class="tabcontent">Tab content 2 here<br>Tab content 2 here</div>
<div id="country3" class="tabcontent">Tab content 3 here<br>Tab content 3 here</div>
<div id="country4" class="tabcontent">Tab content 4 here<br>Tab content 4 here</div>

</div>

var countries=new ddtabcontent("countrytabs") // идентификатор меню
countries.setpersist(true)     // запоминать состояние переключателя при уходе со странички, и востанавливает его при следующем заходе.
countries.setselectedClassTarget("link") //"link" - выделять активную вкладку в меню, или "linkparent" - не выделять
countries.init()      // инициализация всего и, если нужен автоматический режим, в () задаётся период смены вкладок (смотри пример 3)

</script>

<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none"><img src="left.jpg" border="0">Back</a> 
<a href="javascript: countries.expandit(3)">Открыть 3-ю вкладку</a> 
<a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none"><img src="right.jpg" border="0">Forward</a></p>

<hr />

<b>Demo #2</b> - вариант с вызовом дополнительных вкладок-окон при открытии заданных вкладок переключателя. <br><br>
 
<div id="flowernote" style="display:none; position:absolute; right: 
30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 
200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 
30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>

<div id="tcontent1" class="tabcontent">Tab content 1 here<br>Tab content 1 here></div>

<div id="tcontent2" class="tabcontent">Tab content 2 here<br>Tab content 2 here</div>

<div id="tcontent3" class="tabcontent">Tab content 3 here<br>Tab content 3 here</div>

<div id="tcontent4" class="tabcontent">Tab content 4 hereT<br>ab content 4 here</div>

</div>
 
<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li> 
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://kpbwebstudio.narod.ru" target="_blank">Моя WEBстудия</a></li>  
</ul>
</div>
<br style="clear: left" />

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

<p><b><a href="javascript: myflowers.expandit(2)">Открыть 3-ю вкладку</a></b></p>
<p><b><a href="perekluchat.html?flowertabs=1">Перезагрузить и сделать 2-ю вкладук активной - URL parameter</a></b></p>

<hr />

<b>Demo #3</b> - автоматический режим.<br><br>

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
<li><a href="http://kpbshablon.ucoz.ru" target="_blank">Магазин дизайнов и шаблонов</a></li>
</ul>
<br style="clear: left" />
</div>

<div id="dog1" class="tabcontent">Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript:mypets.expandit('myfavorite')">Открыть вкладку и идентификатором меню id="myfavorite"</a></b></p>
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="dog3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="dog4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(false)
mypets.setselectedClassTarget("link")
mypets.init(5000)

</script>

Всё основное подписано, проблем быть не должно. Опции скрипта описаны в программирование первого примера. Возможно, дополнительно, за кнопками меню переключателя закреплять открытие любого колличества дополнительных вкладок-окон не входящих в переключатель и распологающихся в нужных Вам местах странички.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.