Скрипт создания закладок с панелями
В случае, если запуск 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>
Это мой вариант. Вы создайте свой.
На этом все. Сохраняемся и проверяем. Учтите, на одной странице можно использовать один блок с закладками.
Удачи!
| Категория: | Скрипты |
| Просмотрено: | 2228 |
| Рейтинг: | 3.5/2 |
| Дата добавления: | 12.08.2009 08:50, Среда |
| Добавил: | Szen |
Дополнительно
Мини-форум
| № 0 | Среда, 12.08.2009 08:50 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт создания закладок с панелями". |
| Профиль |
| № 1 | Понедельник, 22.03.2010 20:00 |
den47 | Szen, а подскажи пожалуйста,как сделать при наведении,что-бы была рука(как при нажатии на ссылку) |
| Профиль |
| № 3 | Понедельник, 22.03.2010 21:41 |
| den47 | пробовал,не помогает,и ещё вопрос,я сделал на примере информера,(при наведение на ссылку показывает постер с описанием)так вот при переключение на вторую вкладку это хинт(с постером)не работает,работает только на первой,как решить эту проблему ? |
| Профиль |
Внимание
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
(SMS):
(WebMoney):
Kimblejcjqzz(40), denisbardas(15), stisurneybrit(49), faremiamume(46), NiteNearianep(40), Dik0n(24).
Желаем им счастья, здоровья, благополучия, любви и богатства!
С уважением, администрация сайта.
