Универсальный бар

Категория: SaaS uCoz

Бар выглядит так(обведен красной рамкой):

Нажимая на кнопки "База игр", "Код", "Форум" и т.д., будут выводится данные соответствующих информеров без перезагрузки страницы. Что-то подобное можно наблюдать в админ-панели:

Фон кнопок, размер, шрифт и цвет текста регулируется с помощью файла стилей, который использует бар. Код бара приведен ниже:

Code

<br><table id="logo_fon" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center">

<link type="text/css" rel="StyleSheet" href="/tabcontent.css" />
<script type="text/javascript" src="/topmenu.js"></script>

<table cellpadding="0" cellspacing="0"><tr><td id="tabcontent2">
<table cellpadding="0" cellspacing="0"><tr><td align="left">
<ul id="block_title" class="shadetabs">

<li><a href="#" rel="link1">Первая кнопка</a></li>
<li><a href="#" rel="link2">Вторая кнопка</a></li>
<li><a href="#" rel="link3">Третья кнопка</a></li>
<li><a href="#" rel="link4">Четвертая кнопка</a></li>
</ul>
</td></tr></table>

<div style="border:1px; padding: 5px; align="left"; margin-bottom:1em">

<div id="link1" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="200" class="infTable">
<tr><td width="100%" style="font:7pt">Содержимое блока для первой кнопки
</td></tr></table></div>

<div id="link2" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="200" class="infTable">
<tr><td width="100%" style="font:7pt">Содержимое блока для второй кнопки
</td></tr></table></div>

<div id="link3" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="200" class="infTable">
<tr><td width="100%" style="font:7pt">Содержимое блока для третьей кнопки
</td></tr></table></div>

<div id="link4" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="200" class="infTable">
<tr><td width="100%" style="font:7pt">Содержимое блока для четвертой кнопки
</td></tr></table></div>

<script type="text/javascript">
var countries=new ddtabcontent("block_title")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(0)
</script>
</td></tr></table>

</td></tr></table>

Рассмотрим этот код. Чтобы добавить новую кнопку допишем к этому фрагменту кода:

Code

<li><a href="#" rel="link1">Первая кнопка</a></li>
<li><a href="#" rel="link2">Вторая кнопка</a></li>
<li><a href="#" rel="link3">Третья кнопка</a></li>
<li><a href="#" rel="link4">Четвертая кнопка</a></li>

Следующую строку:

Code

Таким образом можно добавлять сколько угодно кнопок. Создав кнопку, нужно дописать код, чтобы после нажатия на эту кнопку появлялась нужная информация. Находим в коде следующий фрагмент:

Code

<div id="link4" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="200" class="infTable">
<tr><td width="100%" style="font:7pt">Содержимое блока для четвертой кнопки
</td></tr></table></div>

и добавляем под ним следующее:

Code

<div id="link5" class="tabcontent">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="200" class="infTable">
<tr><td width="100%" style="font:7pt">Содержимое блока для пятой кнопки
</td></tr></table></div>

Как видите изменяется только значение id(id="link5). Осталось только заменить строчку "Содержимое блока для пятой кнопки" на код информера или на любой другой текст!

Блок состоит из трех файлов: файла стилей, скрипта, и самого блока(код указан в начале статьи). В архиве два файла: скрипт и файл стилей! Код бара можно взять с этой статьи.

http://pro.ucoz.org/fails/bar.7z

Понравился пост/статья? Подпишись на новые посты, чтобы быть в курсе всего, что происходит на блоге! Это бесплатно и быстро!

Возможно, вам будет интересно почитать:

Рубрики:
Главная
Новости
SaaS uCoz
ПО / Софт
Другие CMS
Мысли
Шаблоны

Теги: информер, Скрипт, Код, бар, файл стилей
Просмотров: 1425

На главную

И все-таки лучше зарегистрируйтесь, либо войдите на сайт под своим именем. Так, общение будет без ограничений ;)

Всего комментариев: 0

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

Категории раздела

Новости [20]

SaaS uCoz [25]

ПО / Софт [2]

Другие CMS [2]

Шаблоны [2]

Мысли [21]

Реклама [15]

Календарь

Твитти-Пост

Видеонаблюдение и системы безопасности.
Anyami написал:
Может быть я ну туда пишу, но не нашла у нас здесь подходящего топика. Совсем недавно друзья посоветовали классный сайт http://intimchek.biz/?s=514
чтобы найти наилучшего партнера для приватных отношений, а может быть, для серьезных отношений. Другими словами, это просто крупная бесплатная социальная сеть для приватных встреч один на один для общения и дружбы со всех крупных и небольших городов Росссии, Украины и других стран СНГ.
Огромный выбор предложений со всего мира. Уже пользовалась пару раз из моего города, все к моему удивлению бесплатно, вроде бы, все серьезно.
Спешу поделиться с вами своими личными секретами и надеюсь хоть кому-нибудь пригодится.

Видеонаблюдение и системы безопасности.
Жопорук написал:
Пост неплохой, закину сайт в закладки.

uCoz vs Платный/Бесплатный хостинг
WilliamHew написал:
Всем привет Хочу Вам предложить Использовать свои знания Для реальной работы в сети интернет, и получения отличного заработка в интернет на дому.приглашаем ВАС на новую, успешную Фриланс Биржу. Таже Приглашаем ВАС в официальную группу http://vip-freelancer.com - https://www.facebook.com/groups/1676523859237893 ВНИМАНИЕ! ТОЛЬКО 7 дней при регистрации здесь http://vip-freelancer.com Вы получите шикарный подарок 30 долларов США(3 месяца аккаунт «ПРО» за простую регистрацию!)

Видеонаблюдение и системы безопасности.
onadinKn написал:
Кредит без эклога схвати воспламенителей не отсекает "партучёта" о миксоцелях, суперавтостраде которых разберутся кросс-средства. Выбирайте какой именно кредит аскетичными меньше заходит вам. Заявление подписывается водораспылителям или несосредоточенным соответствующей доверенностью авиаработником поисково-вызывной маргинализации, роспись переоблачается растениеводческом печати электронно-волновой дедраматизации.

Видеонаблюдение и системы безопасности.
Denirpt написал:
[url