Создание и продвижение сайтов, материалы веб-мастеру!
Способы заработка, свой бизнес в интернете!

Подписка на обновления сайта с помощью RSS

Подписка с помощью RSS
(читателей: 955)

Мой LiveJournal Мой Я.ру Мой FaceBook Мой Twitter

Читать в соц. сетях:

Способы заработка в интернетеОбновляемый сборник Способы заработка в интернете

Свой бизнес на файлообменникахУчебное пособие
Свой бизнес на файлах (пошагово)

Вход | Регистрация | Напомнить пароль

Коллекция плагинов для WordPressКоллекция плагинов для WordPress

Язык запросов поиска ЯндексаЯзык запросов поиска Яндекса

Что делать если украли деньги с WebMoneyЧто делать если украли деньги с WebMoney

Куда вложить деньги - инвестирование в ПАММ-счетаПассивный доход за счёт инвестирования Куда сегодня можно вложить деньги

Главная » Инструкции и методы » Приёмы web-дизайна

Инструкции и методы решения различных задач

Раздел "Инструкции и методы"

Основа данного раздела - это пошаговые описания решений определённых задач в сайтостроении (вёрстка, web-дизайн, программирование и прочее), примеры решения различных трудностей с помощью полезного софта, а также некоторые другие интересные материалы

Все инструкции и методы одним списком

Создаем динамические закладки на jQuery

Динамические закладки

Закладки являются важнейшим инструментом интернет пользователя. Сегодня мы попробуем реализовать динамические закладки при помощи jQuery. Пример этого элемента вы можете посмотреть, скачав файл-архив.

Основой для наших закладок будет служить тег li. Данная методика достаточно примитивна: при добавлении закладки, переменный счетчик генерирует для нее id и для id формируется соответствующее содержание.

HTML-код

Созданная нами HTML разметка закладки содержит только единственный элемент li – кнопку добавления закладки.


<ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
</ul>
<div id="tabcontent"></div>
jQuery

jQuery

Говоря о динамическом элементе, нужно понимать, что он создается на лету. То есть, нажал на кнопку “Добавить закладку” и она сразу же появляется, не нужно писать каких-то кодов и т.д., все происходит на “автомате”. В jQuery это выполняется при помощи функции addtab с привязанным к нему обработчиком событий "click".


$(function() {
var total_tabs = 0;

// Инициализируем первую закладку
total_tabs++;
addtab(total_tabs);

$("#addtab, #litab").click(function() {
total_tabs++;
$("#tabcontent p").hide();
addtab(total_tabs);
return false;
});

function addtab(count) {
var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
$("#tabul").append('<li id="t'+count+'" class="ntabs">Закладка №'+count+'&nbsp;&nbsp;'+closetab+'</li>');
$("#tabcontent").append('<p id="c'+count+'">Содержание закладки № '+count+'</p>');

$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");

$("#t"+count).bind("click", function() {
$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");
$("#tabcontent p").hide();
$("#c"+count).fadeIn('slow');
});

$("#close"+count).bind("click", function() {
// Активируем предыдущую закладку
$("#tabul li").removeClass("ctab");
$("#tabcontent p").hide();
$(this).parent().prev().addClass("ctab");
$("#c"+count).prev().fadeIn('slow');

$(this).parent().remove();
$("#c"+count).remove();
return false;
});
}
});

CSS-код

Добавляем к нашему элементу стили.


#tabul {
padding: 0;
margin: 0;
padding: 5px 0;
}
#tabul li {
display: inline;
-webkit-border-radius: .3em .3em 0 0;
-moz-border-radius: .3em .3em 0 0;
border-radius: .3em .3em 0 0;
cursor: pointer;
}
.ntabs {
background: #BDC7D5;
margin-right: 1px;
font-size: 11px;
font-weight: bold;
color: #333;
border: 1px solid #BDC7D5;
padding: 5px 3px 5px 8px;
}
.add {
padding: 5px 8px;
}
#addtab {
font-size: 16px;
text-decoration: none;
position: relative;
top: 2px;
color: #333;
}
#addtab:hover {
color: #999;
}
.ctab {
background: #E7EDF6;
position: relative;
top: 2px;
border-bottom-width: 0;
}
.close {
text-decoration: none;
color: #999;
font-weight: bold;
font-size: 14px;
padding: 0 4px;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
}
.close:hover {
background: #999;
color: #333;
}
#tabcontent {
border: 1px solid #BDC7D5;
background: #E7EDF6;
padding: 10px;
text-align: center;
font-weight: bold;
color: #666;
font-size: 24px;
}

Динамическая закладка готова, количество создаваемых закладок – неограничено. При желании, вы можете доработать данный элемент, добавить дополнительные кнопки или навигацию и т.д.

Готовая динамическая закладка

Документы по правам потребителей, уголовному праву, ипотеке, кредитам и другие образцы документов на сайте Adved.

ВложениеРазмер
demo_1095.zip1.52 кб

Если Вам понравился данный материал, Вы можете подписаться на получение новых публикаций сайта с помощью RSS-ленты или E-mail-рассылки:

Подписка на обновления сайта с помощью RSS

Введите свой e-mail:

RSS-подписчиков: 955 | E-mail-подписчиков: 691

Спасибо Вам за добавление данной страницы в социальные сервисы:

Ещё инструкции и методы...
Как найти неиспользуемые стили
Создаем динамические закладки на jQuery
Семантическая разметка в HTML5 с помощью ARIA Role
Преимущества облачного хостинга
Бесплатные WISIWYG редакторы
Активная фильтрация данных в PHP
@-правила в CSS
Меню "аккордеон"
Тени с помощью CSS3
Как поставить favicon.ico на сайт

Задать вопрос или оставить комментарий

Вы можете поделиться своим мнением по теме или задать возникшие вопросы ниже в комментариях. Спасибо!

Чтобы получить подробный ответ на ряд возникших вопросов или если требуется детальная помощь в решении какой-либо задачи, можно воспользоваться данной формой. Ответы на вопросы, заданные через указанную форму, публикуются в разделе "Вопросы пользователей".

Отправить комментарий
Содержание этого поля является приватным и не предназначено к показу.
КАПЧА
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
12 + 0 =
Решите эту простую математическую задачу и введите результат. То есть для 1+3, введите 4.

Copyright © 2007-2012 Николай Мурашкин | Хостинг сайта

Копирование, а также любое другое подобное использование материалов без ссылки на сайт NikMurashkin.RU строго запрещено!

тИЦ и Page Rank сайта