Таби (або закладки) дозволяють економити місце, розміщуючи в одному блоці відразу кілька «наборів інформації». Виглядає це приблизно так:
При кліці на закладку відобразиться вибраний розділ. По-моєму, річ вкрай зручна і практична. Власне тому я вибрав цей метод для виведення проміжних результатів конкурсу «в гонитві за трафіком» праворуч в сайдбарі блога. Для кожного туру збережена закладка, де будуть розміщені відповідні дані. До речі, вже зараз можете спостерігати розташування гравців після 5-ти днів, кількість переходів спеціально не публікує щоб не було бажання накрутити показники. Скажу лише, що поки ніхто не вийшов за сотню, тому шанс є абсолютно у кожного!
Існує безліч різних реалізацій і скриптів для табів - ось, наприклад, англомовна добірка з 37 варіантів. Там є абсолютно все - стандартні закладки, з автоматичним перемиканням і різної анімацією.
Оскільки я використовую wordpress, то для початку вирішив пошукати плагіни, які б допомагали створювати таби (tabs). Знайшов кілька штук, на жаль, більшість з них працювати відмовилося. Ось є непогане рішення - postTabs. але даний плагін виводить таби в постах або сторінках вашого блогу, що чітко зазначено в документації по налаштуванню. Тому вирішив не мучитися з ним, а пошукати якийсь окремий скрипт. Проте, якщо вам потрібно розбити сторінку на кілька частин - рекомендую.
А тепер до справи:
Установка UI / Tabs jQuery
1. У блоці
блога потрібно прописати наступні рядки:Увага! Особисто я перед використанням скриптів рекомендував би зберегти їх до себе на хостинг і викликати вже звідти. Посилання вище залишив, щоб у вас була можливість завантажити файли.
2. Далі для виведення табів в потрібному місці шаблону повинен використовуватися код:
Для фону закладок використовується зображення tabs.png:
Ви можете його змінити як завгодно під стиль свого сайту, після чого виправити шлях до нього в класі:
Цікава фішка, але ставити не став, просто подумав що цей понт буде зайвим)
Безумовно, воно злегка «довантажити» сторінку, але з іншого боку бувають моменти, коли без цього скрипта не обійтися - вже дуже ідеально він підходить.
Я б не радив довантажувати скрипти по хттп з сайту jQuery. Краще зберегти тоді вже локально і довантажувати з ФС.
І ще я так і не зрозумів, навіщо тут jQuery..Ето адже просто робиться без всякого Ajax'a ..
Станіслав, зізнатися в цьому не дуже сильний. Просто перевів і застосував інструкцію на сайті розробників. З приводу завантаження на свій хостинг написав.
Що стосується «робиться просто», то я не сумніваюся. Тут справді можна підключити деякі специфічні можливості типу анімації при зміні табів.
Ну звичайно на таби не роблять ніякої анімації :) А то, що є зараз - робиться в принципі досить просто за допомогою css.
А мені ось, що цікаво: "А як пошуковики ставляться до таких табам?». Якщо наприклад замість простого тексту забити в табах посилання, то ПС буде їх ранжувати?
Станіслав Малкін, згоден :) Але я не наважився вникати в нетрі CSS після півгодини розглядів, тому звернувся до готового і 100% працює варіанту.
Pad, наскільки я розумію, все прекрасно бачиться пошуковими системами, тому що це все лише візуально так підключаються таби. Якщо ти подивишся на сторінку (код хтмл), то побачиш, що там використовується звичайні div`и. Без подгрузки скрипта тексти просто відобразилися б в стовпчик.
2 Pad, по ідеї, нормально, та й на багатьох іноземних блогах такі таби вже стоять і норм.
хочу собі таке :)
спасибі що відкопали і перевели.
Плагін непоганий, а от перший приклад - точно такий же скрипт, як описаний у мене.
А мені здається це не дуже зручним, тому я навпаки з деяких тем таке рішення прибираю. )
Мені здається, що далеко не всі користувачі можуть здогадатися, що по вкладці можна клікнути ... Та й навіть якщо я сам знаю про це, то далеко не завжди зроблю ... і не побачу того, що ж там ховалося.
Хоча в вашому випадку рішення підходить ідеально - той, хто треба клацне, а для інших заощадити місце. )
Володимир, якщо є багато місця, то звичайно можна обійтися без табів. А щодо «не здогадаються відвідувачі», так вони можуть і не зрозуміти, що потрібно кликати по пунктам меню :)
як раз на днях збірався сделать Собі Такі таби - ІМХО - з ними можна збільшити внутрішню перелінкованість сторінок, при цьом НЕ заважаючі Відвідувачам (роздутім сайдбарі з картою сайту например :))
може і хтось НЕ додумається клацнути на Такі таби, а я від розташую на третьому табі всякі там пузоміркі, и глядач НЕ БУДУТЬ мішаті и я зможу на них глянути в любий момент - по моєму Досить зручне
Tod, дуже дякую Вам за Цю інфу. Зроби и Собі на блог :-)
lilumi, Повністю з Вами згодна относительно корисності табів и полегшення перегляду для Користувачів :-)
у мене 2.6.1. навіть на стандартному шаблоні - не натискайте (не відбувається перехід) по табам, видно тільки перший ... з чим може бути пов'язано? версія wordpress - начебто немає, шаблон - начебто теж немає, правильність використання - за інструкцією, все відображається, теж начебто не в цьому справа ...
чи може хостер не запускати таке, раніше начебто не використовував яваскрипт ... що мені робити? зовсім руки опустив, все настрій собі зіпсував. якби я розбирався в програмуванні, ех. хто допоможе? крик душі. треба posttabs запустити ...
Ха, все добре, але php-код всередині цих контейнерів-то не працює! (((((
Mixa, можливо, він і не повинен працювати і потрібно пошукати інший метод реалізації. Цей мабуть тільки для текстів.
Використовувати жкваері имхо не варто при реалізації простих рішень. І таби до них відносяться.
Жкваері досить вагома бібліотека, а таби організувати можна за допомогою кількох рядків жаваскріпта.
У статейку є приклади. Все працює і відмінно.
І головне все дуже просто.
Lex Nevermind, спасибі, дуже корисна статейка.
Ось саме цей скрипт описаний в статті страшно підвантажує сайт: час завантаження сторінки після впровадження цих табів збільшується з 4 до 16 секунд. Не думаю що це є гуд
ось приблизно що у мене вийшло - moscowkadr.ru
але це на бічній панелі, а як зробити на головній сторінці.?
як в наприклад тут: wordpress.org/extend/plugins/intensedebate/
та й ще при тому що б все новий записи потрапляли на першу закладку, в другу, наприклад старі новини
Дмитро, потрібно правити шаблон блогу так щоб ця панель з табами відображалася в центрі.
Що стосується останніх і передостанніх новин, то тут також потрібно розбиратися з шаблоном і налаштовувати відповідним чином. Можу лише порекомендувати пост про останні пости блогу. інше відображення потрібно робити самостійно або замовити у кого-то.
Дякуємо! Дуже допомогла інформація. Забрав собі в сборочку фішок =)
Може я щось не так роблю? Що значить ". У блоці блогу потрібно прописати наступні рядки: ... ». Я прописав їх в файлі header.php всередині блоку. Напевно - неправильно, а як треба?
Павло, якщо все таби видно, то швидше за все скрипт не підключений. Наскільки я пам'ятаю правильно потрібно додавати в header.php тільки в верхню частину. До речі, якщо у вас wordpress блог, то простіше знайти потрібний для табів плагін.
І не вийшло (((мучуся вже тиждень перепробивал багато чого, тиби або вертикально або взагалі не з'являються (
Tod's Blog створений для тих, хто хоче навчитися заробляти в мережі і активно цікавиться темою монетизації сайтів.
Де я заробляю