Скрипт создания закладок с панелями
Скрипты
Скрипт создания закладок с панелямиВ случае, если запуск JavaScript выключен в браузере, покажет весь текст из панелей.
Предлагаемый скрипт создаст на вашей страничке эффект панели с закладками. Этот прием будет для Вас актуален, если на одной страничке у Вас размещается слишком много информации. Такой объем тяжело воспринимать, если он еще и разносторонний. Для примера, простой каталог программ. Информация может быть следующего характера: скриншоты, описание, характеристики, комментарии. Если разместить все это на одну траницу, то визуально будет все выглядеть, как каша. Читабельность информации упадет и пользователь решит поискать программу в другом месте. При помощи закладок с панелями можно исправить эту ситуацию. При этом, в действительности, вся информация будет на одной странице, а визуально, будет разбита на несколько категорий, заключенных в закладки.
Теперь реализация. Для начала впишем в раздел HEAD код скрипта:
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>
Теперь создадим структуру панелей с закладками. Структура банальная и простая:
<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>
Немного разберем эту структуру. В структуре использованы 2 связанных блока. Один состоит из тегов SPAN - сами закладки, и тегов DIV - панели закладок. У тегов SPAN обязательно должны быть прописаны id. Их значение равняется bmc[порядковый номер закладки]. Также должен быть определн класс. Это нужно для оформления. Класс у первой закладки должен быть "bmcsel", у остальных - "bmc". Для панелей указываем id равным bm[порядковый номер панели]. Вся порядковая нумерация должна начинаться с еденицы. Количество закладок всегда должно равняться количеству панелей.
После структуры нужно прописать вызов подготавливающей функции:
Почти все сделано. Осталось сделать стилевое оформление. Для этого в теле HEAD пропише стили:
.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>
Это мой вариант. Вы создайте свой.
На этом все. Сохраняемся и проверяем. Учтите, на одной странице можно использовать один блок с закладками.
Удачи!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Скрипт создания закладок с панелями
Скрипты
Скрипты, инструкции, справочники
| Категория: | Скрипты |
| Просмотрено: | 9293 |
| Рейтинг: | 2.8/5 |
| Дата добавления: | 2009-08-12 08:50, Среда |
| Добавил: | Szen |
Дополнительно к Скрипт создания закладок с панелями
Мини-форум
| № 0 | 2009-08-12 08:50 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт создания закладок с панелями". |
| Гость |
| № 1 | 2010-03-22 20:00 |
den47 | Szen, а подскажи пожалуйста,как сделать при наведении,что-бы была рука(как при нажатии на ссылку) |
| Денис |
| № 3 | 2010-03-22 21:41 |
| den47 | пробовал,не помогает,и ещё вопрос,я сделал на примере информера,(при наведение на ссылку показывает постер с описанием)так вот при переключение на вторую вкладку это хинт(с постером)не работает,работает только на первой,как решить эту проблему ? |
| Денис |
