WebDesign.Doc - электронная библиотека веб-мастера: Выпуск 230
WEbDESiGN.doc // №230
Приветствую, дорогие друзья и коллеги!
читайте в этом выпуске:
Мастерская
Универсальный jQuery-скрипт для блоков с вкладками (табами)
Смотри и учись!
Лучшие видеокурсы по веб-дизайну (Wordpress, Joomla!, PHP, Flash)
→ рекомендую:Очисти компьютер от мусора! Тормозит компьютер? Оптимизируй Windows! Удали ненужные программы. Очисти реестр. Обнаружь и удали вирусы. Избавься от ошибок и постоянных сбоев. Ускорь загрузку и работу всех программ. Ускорь работу компьютера! Ваш компьютер будет работать как новый! Проверено! Подробнее...
Мастерская
Универсальный jQuery-скрипт для блоков с вкладками
Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге.
С тех пор прошло 2 года, я набрался определенного опыта в работе с jQuery, и вышеуказанный скрипт превратился в абсолютно новый скрипт, написанный мною полностью с нуля. Перед этим был еще один вариант данного скрипта, которым я пользовался, наверное, год. О нем я нигде не писал, да и сейчас уже нет смысла это делать, т.к. он потерял свою актуальность.
Почему я называю свой новый скрипт для jQuery-вкладок универсальным:
он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.
Что ж, хватит сухих слов, переходим к сути.
Код jQuery-крипта для переключаемых блоков с вкладками
Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами <head> и </head>):
Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во вторых, скорость серверов Гугла стабильна и быстра.
Вот такой у меня получился, на мой взгляд, миниатюрный и красивенький скрипт:
Для тех, кто еще не знает, как подключать этот скрипт - создать файл с расширением .js, вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.
В этом скрипте, кстати, еще реализован эффект плавного появления переключаемых блоков.
HTML-код, который нужно использовать для скрипта
Обратите внимание, что структура HTML-кода строго привязана к скрипту, поэтому, если вы пожелаете изменить названия используемых классов, не забывайте их поменять и в скрипте.
Обязательные CSS-стили для вышеуказанного HTML-кода
Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .visible во второй блок div.box, а также переместить класс .current во второй элемент в списке вкладок.
Примеры
Живой пример jQuery-вкладок вы можете наблюдать прямо на этом блоге в сайдбаре.
Отдельный пример, который можно скачать ниже. На этот раз представляю 2 варианта: с горизонтальными и с вертикальными вкладками.
Я не исключаю того, что можно создать аналогичный скрипт меньшего размера (можеть быть он и существует), но пока у меня получилось так, как получилось, и меня это только радует. Вдвойне приятно то, что я пришел к этому сам.
P.S. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я “изобрел колесо”, главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)
"Профессиональное создание Интернет-магазина под ключ"
Полный и качественный видеокурс по созданию интернет-магазина под ключ для любого уровня подготовленности.
68 уроков полностью раскроют все тонкости и нюансы профессионального создания интернет-магазинов.
"PHP+MySQL для начинающих"
Более 110 видеоуроков общей продолжительностью в 22 часа и 30 минут, которые позволят Вам создавать неповторимые динамические сайты с использованием языка PHP и баз данных MySQL!…
"Весь Арсенал Флешера на DVD"
Курс "Арсенал Флешера" предназначен для серьезных людей, кто действительно хочет: получить качественную информацию; создавать флеш-ролики с нуля, с наименьшими временными и финансовыми затратами и применить полученные знания на практике.
Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail:
webmastersoft@mail.ru
