Креирање контролера јачине звука помоћу јКуери УИ клизача

Ако сте ловац на фреебиес, највероватније сте преузели пуно ПСД корисничких интерфејса (УИ). Неки од њих су заиста запањујући и могли би да уштеде наше време прототиповима дизајна на којем смо радили.

У овом посту ћемо кодирати ПСД УИ и претворити га у нешто функционалније. Кодират ћемо сљедећи ПСД УИ клизач који ће се примјењивати као јКуери УИ Слидер тема.

Међутим, Молимо вас да обратите пажњу за које је овај туториал намијењен средњи нивои искуства. Рекавши то, још увек је релативно лако пратити, све док сте прилично упознати са ЦСС-ом и јКуери-јем.

У реду, хајде да почнемо.

Корак 1: јКуери УИ

Очигледно нам је потребна јКуери и јКуери УИ библиотека, и имамо две могућности да их искористимо. Прво, можемо да повежемо јКуери и јКуери УИ директно са следећих ЦДН: Гоогле Ајак АПИ ЦДН, Мицрософт ЦДН и јКуери ЦДН, има пуно предности коришћења хостованог ЦДН фајла када ставимо наш сајт уживо.

Али пошто ћемо радити само на њему, користићемо други уместо тога.

Ми ћемо преузети и прилагодити ЈКуери УИ библиотеку са званичне странице за преузимање. Будући да нам је потребан само Слидер плугин, ми ћемо изабрати само Слидер библиотеку заједно са њеним зависностима и оставити остале. На тај начин ће датотеке које користимо бити много тање и брже се учитати. Након тога, повежите све те библиотеке са ХТМЛ документом, по могућности на дну странице или пре затварања да буде тачна.

Корак 2: ХТМЛ ознака

Ознака за клизач је врло једноставна, омотали смо све потребне ознаке - тоолтип, клизач и волумен - унутар ХТМЛ5 сецтион таг. Уређај јКуери ће аутоматски генерисати остатак.

Корак 3: Инсталирајте УИ клизач

Исјечак испод ће инсталирати клизач на страницу, али се примењује само подразумевана конфигурација.

 $ (фунцтион () $ ("#слидер")) .слидер ();); 

Овдје ћемо мало побољшати клизач додавањем других конфигурација.

Прво, чувамо елемент клизача као променљиву.

 вар слидер = $ ('# слидер'), 

Затим постављамо минималну подразумевану вредност клизача 35, када се први пут учита.

 слидер.слидер (распон: "мин", вредност: 35,); 

У овом тренутку, још увек нећемо видети ништа на претраживачу, јер је јКуери УИ у основи само генерисање маркупа. Дакле, морамо да применимо неке стилове да видимо резултат визуелно на претраживачу.

Корак 4: Стилови

Пре него што наставимо, потребна су нам средства из изворне датотеке ПСД-а, као што су текстура позадине и икона.

Нећемо разговарати о томе како исећи у овом чланку само ћемо се фокусирати на код. Ако нисте сигурни како да исечете, прво пређите на следећи сцреенцаст.

• Претварање дизајна из ПСД-а у ХТМЛ - Неттутс+

У реду, почнимо са додавањем стилова.

Почећемо са позиционирањем клизача у центру прозора прегледача и прикачити позадину коју смо изрезали из ПСД-а на тело.

 боди бацкгроунд: урл ('… /имагес/бг.јпг') поновите горе лево;  сецтион видтх: 150пк; хеигхт: ауто; маргин: 100пк ауто 0; позиција: релативна;  

Затим ћемо применити стилове тоолтип, обим, дршка, клизач домет анд тхе клизач себе.

Овај дио ћемо радити по дио, почевши од ...

Клизач

Пошто нисмо дефинисали максималну вредност за сам клизач, јКуери УИ ће применити дефаулт; то је 100. Према томе, можемо се пријавити 100 (пк) за клизач видтх.

 #слидер бордер-видтх: 1пк; гранични стил: солид; бордер-цолор: # 333 # 333 # 777 # 333; радијус: 25пк; видтх: 100пк; позиција: апсолутна; хеигхт: 13пк; бацкгроунд-цолор: # 8е8д8д; бацкгроунд: урл ('… /имагес/бг-трацк.пнг') поновите горе лево; бок-схадов: инсет 0 1пк 5пк 0пк ргба (0, 0, 0, .5), 0 1пк 0 0пк ргба (250, 250, 250, .5); лево: 20пк;  

Тоолтип

Тоолтип ће бити постављен изнад клизача навођењем његовог апсолутно са -25пк За своје на врху.

 .тоолтип поситион: абсолуте; дисплеј блок; топ: -25пк; видтх: 35пк; хеигхт: 20пк; цолор: #ффф; тект-алигн: центар; фонт: 10пт Тахома, Ариал, санс-сериф; бордер-радиус: 3пк; бордер: 1пк солид # 333; бок-схадов: 1пк 1пк 2пк 0пк ргба (0, 0, 0, .3); бок-сизинг: гранични-бок; бацкгроунд: линеарно-градијент (топ, ргба (69,72,77,0.5) 0%, ргба (0,0,0,0,5) 100%);  

Волуме

Мало смо модификовали икону за јачину звука да бисмо испунили нашу идеју. Идеја је да ћемо створити ефекат постепено подизање траке за јачину звука у складу са вредношћу клизача. Сигуран сам да сте често виђали такав ефекат у корисничком интерфејсу медиа плејера.

 .волуме дисплаи: инлине-блоцк; видтх: 25пк; хеигхт: 25пк; десно: -5пк; бацкгроунд: урл ('… /имагес/волуме.пнг') но-репеат 0 -50пк; позиција: апсолутна; маргин-топ: -5пк;  

УИ Хандле

Стил ручке је прилично једноставан; она ће имати икону која изгледа као метални круг, исечена из ПСД-а, и причвршћена као позадина.

Такође ћемо променити режим курсора на поинтер, тако да ће корисник приметити да се овај елемент може повући.

 .уи-слидер-хандле положај: апсолутни; з-индекс: 2; видтх: 25пк; хеигхт: 25пк; курсор: показивач; бацкгроунд: урл ('… /имагес/хандле.пнг') но-репеат 50% 50%; фонт-веигхт: болд; боја: # 1Ц94Ц4; Оутлине: ноне; топ: -7пк; маргин-лефт: -12пк;  

Тхе Слидер Ранге

Опсег клизача ће имати благо белу боју градијента.

 .уи-слидер-ранге бацкгроунд: линеар-градиент (топ, #фффффф 0%, # еаеаеа 100%); позиција: апсолутна; граница: 0; топ: 0; висина: 100%; радијус: 25пк;  

Корак 5: Ефект

У овом кораку ћемо почети да радимо на специјалном ефекту клизача.

Тоолтип

У овом тренутку, тоолтип још нема садржаја, па ћемо га попунити са вредношћу клизача. Такође, хоризонтална позиција алата ће одговарати положају ручице.

Пре свега, чувамо елемент тоолтип-а као променљиву.

 вар тоолтип = $ ('. тоолтип'); 

Затим дефинишемо ефекат тоолтип-а који смо горе поменули у Слиде Евенту.

 слиде: фунцтион (евент, уи) вар валуе = слидер.слидер ('валуе'), тоолтип.цсс ('лефт', валуе) .тект (уи.валуе); 

Али, ми такође желимо да се тоолтип иницијално сакрије.

 тоолтип.хиде (); 

После тога, када хандле ће почети да клизи, биће приказано са ефектом појаве.

 старт: фунцтион (евент, уи) тоолтип.фадеИн ('брзо'); , 

И, када корисник престане да помера ручицу, тоолтип ће избледети и бити сакривен.

 стоп: фунцтион (евент, уи) тоолтип.фадеОут ('брзо'); , 

Волуме

Као што смо горе поменули у Стилес сецтион, планирамо икону гласноће да се промени у складу са позицијом ручке или да будемо тачни, вредност клизача. Дакле, ми ћемо применити следећу условну изјаву да створимо овај ефекат.

Али, прво, складиштимо елемент волумена као и вредност клизача као променљиву.

 волуме = $ ('. волуме'); 

Онда почињемо условну изјаву.

Када је вредност клизача нижа или једнака 5 икона за јачину звука уопште неће имати траке, што значи да је јачина звука веома ниска, али када се вредност клизача повећава, трака за јачину ће такође почети да се повећава.

 иф (вредност <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; 

Све их спојите

У реду, у случају да сте збуњени са свим горе наведеним стварима, немојте. Ево пречице. Ставите све следеће кодове у документ.

 $ (фунцтион () вар слидер = $ ('# слидер'), тоолтип = $ ('. тоолтип'); тоолтип.хиде (); слидер.слидер (распон: "мин", мин: 1, вредност: 35, старт: фунцтион (евент, уи) тоолтип.фадеИн ('брзо');, слајд: функција (евент, уи) вар валуе = слидер.слидер ('валуе'), волуме = $ ('. Волуме тоолтип.цсс ('лефт', валуе) .тект (уи.валуе), иф (валуе) <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); ); 

У реду, хајде сада да видимо резултат у претраживачу.

• Демо
• Довнлоад Соурце

Закључак

Данас смо успјешно креирали елегантнију јКуери УИ тему, али смо истовремено успјешно превели ПСД кориснички интерфејс у ​​функционални контролер јачине звука..

Надамо се да ће вас овај водич инспирирати и помоћи вам да схватите како претворити ПСД у кориснији производ.

На крају, ако имате било какво питање у вези овог туториала, слободно га додајте у одељак за коментаре испод.