|
   |
| Модератор форума: Senator |
| Форум сайта Система uCoz Другие скрипты Скрипт создания закладок с панелями |
| Скрипт создания закладок с панелями |
 [Table]Предлагаемый скрипт создаст на вашей страничке эффект панели с закладками. Этот прием будет для Вас актуален, если на одной страничке у Вас размещается слишком много информации. Такой объем тяжело воспринимать, если он еще и разносторонний. Для примера, простой каталог программ. Информация может быть следующего характера: скриншоты, описание, характеристики, комментарии. Если разместить все это на одну страницу, то визуально будет все выглядеть, как каша. Читабельность информации упадет и пользователь решит поискать программу в другом месте. При помощи закладок с панелями можно исправить эту ситуацию. При этом, в действительности, вся информация будет на одной странице, а визуально, будет разбита на несколько категорий, заключенных в закладки.
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> [Table]Теперь создадим структуру панелей с закладками. Структура банальная и простая: [/Table]
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> [Table]После структуры нужно прописать вызов подготавливающей функции: [/Table]
Code <script type="text/javascript">setbm();</script> [Table]Почти все сделано. Осталось сделать стилевое оформление. Для этого в теле HEAD пропише стили: [/Table]
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> |
| |||
| |||