Скрипт создания закладок с панелями - Форум общения - Logical-portal

Время:

Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.128.172.32

Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.

Страница 1 из 1
1

Скрипт создания закладок с панелями

spayder

Сообщение оставлено 23.03.2011 в 14:26:46 | Сообщение #1

1537

Предлагаемый скрипт создаст на вашей страничке эффект панели с закладками. Этот прием будет для Вас актуален, если на одной страничке у Вас размещается слишком много информации. Такой объем тяжело воспринимать, если он еще и разносторонний. Для примера, простой каталог программ. Информация может быть следующего характера: скриншоты, описание, характеристики, комментарии. Если разместить все это на одну страницу, то визуально будет все выглядеть, как каша. Читабельность информации упадет и пользователь решит поискать программу в другом месте. При помощи закладок с панелями можно исправить эту ситуацию. При этом, в действительности, вся информация будет на одной странице, а визуально, будет разбита на несколько категорий, заключенных в закладки.
Теперь реализация. Для начала впишем в раздел HEAD код:

Code

Теперь создадим структуру панелей с закладками. Структура банальная и простая:

Code

<div>
   <span class="bmcsel" id="bmc1" onclick="actbm(1)">Закладка 1</span>
   <span class="bmc" id="bmc2" onclick="actbm(2)">Закладка 2</span>
   <span class="bmc" id="bmc3" onclick="actbm(3)">Закладка 3</span>
   <div id="bm1" class="bm">
   Текст панели 1
   </div>
   <div id="bm2" class="bm">
   Текст панели 2
   </div>
   <div id="bm3" class="bm">
   Текст панели 3
   </div>
</div>

После структуры нужно прописать вызов подготавливающей функции:

Code

Почти все сделано. Осталось сделать стилевое оформление. Для этого в теле HEAD пропише стили:

Code

spayder	Сообщение оставлено 23.03.2011 в 14:26:46 \| Сообщение #1
Постоянный PokerChudo Сообщения: 2111 1537	Предлагаемый скрипт создаст на вашей страничке эффект панели с закладками. Этот прием будет для Вас актуален, если на одной страничке у Вас размещается слишком много информации. Такой объем тяжело воспринимать, если он еще и разносторонний. Для примера, простой каталог программ. Информация может быть следующего характера: скриншоты, описание, характеристики, комментарии. Если разместить все это на одну страницу, то визуально будет все выглядеть, как каша. Читабельность информации упадет и пользователь решит поискать программу в другом месте. При помощи закладок с панелями можно исправить эту ситуацию. При этом, в действительности, вся информация будет на одной странице, а визуально, будет разбита на несколько категорий, заключенных в закладки. Теперь реализация. Для начала впишем в раздел HEAD код: Code <script type="text/javascript"> setbm = function(){ var i = 2; while(document.getElementById('bm'+i)!=null){ document.getElementById('bm'+i).style.display='none'; i++; } } actbm = function(aid){ var i = 1; while(document.getElementById('bm'+i)!=null){ if(i!=aid){ document.getElementById('bm'+i).style.display='none'; document.getElementById('bmc'+i).className='bmc'; } else { document.getElementById('bm'+i).style.display='block'; document.getElementById('bmc'+i).className='bmcsel'; } i++; } } </script> Теперь создадим структуру панелей с закладками. Структура банальная и простая: Code <div> <span class="bmcsel" id="bmc1" onclick="actbm(1)">Закладка 1</span> <span class="bmc" id="bmc2" onclick="actbm(2)">Закладка 2</span> <span class="bmc" id="bmc3" onclick="actbm(3)">Закладка 3</span> <div id="bm1" class="bm"> Текст панели 1 </div> <div id="bm2" class="bm"> Текст панели 2 </div> <div id="bm3" class="bm"> Текст панели 3 </div> </div> После структуры нужно прописать вызов подготавливающей функции: Code <script type="text/javascript">setbm();</script> Почти все сделано. Осталось сделать стилевое оформление. Для этого в теле HEAD пропише стили: Code <style type="text/css"> .bmc{border:1px solid #cccccc;padding:1px 5px;cursor:hand;} .bmcsel{border:1px solid #cccccc;padding:1px 5px;background:#00dd00;} .bm{border:1px solid #cccccc;padding:2px 5px;width:300px;background:#dddddd;margin-top:3px;} #bm2{background:#00ff00;} #bm3{background:#00ffff;} </style> Подпись пользователя:
	Профиль Цитата Вверх

Скрипт создания закладок с панелями

Страница 1 из 1
1