Відмінне портфоліо на HTML5
У цьому уроці ми зробимо чудове портфоліо на основі HTML5, jQuery та плагіна Quicksand. Потенційно демонстраційне портфоліо може бути значно розширено без особливих зусиль.
Спершу зробимо розмітку нового документа HTML5. У розділі заголовка увімкнемо стиль сторінки. Бібліотека jQuery, плагін Quicksand і наш файл script.js будуть включені перед тегом, що закривається body :
Елемент HTML5 header містить наш заголовок h1 (який оформлений як логотип). Елемент section містить невпорядкований список пунктів портфоліо, інші списки додаються кодом jQuery)/ Елемент nav , оформлений як зелена смуга, діє як фільтр змісту.
Ви можете помістити в список пунктів інші роботи та використовувати інші мітки.
Плагін Quicksand порівнює два неупорядковані списки, знаходить однакові елементи li в них, і анімує процес розміщення. Скрипт jQuery, який розбирається в цій частині уроку, проходить циклом по пунктах портфоліо в списку #stage і створює нові (приховані) невпорядковані списки кожної знайденої мітки. Дані списки будуть використовуватися для роботи плагіна Quicksand.
Після завантаження сторінки ми запускаємо цикл для виявлення позначок.
script.js – Частина 1
Кожна мітка додається до об'єктів елементівByTags як масив. Значить, itemsByTags['Веб дизайн'] міститиме масив усіх пунктів, які мають мітку 'Веб дизайн'. Ми використовуємо цей об'єкт для створення прихованого невпорядкованого списку на сторінці Quicksand.
Створимо допоміжні функції
script.js – Part 2
Ця функція отримує ім'я групи та масив з пунктами li як параметри. Потім вона клонує дані пункти до нового списку ul і додає посилання зелену смужку.
Тепер ми проходимо циклом по всіх групах та викликаємо допоміжну функцію, також додаємо обробку події click для пунктів меню.
script.js – Частина 3
Найцікавіша частина стилів CSS - зелена смужка #filter. Для неї використовуються псевдо-елементи :before / :after , щоб створити привабливі куточки з боків смужки. Так як вони абсолютно позиціонуються, то при зміні розмірів смужки вони виведуть там, де треба.
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/ Переклав: Сергій Фастунов Урок створений: 14 Жовтня 2011 Переглядів: 71695 Правила передруку
5 останніх уроків рубрики "HTML та DHTML"
Лайфхак: найкорисніша функція var_export()
При написанні чи налагодження PHP скриптів ми часто користуємося функціями var_dump() і print_r() виведення попередніх даних масив і об'єктів. У цьому пості я хотів би розповісти вам про функцію var_export(), яка може перетворити масив у формат, придатний для PHP коду.
17 безкоштовних шаблонів адмінок
Безкоштовні шаблони панелей адміністрування.
30 сайтів для скачки безкоштовних шаблонів поштових листів
Створення шаблону для письма не така вже й проста справа. Пропонуємо вам вибірку з 30 сайтів, де можна безкоштовно скачати подібні шаблони на будь-який смак.
Як здійснити затримку під час натискання клавіші за допомогою jQuery?
Наприклад, у вас є поле пошуку, яке обробляється при кожному натисканні клавіші клавіатури. Якщо хтось захоче написати слово Windows, AJAX запит буде надіслано за такими фрагментами: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?
15нових сайтів для скачування безкоштовних фото
Добірка із 15 нових сайтів, де можна скачати безкоштовні фотографії для заповнення своїх сайтів.