Страхотно HTML5 портфолио
В този урок ще направим страхотно портфолио, базирано на HTML5, jQuery и плъгина Quicksand. Потенциално едно демо портфолио може да бъде разширено значително без много усилия.
Първо, нека маркираме нов HTML5 документ. В секцията за заглавка активирайте стила на страницата. Библиотеката jQuery, плъгинът Quicksand и нашият файл script.js ще бъдат включени преди затварящия етикет body:
Заглавният елемент HTML5 съдържа нашия h1 хедър (който е оформен като лого). Елементът секция съдържа неподреден списък с елементи от портфолио (други списъци се добавят от jQuery код)/ Елементът nav, оформен като зелена лента, действа като филтър за съдържание.
Можете да поставите други произведения в списъка с елементи и да използвате други етикети.
Плъгинът Quicksand сравнява два неподредени списъка, намира еднакви li елементи в тях и анимира процеса на подреждане. Скриптът jQuery, обхванат в тази част от урока, преминава през елементите на портфолиото в списъка #stage и създава нови (скрити) неподредени списъци за всеки таг, който намери. След това тези списъци ще бъдат използвани от плъгина Quicksand.
След като страницата се зареди, стартираме цикъл, за да открием етикетите.
script.js - Част 1
Всеки таг се добавя към обекта itemsByTags като масив. Така itemsByTags['Web Design'] ще съдържа масив от всички елементи, които имат етикета 'Web Design'. Използваме този обект, за да създадем скрит неподреден списък на страницата за плъгина Quicksand.
Нека създадем помощни функции
script.js - Част 2
Тази функция приема името на групата и масив от li елементи като параметри. След това клонира тези елементи в нов ul списък и добавя връзка към зелената лента.
Сега преминаваме през всички групи и извикваме помощната функция, добавяме и обработката на събитието за кликване за елементите от менюто.
script.js - Част 3
Най-интересната част от CSS стила е зелената #filter лента. Той използва :before / :after псевдоелементи, за да създаде хубави ъгли отстрани на лентата. Тъй като те са абсолютно позиционирани, при промяна на размера на лентата те ще се показват там, където трябва.
Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/ Превод: Сергей Фастунов Урокът е създаден: 14 октомври 2011 г. Прегледан: 71695 Правила за препечатване
5 последни урока от рубриката "HTML и DHTML"
Life hack: най-полезната функция 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 нови сайта, където можете да изтеглите безплатни снимки, за да попълните вашите сайтове.