Створюємо меню закладок для сайту, з допомогою CSS і jQuery

13

Від автора: Однією з грандіозних проблем веб-дизайнерів є відшукання можливості помістити велику кількість інформації на сторінці, не втративши при цьому в юзабіліті. Розділення вмісту закладки – відмінний спосіб впоратися з цим питанням і останнім часом дуже широко використовується в блогах. Сьогодні ми маємо намір побудувати звичайний невеликий інформаційний блок в HTML, у вигляді меню із закладками, потім введемо його в дію, використовуючи трохи простого Javascript’а, і, нарешті, зробимо те ж саме за допомогою бібліотеки jQuery.

Перед тим, як ми приступимо до практичних кроків створення меню закладок, я Вам рекомендую переглянути демо-результат роботи.

Крок 1 у створенні меню закладок

В першу чергу найважливіше – нам потрібно щось, що вселяє повагу. Тому зробимо швидке подорож в Photoshop і вуаля! – у нас є хороша модель того, як має виглядати компонент з закладками. Зробити його привабливим досить просто за допомогою декількох додаткових градієнтів. Ви можете використовувати вихідний файл Photoshop PSD для цього зображення, якщо захочете розглянути його краще, проте воно досить просте і насправді ми можемо зібрати його з плоского JPG.

Створюємо меню закладок для сайту, з допомогою CSS і jQuery

Крок 2

Звичайно, перше, що слід зробити при збірці – приблизно уявити, як ви збираєтеся це зробити. Чим більше проектів ви розробили, тим легше. Дивлячись на цю фотографію, я б сказав, що краще всього:

Створити контейнер

, всередину якого все помістити. Таким чином, якщо потрібно розташувати в певному місці наш блок або скинути його sidebar, можна просто скопіювати все, що обгорнуте в

і де-небудь його вставити.

Потім у нас буде область заголовка, можливо, із тегом .

Потім нижче цього у нас буде другий тег

, який містить закладки і контент. Це темно-сірий блок в зображенні.

Далі, всередині нього ми використовуємо ненумерованний список

    , де кожен елемент є посиланням на закладку. Це дозволить нам використовувати частини

  • для позиціонування закладок, і їх елементи для надання стилів і установки ролловерів і режимів вкл/викл (on/off).

    Нижче ми створимо заключну область

    , яка буде містити контент кожної закладки. Нам знадобиться по одній такій області для кожної закладки, і ми буде показувати або приховувати їх залежно від того, на яку з закладок клацнули.

    Отже, підведемо підсумки, виходить щось на зразок цього:

    Heading

    • Tab
    • Tab
    • Tab
    Content for Tab 1
    Content for Tab 2
    Content for Tab 3

    Не турбуйтеся, якщо при погляді на зображення ви не починаєте тут же думати про його структуру. Іноді потрібно зробити щось методом проб і помилок. Що стосується мене, то я робив ці маленькі штучки з закладками кілька разів і знаю, що це хороший простий метод виконати їх.

    А ще дуже корисно продумати таку структуру до того, як у вас вийде безліч назв класів, id контенту, тому що пізніше стане складно розглянути за деревами ліс. Особливо після того, як ви додасте контент до всяким різним закладок.

    А тепер, коли у нас в мозку склалася картинка того, як побудувати свою структуру, давайте приймемось за неї!

    Крок 3

    Зараз, якщо ви слідували моїм підручниками на PSDTUTS, ви знаєте, що я люблю хороший градієнтний фон. Тому до структури з закладками давайте зробимо відмінний фон!

    Відкрийте Photoshop, створіть документ розміром 1000px x 1000px і намалюйте красивий (subtle) радіальний градієнт, такий, як показано нижче. Зверніть увагу, що я намалював його, починаючи з центральної точки зверху документа, і впевнився, що градієнт закінчиться до досягнення краю документа. Це означає, що я можу в HTML встановити колір фону більш темним, і якщо хтось збільшить вікно браузера, то перехід кольору буде плавним.

    Створюємо меню закладок для сайту, з допомогою CSS і jQuery

    Крок 4

    Отже, створіть для проекту нову директорію, потім створіть там всередині другу, звану images і збережіть всередині нього зображення як background.jpg. При збереженні використовуйте File > Save for Web and Devices і виберіть JPG, встановивши налаштування якості (quality setting) приблизно на 70. Вийде файл розміром 16kb, що дуже непогано. Бували часи, коли доводилося дійсно скупитися і економити, але зараз слід просто переконатися, що ви не дуже нерозумно марнотратні з розмірами своїх файлів.

    Тепер ми створює документ HTML і пишемо якийсь код:

    Tabbed Structure — Regular

    Це буде основою нашого HTML. Тепер ми створюємо документ style.css і напишемо наступне:

    body {
    background-image:url(images/background.jpg);
    background-repeat:no-repeat;
    background-position:top center;
    background-color:#657077;
    margin:40px;
    }

    Тут є парочка приміток:

    Можна написати той самий CSS, користуючись скороченим записом, і зменшити кількість використовуваних рядків, але для написання підручника так виходить набагато зрозуміліше і краще!

    У нас є фонове зображення (градієнт) і ми встановили його неповторним, так як нам потрібно, щоб воно з’явилося лише одного разу, воно відцентровано і, нарешті, колір фону (#657077) – встановлений більш темним (прим. перекл. – чим сам градієнт).

    Я додав margin (поле) розміром 40px. Це необхідно при подальшому розташуванні матеріалів таким чином, щоб все виглядало красиво.

    Тут можна бачити підсумковий документ HTML. Зауважте, що якщо ви змінюєте розмір вікна, фон залишається красивим, плавно мінливих, градуйованим. Wunderbar! (Чудово! нім.)

    Крок 5

    Далі ми додаємо свою структуру до сторінки, так що тепер можемо почати додавати до неї стилі.

    Tabbed Structure — Regular

    Browse Site Select a Tab

    • Archives
    • Topics
    • Pages
    Content for Tab 1
    Content for Tab 2
    Content for Tab 3

    Таким чином, як можна бачити, я в основному використовував ту ж структуру, яку згадував у Кроці 2. Просто я додав трохи id, class ‘ ів, і деякий реальний контент. Ось деякі міркування про те, що я зробив:

    В якості заголовка я помістив підказку «Select a Tab» (виберіть закладку) в елементі . Це дозволило користуватися елементом

    для спільного позиціонування і елементом для зміни стилю і позиціонування підказки.

    У контейнера

    встановлені атрибути id=»tabbed_box_1″ class=»tabbed_box». Це зроблено для того, щоб мати можливість користуватися цим кодом кілька разів на одній і тій же сторінці. В принципі, ми могли б використовувати лише id, щоб реалізувати можливість розташовувати контейнери в різних місцях. Однак, при цьому нам все ще потрібні класи, щоб призначати стилі. В іншому випадку, при використанні атрибута id для призначення стилів, нам доведеться визначати одні і ті ж стилі знову і знову для різних значень id.

    Я призначив id посиланнях і областях контенту, тому що для управління ними пізніше нам доведеться використовувати Javascript.

    Нарешті, я призначив елементу

      назва класу. Насправді, ми могли б призначити йому стилі і без використання класів, просто за допомогою styling .tabbed_area ul { }, але в цьому випадку він може перепутаться з нижченаведеними

        ‘ами, які ми помістимо в область контенту. Тому краще всього мати назву класу, на яке потім посилатися.

    ОК, без стилів все виглядає не дуже …. поки!

    Створюємо меню закладок для сайту, з допомогою CSS і jQuery

    Крок 6

    Тепер при визначенні стилів для елементів, я думаю, найкраще працювати від зовнішнього елемента всередину. Отже, ми почнемо з цього елемента –

    – який використовується, щоб красиво розташувати блок в центрі нашого документа за допомогою коду:

    #tabbed_box {
    margin: 0px auto 0px auto;
    width:300px;
    }

    Крок 7

    А тепер опрацюємо область заголовка. Ось так можна призначити йому стилі:

    .tabbed_box h4 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:23px;
    color:#ffffff;
    letter-spacing:-1px;
    margin-bottom:10px;
    }
    .tabbed_box h4 small {
    color:#e3e9ec;
    font-weight:normal;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    position:relative;
    top:-4px;
    left:6px;
    letter-spacing:0px;
    }

    Тут потрібно дещо зауважити:

    Замість того, щоб просто поставити стилі для елемента h4, я визначив клас .tabbed_box h4. Це важливо для великих HTML-документів, тому що де-небудь ще у вас може виявитися інший стиль елемента h4. Так що доведеться переконатися, що ви не викличете зараз або в майбутньому проблем з накладенням стилів.

    Ви помітите, що я також встановив нижнє поле (bottom margin) h4 на 10px. Це зроблено для того, щоб інтервали виглядали правильно. Важливо пам’ятати, що у багатьох елементів є властивості за замовчуванням. Наприклад, у h4 вже є нижнє поле, і воно більше, ніж я б хотів. Так що якщо ми не встановимо самі, елемент з’явиться з великим полем. Деякі користуються спеціальними таблицями стилів, які перевстановлюють всі ці властивості за замовчуванням, але я звик міняти їх окремо, коли мені це потрібно.

    Ви також побачите, що я використовував атрибут text-transform, щоб текст всередині small був із заголовних букв. Звичайно, можна було просто написати його великими літерами, але мені так більше подобається!

    Ви також помітите, що у визначеннях елемента small, встановлено position:relative, для того, щоб можна було регулювати розташування, зсунувши елемент вгору на 4px і вправо на 6px.

    Нарешті, при призначенні стилів елементу h4 я визначив йому негативний інтервал (letter spacing), і це призведе до того, що елемент small також успадкує цей негативний інтервал, що нам зовсім не потрібно. Так що тут я повинен знову встановити його в 0px. Це відбувається завдяки тому факту, що стилі розподіляються вниз – звідси і назва Cascading Style Sheets (каскадні таблиці стилів). Частенько ви будете помічати на своїй сторінці, що виглядає дивно, і це буде відбуватися тому, що елемент успадкував якийсь стиль, про який ви вже повністю забули. Вперше зіткнувшись з цим, я цілу вічність глазел на малесенький фрагмент, намагаючись зрозуміти, чому він виглядає таким сбившимся в купку, поки не згадав!

    Крок 8

    Далі ми визначимо трошки стилів своєму внутрішньому

    за допомогою цього коду:

    .tabbed_area {
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
    }

    Він містить трохи визначень і має внутрішні елементи з проміжками щодо сторін. Нижче на зображенні можна бачити, чим ми зараз зайняті.

    Рухаючись від зовнішніх кордонів, ми надали своєму елементу певну форму, і тепер набагато легше побачити те, як він буде виглядати остаточно. Часто у вас також будуть обмеження, що виникають із-за зовнішніх кордонів, наприклад, блок доведеться підігнати під колонку певної ширини. Нарешті, це просто гарна ідея – просуватися від зовнішніх меж, тому що в цьому випадку стає явним будь спадкування стилів. Наприклад, якщо піти іншим шляхом, і спочатку реалізувати внутрішні елементи, тоді пізніше задані стилі можуть вплинути на внутрішні елементи і це призведе до необхідності повертатися і все переробляти.

    Створюємо меню закладок для сайту, з допомогою CSS і jQuery

    Крок 9

    Тепер переходимо до хорошого — закладках! Якщо додати цей фрагмент CSS, ми досягнемо успіху в тому, щоб зробити їх вже більше схожими на закладки:

    ul.tabs {
    margin:0px; padding:0px;
    }
    ul.tabs li {
    list-style:none;
    display:inline;
    }

    Цей код каже, що елемент

      з класом ‘tabs’ не повинен мати полів і відступів. Ще він говорить про те, що всі елементи

    • усередині не повинні мати маркерів. Нарешті, ми змінюємо display з ‘block’ за замовчуванням ‘inline’. Дозвольте мені пояснити останнє більш детально.

      В цілому у елементів на сторінці є три поширених значення для ‘display’. Це — block, inline, або none.

      Встановлення елементів на none зробить його невидимим. Ми використовуємо цю обставину пізніше.

      Встановлення елементів на inline змусить його зміщуватися відносно інших елементів так, як це відбувається для текстів. Так що в нашому випадку, замість появи одного під іншим, елементи

    • будуть зміщуватися по горизонталі.

      Встановлення елементів на block робить з нього прямокутну область, яка, як правило, з’являється під останнім елементом.

      Це, звичайно, спрощене пояснення

    Крок 10

    Звичайно, наші «закладки» поки виглядають досить паршиво, так що давайте дамо їм стилів. Ми користувалися елементом

  • , щоб їх позиціонувати, а для прив’язки стилів використовуємо елемент , як тут:

    ul.tabs li a {
    background-color:#464c54;
    color:#ffebb5;
    padding:8px 14px 8px 14px;
    text-decoration:none;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    border:1px solid #464c54;
    }
    ul.tabs li a:hover {
    background-color:#2f343a;
    border-color:#2f343a;
    }
    ul.tabs li a.active {
    background-color:#ffffff;
    color:#282e32;
    border:1px solid #464c54;
    border-bottom: 1px solid #ffffff;
    }

    Ось що ми зробили тут:

    Призначили стилі тегу так, що він тепер має правильний фон і колір тексту, а також встановлення шрифту.

    Створили другий стиль для a:hover і затемнили колір фону і рамку. Зверніть увагу, що нам не потрібно визначати всі інші установки , тому що вони успадковуються. Ми лише повинні встановити ті, які повинні бути змінені, коли користувач проводить мишею над закладкою.

    І нарешті, у нас є третій стиль на той випадок, коли має class=»active». Іншими словами, для вибраної закладки. Тут ми знову встановлюємо колір фону білий і міняємо колір тексту. Слід звернути увагу на те, що ми також міняємо нижню межу рамки на білий колір. Так що закладка буде виглядати так, як ніби вона приєднана до області вмісту (коли ми додамо пізніше!)

    Створюємо меню закладок для сайту, з допомогою CSS і jQuery

    Крок 11

    Щоб область контенту запрацювала, нам потрібно зробити дві речі. Перша – ми повинні зробити так, щоб дві інші майданчики зникали, а друга – щоб до них були застосовані стилі і вони виглядали належним чином.

    .content {
    background-color:#ffffff;
    padding:10px;
    border:1px solid #464c54;
    }
    #content_2, #content_3 { display:none; }

    Як ви можете бачити, перша частина CSS говорить браузеру, що всі елементи class=»content» повинні бути білими з відступом і рамкою (того ж кольору, що і закладки). Друга частина говорить, що елементи з id=»content_2″ id=»content_3″ повинні мати display:none, або іншими словами, повинні бути невидимі.

    Пізніше, коли додасться Javascript, ми зможемо використовувати скрипт, перемикаючий display:none і display:block, щоб вони з’являлись і зникали.

    Отже, ось як виглядають наші закладки, а також можна подивитися HTML-версію того, на якому етапі ми знаходимося. Як бачите, зараз вони виглядають близькими до завершення, але нам потрібно закріпити прогалини і додати трохи реального вмісту.

    Створюємо меню закладок для сайту, з допомогою CSS і jQuery

    Крок 12

    Закріплення прогалин у дійсності досить проста справа, що складається в додаванні полів до елемента

      як тут:

      ul.tabs {
      margin:0px; padding:0px;
      margin-top:5px;
      margin-bottom:6px;
      }

      Якщо бути виключно чесним, я не впевнений, чому виникла проблема з пробілами. Іноді HTML мене спантеличує, але я просто змінюю установки до тих пір, поки ситуація не виправляється. Іноді по мірі просування я з’ясовую причину, іноді ні. Думаю, те, про що я зараз кажу, означає, що, якщо ви раптом дійсно збираєтеся сміливо полізти в нудні подробиці специфікацій W3 навмання, то рано чи пізно натрапите на якісь проблеми, які не зможете пояснити. Не дозволяйте їм збити вас з пантелику, просто переробляйте до тих пір, поки не знайдете виправлення або метод вирішення проблеми.

      Крок 13

      Зараз додамо в область контенту деякий вміст. Досі я цього уникав, бо хотів, щоб наш HTML виглядав простим. Ось дещо:

      Browse Site Select a Tab

      • Topics
      • Archives
      • Pages
      • HTML Techniques 4 Posts
      • CSS Styling 32 Posts
      • Flash Tutorials 2 Posts
      • Web Різне 19 Posts
      • Site News 6 Posts
      • Web Development 8 Posts
      • December 2008 6 Posts
      • November 2008 4 Posts
      • October 2008 22 Posts
      • September 2008 12 Posts
      • August 2008 3 Posts
      • July 2008 1 Posts
      • Home
      • About
      • Contribute
      • Contact

      Отже, тут я просто додав групу невпорядкованих списків у три області для контенту. До речі, я робив цю річ для використання в блозі WordPress. Але в дійсності ви можете користуватися закладками для чого завгодно. Нова домашня сторінка FlashDen, над якою я працював кілька днів тому, використовує області з закладками для показу різних видів нещодавно доданих файлів.

      Тепер ми додамо стилів, щоб вони виглядали трішки красивіше:

      .content ul {
      margin:0px;
      padding:0px 20px 0px 20px;
      }
      .content ul li {
      list-style:none;
      border-bottom:1px solid #d6dde0;
      padding-top:15px;
      padding-bottom:15px;
      font-size:13px;
      }
      .content ul li a {
      text-decoration:none;
      color:#3e4346;
      }
      .content ul li a small {
      color:#8b959c;
      font-size:9px;
      text-transform:uppercase;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      position:relative;
      left:4px;
      top:0px;
      }

      І знову визначаємо стилі вищевказаним списками. На цей раз я, замість того, щоб встановити елементу

        ім’я класу, просто додав стилі всім елементам

          усередині елементів з класом class=»content». Це означає, що мені не доведеться писати багато імен класів в вашому HTML, що робить його чіткішим і чистіше.

          Ось ще дещо, що заслуговує на увагу:

          Знову ми прибрали маркери (bullet points) у елементів

        • за допомогою list-style:none.

          На цей раз ми визначаємо стилі елементів списку, а не елементів . Це важливо, тому що у нас може бути пункт меню, який не є посиланням, і, таким чином, він би чудово підходив.

          Ще раз я використав обгорнутий всередині , щоб зробити лічильник постів. Я використовував text-transform, щоб зробити його складаються із заголовних букв, і деякий відносний зсув, щоб трохи посунути його ліворуч.

        • Крок 14

          І ось як тепер виглядає наша сторінка:

          Створюємо меню закладок для сайту, з допомогою CSS і jQuery

          У загальному і цілому він дуже хороший, за винятком того, що у нас є дуже багато рамок. Але все в порядку, ми можемо все виправити чарівним псевдоселектором під назвою ‘last-child’ як тут:

          .content ul li:last-child {
          border-bottom:none;
          }

          Цей стиль просто застосовується до останнього елемента свого власного типу — тобто до останнього елемента

        • . Тут я мушу зазначити, що той спосіб працює не у всіх браузерах. Особливо його не любить Internet Explorer 6. Але це нормально, тому що життя не закінчується, якщо раптом там виявилася рамка, і це моє ноу-хау покарати кожного, у кого досі немає браузера, навіть віддалено нагадує сучасний:)

          Крок 15

          Тепер ще один крок до завершення нашого HTML, і стосується він якихось гарних фонових зображень для наших елементів. Як ви пам’ятаєте, деякі елементи в моєму початковому файлі PSD мали ледь помітні градієнти. Так що тепер саме час їх додати. Є три частини градієнта: а) на активній закладці; б) на неактивних закладках і, в) на нижній рамці області вмісту. Ось три зображення, які нам знадобляться:

          Створюємо меню закладок для сайту, з допомогою CSS і jQuery

          Їх трохи важко побачити, і по суті кожна з них — маленький фрагмент градієнта, який ми встановимо як повторювані фонове зображення. Ось крупним планом одна з закладок. Зверніть увагу, я додав навколо неї тонку рамку, так що стало видно чіткіше. І зауважте, зверху є біла лінія в 1px. Вона зробить зовнішній вигляд закладки дійсно виразним.

          Створюємо меню закладок для сайту, з допомогою CSS і jQuery

          Отже, щоб додати фонові зображення, нам потрібно зробити невеликі установки в коді CSS, як тут:

          ul.tabs li a {
          background-image:url(images/tab_off.jpg);
          background-repeat:repeat-x;
          background-position:bottom;
          }
          ul.tabs li a.active {
          background-image:url(images/tab_on.jpg);
          background-repeat:repeat-x;
          background-position:top;
          }
          .content {
          background-image:url(images/content_bottom.jpg);
          background-repeat:repeat-x;
          background-position:bottom;
          }

          Зауважте, що насправді я вставив ці додаткові частини коду разом з іншими визначеннями класу, але для економії місця тут наводжу тільки доданий фрагмент. Як можна бачити у всіх трьох випадках, ми повторюємо фонове зображення тільки по осі х. У двох випадках (закладки off та область вмісту ми робимо це вздовж нижньої лінії, а для закладки on – вздовж верхньої.

          Стилі закінчені!

          І на цьому ми офіційно закінчили частина HTML/CSS цього підручника. Закінчену сторінку зі стилями можна бачити тут.

          Створюємо меню закладок для сайту, з допомогою CSS і jQuery

          Додаємо нескладний скрипт

          Наступне, що ми повинні зробити – це додати трохи Javascript, щоб наші закладки дійсно щось робили. Спочатку ми збираємося зробити це вручну, а потім я покажу вам, як для виконання того ж самого використовувати бібліотеки Javascript. Тут я мушу зазначити, що я не знавець JS, і сподіваюся привернути сюди справжніх майстрів з програмування для написання підручника, так що якщо помітите, що я роблю щось, що викликає ваше сумнів, не соромтеся залишити коментар, а я виправлю підручник і зроблю його ще трохи краще!

          Отже, спочатку давайте нагадаємо, що ми повинні робити, коли хтось натискає на закладку. Нам потрібно вимкнути поточну закладку, включити нову, заховати поточну область вмісту і показати нову.

          Для цього у нас могло б бути щось заумне, що визначає, яка з закладок зараз включена і вимикає її, але простіше вимкнути їх, а потім включити ту, яка нам потрібна. Точно так само для областей вмісту ми можемо заховати всі три, а потім показати потрібну. Так ми заощадимо на необхідності визначати поточне положення справ.

          Пошук елементів за допомогою DOM

          Елементи, з якими ми працюємо, виглядають таким чином:

          Тому в Javascript ми можемо шукати елемент, просто використовуючи його id і метод document.getElementById(). Таким чином, document.getElementById(‘content_1’) дасть нам першу область вмісту. Далі ми можемо встановити її стиль відображення на none, використавши цей рядок коду:

          document.getElementById(‘content_1’).style.display = ‘none’;

          Щоб змінити подібним чином клас, ми використовуємо:

          document.getElementById(‘tab_1’).className = ‘active’;

          Так що дійсно простий підхід до вирішення проблеми буде виглядати ось так:

          function tabSwitch(new_tab, new_content) {
          document.getElementById(‘content_1’).style.display = ‘none’;
          document.getElementById(‘content_2’).style.display = ‘none’;
          document.getElementById(‘content_3’).style.display = ‘none’;
          document.getElementById(new_content).style.display = ‘block’;
          document.getElementById(‘tab_1’).className = «;
          document.getElementById(‘tab_2’).className = «;
          document.getElementById(‘tab_3’).className = «;
          document.getElementById(new_tab).className = ‘active’;
          }

          Цей код ми помістимо в файл і давайте назвемо його functions.js. Далі ми можемо викликати цей скрипт, помінявши посилання в закладки:

          • Topics
          • Archives
          • Pages

          Можете бути впевнені, це приклад суперпростого javascript’а. І він працює!

          Більш складний скрипт

          В даний момент, у нашого скрипта є помітні проблеми. І не остання з них – те, що якщо ви додаєте ще одну закладку, доводиться змінювати функцію. А якщо у вас на сторінці є більше одного набору закладок, то знадобиться дві функції! Так що давайте їх трохи змінимо:

          function tabSwitch_2(active, number, tab_prefix, content_prefix) {
          for (var i=1; i < number+1; i++) {
          document.getElementById(content_prefix+i).style.display = ‘none’;
          document.getElementById(tab_prefix+i).className = «;
          }
          document.getElementById(content_prefix+active).style.display = ‘block’;
          document.getElementById(tab_prefix+active).className = ‘active’;
          }

          Друга версія функції перемикання закладок приймає на пару параметрів більше, але вона більш ефективна. Вона припускає, що у нас є набір закладок і набір областей вмісту, і в кожного з них є id, який представляє собою префікс для послідовності зростаючих чисел. Тобто tab_1, tab_2 … і content_1, content_2 …

          Перший параметр, який приймає наша функція, ‘active’ – це номер закладки/вмісту, яку потрібно додати. Другий параметр, ‘number’ – кількість використовуваних закладок. Третій і четвертий параметри – префікси, що використовуються в id наших елементів.

          Всередині функції є цикл з параметром, який повторюється від 1 до числа закладок і всі їх вимикає, а потім в кінці знову включає ті дві, які нам потрібні. Іншими словами, це той же самий сценарій, що і раніше, але ми його зробили трішки більш гнучким.

          Таким чином, у нашому прикладі, щоб викликати функцію, ми будемо використовувати ось цей код:

          • Topics
          • Archives
          • Pages

          Це означає, що пізніше, якщо у нас з’явиться другий набір закладок, ми зможемо дати ними інші префікси id і використовувати знову і знову одну і ту ж функцію.

          Дивіться другий приклад javascript.

          Використовуємо jQuery

          Останнім часом з’являлося безліч бібліотек Javascript, і насправді існує (принаймні) два, які особливо підходять для реалізації ефекту закладок: MooTabs і DomTab. Я не користувався ні тієї, ні іншої, але при поверхневому погляді вони виглядають цілком готовими до використання.

          Однак, так як я багато чув про бібліотеку jQuery, я вирішив спробувати те ж саме перемикання закладок, використовуючи jQuery. Відчуваю, що моє рішення вимагає зусиль, але все ж було б цікаво переглянути, що вийде.

          Отже, по-перше, відвідайте сайт jQuery і скачайте останню версію їх бібліотеки скриптів.

          Створюємо меню закладок для сайту, з допомогою CSS і jQuery

          Як прикрутити jQuery

          jQuery надає собою набір функцій, які дозволяють вибирати безліч речей. Наприклад, якщо ви хотіли б відібрати кожен елемент на сторінці, який є посиланням (тобто елементи ), а потім змусити їх зникнути, ви помістили б в область ось це:

          // When the document loads do everything inside here …
          $(document).ready(function(){
          $(«a»).slideUp();
          });

          Перший рядок додає бібліотеку скрипта jQuery. Основна область скрипта знаходиться всередині частини коду, яка виглядає так: $(document).ready(function(){}); Вона по суті говорить браузеру виконувати все, що знаходиться всередині, коли він звертається до сторінки. У нашому випадку, ми виконуємо команду:

          $(«a»).slideUp();

          Ця команда вимагає знайти все, що є елементом і виконати над ним slideUp(). Або іншими словами: знайти всі посилання і змусити їх зникнути з ефектом ковзання. Спробуйте додати цей скрипт на сторінці і завантажити її, і ви побачите, що всі ваші посилання зникли. Дуже акуратно, так?

          Так чи інакше, для вибору чогось існує безліч шляхів, і прочитати про них можна в API і документації. Можете знаходити кожен елемент з певним класом, визначеним id тощо. Коли-небудь я напишу тут належне введення в підручник jQuery, але в даний час достатньо цього крихітного введення – крім годинникової практики в jQuery, я думаю, з мого боку буде щось на зразок пародії писати для цього введення!

          Управління за допомогою селекторів

          Отже, після невеликого експерименту я прийшов до думки використовувати jQuery, щоб змусити свої закладки зникати і з’являтися. Щоб це зробити, я, по-перше, змінив свої посилання так, щоб у них не було ніякого javascript’а, але був атрибут title і додатковий клас class=»tab». Зверніть увагу, що можна також призначити елементу два класу, зробивши наступне: class=»tab active».

          • Topics
          • Archives
          • Pages

          Тепер, використовуючи ці два елемента, по суті я можу отримати всі посилання з класом ‘tab’ і також я зможу знайти будь-який елемент, чий id дорівнює атрибута title посилання, яку тільки що натиснули. Ось скрипт (поміщений в ), який ілюструє вищевикладене:

          // Коли документ завантажується, все відбувається тут всередині …
          $(document).ready(function(){
          // Коли на посилання клацнули
          $(«a.tab»).click(function () {
          // виключити всі закладки
          $(«.active»).removeClass(«active»);
          // включити цю закладку
          $(this).addClass(«active»);
          // згорнути всі елементи з класом ‘content’
          $(«.content»).slideUp();
          // тепер визначити значення атрибуту ‘title’ і знайти елемент з цим id. Потім розгорнути його.
          var content_show = $(this).attr(«title»);
          $(«#»+content_show).slideDown();
          });
          });

          Для полегшення розуміння я додав коментарі. В основному, коли клацають посилання з класом ‘tab’, ми все робимо в межах цієї функції.

          А щоб побачити останній приклад, який працює з jQuery, клацніть тут!

          Вітаємо, ми закінчили створення меню закладок для сайту, засобами HTML, CSS і jQuery сподіваюся вам сподобалося!

          Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

          E-mail: [email protected]

          Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

          P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.