БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

Технология jQuery. Как создать блок текста с закладками

В этом уроке я покажу, как можно быстро сделать на вашей Web-странице динамический блок с закладками. Все, что вам будет нужно - это стандартный модуль jQuery и немного внимания при создании страницы. Ваш блок на странице может выглядеть примерно так, как на картинке, однако все зависит только от вашей фантазии.

zakladki

demo        skachat

  1.  В разделе BODY вашей страницы введите несколько блоков DIV, например такие:

    <div id="tab_btns">
     <div class="btn1 active" data-id="1">Закладка 1</div>
     <div class="btn2" data-id="2">Закладка 2</div>
     <div class="btn3" data-id="3">Закладка 3</div>
    </div>
    <div id="cont">
     <div class="area area_1">
     <h3 align="center"><span>Joomla</span></h3>
    Содержимое поля первой вкладки...
     </div>
     <div class="area area_2 hide">
     Поле <span>второй</span> вкладки
     </div>
     <div class="area area_3 hide">
     Поле <span>третьей</span> вкладки
     </div>
    </div>

    В коде блоки DIV-вы  с классом btn1, btn2, btn3 выводят закладки, DIV  с классом cont  определяет область вывода текста, DIV-вы  с классом area area_1, area area_2, area area_3 содержат выводимый текст соответствующей закладки. 

  2. В раздел HEAD вставьте следующие стили:

    #tab_btns {
     width: 521px;
     height: 40px; 
     }
     #tab_btns div {
     float: left; 
     width: 150px;
     padding: 10px 0px; 
     margin-right:5px;
     text-align: center;
     color: white; 
     font-weight: bold; 
     border: 1px solid #6DA1F3; 
     border-bottom: 0; 
     border-radius: 4px 4px 0 0;
     background: #7E9FE0; cursor: pointer; 
     }
     #tab_btns .active {
     color:#7e7e7e; 
     border-bottom: 0; 
     background: #eee; 
     }
     #cont {
     width: 514px;
     height: 300px;
     padding: 10px;
     border: 1px solid #6DA1F3;
     background: #eee; 
     border-radius: 0 0 4px 4px; }
     #cont .area {
     height: 300px; 
     padding-top: 5px; 
     text-align:justify;
     overflow: auto;
     } 
     #cont .area span {color:red;} 
     #cont .hide {display: none;}

    Тут вы можете изменять некоторые параметры по своему усмотрению в соответствии с дизайном своего сайта.

  3. В раздел HEAD вставьте тег подключения библиотеки jQuery:

    <script type="text/javascript" src="/js/jquery-1.8.3.js"></script>


    Внимание! Библиотека должна находиться в папке js, иначе укажите правильный к ней путь.

  4. Сохраните и проверьте работу скрипта.
Добавить комментарий
  • Комментарии не найдены