Панель в стилі MacOS за допомогою jquery

22

Від автора: я не користуюся і не збираюся користуватися продуктами фірми apple, але не буду заперечувати, що дизайнери у них не б’ють байдики. Унікальна концепція дизайну і ефектів інтерфейсу операційної системи Mac OS нітрохи не поступається, а багато в чому навіть перевершує інші ОС. Одним з найбільш вражаючих елементів, я, як і багато, вважаю панель швидкого запуску. Правда, задоволення від цієї панелі я отримую не в Mac OS, а з тим же успіхом в Ubuntu.

І прийшла мені ідея: «а не реалізувати мені таку панель для веб-інтерфейсу сайту»?

Зараз реалізуємо!

УВАГА! Читайте не тільки текстовий зміст уроку, але і сам код і стилі. Вони старанно і дохідливо мною прокоментовані. Я прошу про це, так як урок націлений не на реалізацію самої панелі в стилі Mac OS, а на виховання здатності знаходити шляхи реалізації подібних, не складних і більш складних ідей.

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

Також завантажте вихідні коди собі на комп’ютер!

Приступимо до розробки

1. Зображення (фони і іконки)

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

Фон панелі я вирізав з дефолтових шпалер робочого столу Mac OS.

Площина панелі довелося самостійно ліпити в графічному редакторі (якщо ви можете собі дозволити, то — photoshop, якщо ж ні, то досить гідна альтернатива — GIMP).

Іконками інтернет завалений, як безкоштовними так і не дуже. Я вибрав хороший пак містить як png так і psd исходники — http://www.artbees.net/artbees-social-icons/

Відображення іконок робив ручками в графічному редакторі (багато часу ця процедура не забирає).

Панель в стилі MacOS за допомогою jquery

2. HTML верстка

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

приблизний план DOM:

Основний блок з фоном (1)

—>

блок з фоном у вигляді площини панелі (1)

—>

порожній блок для фіксованого відступу від верхньої межі батьківського блоку (1)

+

Блок, що містить елементи панелі (1)

—>

Блок, що містить один з елементів (7)

—>

посилання (1)

—>

іконка (1)

HTML-код

Мак панель

Панель в стилі MacOS за допомогою jquery Панель в стилі MacOS за допомогою jquery
Панель в стилі MacOS за допомогою jqueryПанель в стилі MacOS за допомогою jquery
Панель в стилі MacOS за допомогою jqueryПанель в стилі MacOS за допомогою jquery
Панель в стилі MacOS за допомогою jqueryПанель в стилі MacOS за допомогою jquery
Панель в стилі MacOS за допомогою jqueryПанель в стилі MacOS за допомогою jquery
Панель в стилі MacOS за допомогою jqueryПанель в стилі MacOS за допомогою jquery
Панель в стилі MacOS за допомогою jqueryПанель в стилі MacOS за допомогою jquery

3. Файл стилів CSS

CSS-стилі збирають віджет панелі з html розмітки і кожна їх деталь дуже істотна.

Уважно вивчаємо!

Зауважу один нюанс — більшість веб-розробників марять про часи, коли IE перестане існувати, так як він дуже підлий камінь спотикання кросбраузерності веб-додатків.

Але IE все ж є і з його існуванням доводиться рахуватися.

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

тепер сам CSS

*
{
margin:0px;
padding:0px;
}
/* вбиваємо рамку посилань при кліці в IE і FF */
a
{
outline: none;
}
/* вбиваємо кордону посилань в IE і FF */
a img
{
border:0px;
}
.all
{
width:100%;
}
/* блок для фону панелі */
.mac
{
margin-top:50px;
width:600px;
height:180px;
box-shadow:4px 4px 15px #a9a9a9;
-moz-box-shadow:8px 8px 20px #a9a9a9;
background:url(img/bg.jpg);
overflow:hidden; /* необхідно для приховування елементів, що виїжджають за межі діва */
position:relative /* необхідно для приховування елементів, що виїжджають за межі діва, так як у цих елементів абсолютне позиціонування */
}
/* блок для площині панелі */
.macp
{
width:600px;
height:180px;
background:url(img/macbg.png) no-repeat bottom;
}
/* блок для стабільного відступу панелі від верхнього краю батьківського діва */
.boofer
{
height:110px;
width:100%;
}
/* блок містить елементи панелі */
.icoblock
{
height:70px;
margin-left:25px;
}
/* блок містить один з елементів панелі */
.item
{
margin-left:25px;
float:left;
width:50px;
height:50px;
padding:0px;
text-align:left;
}
/* властивості іконок (визначається як дочірній елемент diva) */
.item img
{
position:absolute;
width:50px;
height:50px;
float:left;
}
/* властивість відображених іконок (для IE необхідно вказувати властивість filter: alpha(opacity=20);) для регулювання прозорості */
.ref
{
width:50px;
height:50px;
margin-top:40px;
opacity:0.2;
filter: alpha(opacity=20);
position:absolute;
}

Результат у нас такий: все виглядає як треба, залишилася анімація…

Панель в стилі MacOS за допомогою jquery

4. Заключний етап: анімація JavaScript

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

JavaScript

$(document).ready(function() { // чекаємо поки DOM завантажиться, чтобыт jquery знав ніж знущатися над
$(‘.icon’).hover(function(){ // виловлюємо подія — наведення миші на іконку
$(‘img’, this).stop().animate({‘width’:’80px’,’height’:’80px’,’margin-top’:’-30px’,’margin-right’:’-15px’,’margin-left’:’-15px’}, 200); // збільшуємо іконку і змінюємо відступи
$(this).next(‘img’).stop().animate({‘width’:’80px’,’height’:’80px’,’margin-top’:’50px’,’margin-left’:’-15′}, 200); // збільшуємо відображення і змінюємо відступи
},
function(){ // виловлюємо подія — догляд миші від іконки
$(‘img’, this).stop().animate({‘width’:’50px’,’height’:’50px’,’margin-top’:’0px’,’margin-right’:’0px’,’margin-left’:’0px’}, 200); // зменшуємо іконку і змінюємо відступи у вихідне положення
$(this).next(‘img’).stop().animate({‘width’:’50px’,’height’:’50px’,’margin-top’:’40px’,’margin-left’:’0px’}, 200); // зменшуємо відображення і змінюємо відступи у вихідне положення
}
);
$(‘.icon’).click(function(){ // виловлюємо подія — клік миші по іконці
$(‘img’, this).stop().animate({‘height’:’30px’,’margin-top’:’20px’}, 100, // пресуем іконку і відповідно міняємо відступи
function(){
$(this).animate({‘height’:’80px’,’margin-top’:’-30px’}, 200) // повертаємо іконці початкову висоту і відступи
}
);
$(this).next(‘img’).stop().animate({‘height’:’30px’}, 100, // пресуем відображення і відповідно міняємо відступи
function(){
$(this).animate({‘height’:’80px’}, 200) // повертаємо відображенню початкову висоту і відступи
}
);
});
}); //кінець ready

Висновок

Стиль Mac OS — тут має абсолютно посереднє значення. Ці ефекти без фону і площини і близько не нагадують панель макос. Це фундамент вашої фантазії!

Сподіваюся, урок виявився корисним. Ваші питання та побажання пишіть в коментарях!

Панель в стилі MacOS за допомогою jquery

E-mail: [email protected]