| Главная » Все для web-мастера » Скрипты Ucoz » Скрипты разное |
Делаем вкладки на jQuery (uCoz)
| 01.08.2012, 18:40 | |
|
Весь код анкеты я выкладывать не буду, а вот додуманные вчера вкладки или как их называют многие профессионалы, табы, я решил разместить на общее скачивание. Во-первых, данные табы можно смело ставить в системе uCoz, не подключая дополнительные библиотеки jQuery , кроме маленького основного файла скрипта. Во-вторых, самое главное на мой взгляд, на страницу сайта, можно становить несколько блоков с табами. Для пользователей uCoz, устанавливаем скрипт таба, после тега body Code <script src="http://www.center-dm.ru/data/jQuery/tabi/tab.js" type="text/javascript"></script> Для других cms, добавим библиотеку jQuery в начало нашей страницы и файл для таба: Code <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script src="http://www.center-dm.ru/data/jQuery/tabi/tab.js" type="text/javascript"></script> Теперь давайте рассмотрим основной код: - создаём основную ячейку div (id="tabs-1"), которая будет отвечать за номер табов, если вы захотите добавить несколько табов на страницу вашего сайта, то следует изменить данный ID на соответствующие цифры, а в выше предоставленном скрипте tab.js, в конце кода, добавить строку с соответствующим номером таба, например makeTabs('tabs-2'); - используем списки, в которые помещаем ссылку с названием того или иного таба и за место основной ссылки, прописываем якорь #first, #second, #third, #four при нажатии на которые, будет показано содержимое нужной ячейки. - после списков, создаём div ячейки с ID, названия которых соответствую якорям в списках id="first", id="second" , id="third", id="four" в данных ячейках будет расположена нужная вам информация Code <!-- Начало тегов табы --> <div id="tabs-1"> <div class="tabs"> <ul class="tabNavigation"> <li><a href="#first">Толстой Л. Н.</a></li> <li><a href="#second">Wilfred Peterson</a></li> <li><a href="#third">Т.Эдисон</a></li> <li><a href="#four">Альберт Швейцер</a></li> </ul> <div id="first" class="tab_content"> Доброе дело совершается с усилием, но когда усилие повторено несколько раз, то же дело становится привычкой. </div> <div id="second" class="tab_content"> Успех состоит в том, чтобы сфокусировать всю энергию, заключенную в вас, на той цели, которую вы так страстно желаете достичь </div> <div id="third" class="tab_content"> Достоинства человека должны определяться его делами, а не тем, что о нем говорят. </div> <div id="four" class="tab_content"> Счастье – это хорошее здоровье и плохая память </div> </div> </div> <!-- /Конец тегов табы --> А это уже в таблицу стилей css вставляем Code /* Табы ------------------------------------------*/ #tabs-1 {text-align:center; margin-top: 20px;} .tabNavigation {list-style:none; margin: 0; padding: 0;} .tabNavigation li { display: inline; margin: 0px 5px 0px 5px; text-shadow: 1px 1px 1px #fff; } .tabNavigation li a { color: #555; background: url('fon_tab_01.gif') repeat-x top #F1F0F0; border-top: 1px solid #cecece; border-right: 1px solid #cecece; border-left: 1px solid #cecece; padding: 6px 10px 6px 10px; } .tabNavigation li a.selected,ul .tabNavigation li a.selected:hover {color:#555; background:#fff; border-bottom: 1px solid #fff; } .tabNavigation li a:hover {color: #555; background: url('fon_tab_01.gif') repeat-x top #e9e9e9;} .tabNavigation li a:focus {outline: 0;} .tab_content { overflow: hidden; text-align:left; border-top: 1px solid #cecece; padding: 5px 0px 10px 0px; margin-top: 6px; } /*------------------------------------------*/ В моём варианте, в css стили я добавил 1px белое изображение, которое прижато к верхней части вкладок, плюс основные вкладки выравнены по центру и изменена цветовая гамма на более приемлемую для восприятия пользователями. Одним из плюсов данных вкладок являться тот факт, что пользователю видно, на какой вкладке он находиться и на какую вкладку он хочет перейти. DEMO | |
| Всего комментариев: 0 | |
