Създаване на регулатор на силата на звука с jQuery UI Slider
Ако сте ловец на безплатни, вероятно сте изтеглили много PSD потребителски интерфейси (UI). Някои от тях са наистина невероятни и биха могли да спестят времето ни чрез прототипиране на дизайна, върху който работихме.
В този пост ще кодираме PSD UI и ще го превърнем в нещо по-функционално. Ще кодираме следния PSD UI Slider, който ще се използва като темата за jQuery UI Slider.
въпреки това, Моля записвайте си за което е предназначен този урок междинни нива опит. След като казах, че все още е сравнително лесно да се следват, стига да сте доста запознати с CSS и jQuery.
Добре, сега да започнем.
Стъпка 1: jQuery UI
Ние очевидно се нуждаем от jQuery и jQuery UI Library, и имаме две възможности да ги използваме. Първо, можем да свържем jQuery и jQuery UI директно от следните CDN: Google Ajax API CDN, Microsoft CDN и jQuery CDN, има много предимства от използването на хоствания CDN файл, когато поставим нашия сайт на живо онлайн.
Но тъй като ще работим само за него офлайн, ще използваме втори вместо това.
Ще изтеглим и персонализираме библиотеката на jQuery UI от официалната страница за изтегляне. Тъй като имаме нужда само от плъзгача на плъзгача, ще изберем само библиотеката с плъзгача заедно с нейните зависимости и ще оставим другите. По този начин файловете, които използваме, ще бъдат много по-тънки и могат да се зареждат по-бързо. След това свържете всички тези библиотеки с HTML документа, за предпочитане в долната част на страницата или преди затварянето
, за да бъдем точни.
Стъпка 2: HTML маркиране
Маркировката за плъзгача е много проста, опаковахме цялата необходима маркировка - подсказка, плъзгач и обем - в HTML5 раздел маркер. След това потребителският интерфейс jQuery автоматично ще генерира останалото.
Стъпка 3: Инсталирайте Плъзгача UI
Фрагментът по-долу ще инсталира плъзгача на страницата, но се прилага само конфигурацията по подразбиране.
$ (функция () $ ("#slider") .slider (););
Така че тук ще увеличим слайдера малко, като добавим други конфигурации.
Първо, съхраняваме плъзгача като променлива.
var slider = $ ('# slider'),
След това задаваме минималната стойност по подразбиране на плъзгача 35, когато се зарежда първо.
slider.slider (обхват: "min", стойност: 35,);
В този момент все още няма да видим нищо в браузъра, защото потребителският интерфейс на jQuery е основно само генериране на маркиране. Затова трябва да приложим някои стилове, за да започнем да виждаме резултата визуално в браузъра.
Стъпка 4: Стиловете
Преди да пристъпите, ние се нуждаем от активи от изходния файл на PSD, като например текстурата на фона и иконата.
Няма да говорим за това как да се режат в тази статия ще се съсредоточим върху кода. Ако не сте сигурни как да срязвате, първо вижте следващия скрийнкаст, преди да продължите.
Конвертиране на дизайн от PSD в HTML - Nettuts+
Добре, сега нека започнем да добавяме стиловете.
Ще започнем с позициониране на плъзгача в центъра на прозореца на браузъра и ще прикачим фона, който бяхме изрязали от PSD до тяло.
body background: url ('… /images/bg.jpg') повторете горния ляв ъгъл; секция ширина: 150px; височина: автоматично; марж: 100px auto 0; позиция: относителна;
След това ще приложим стиловете подсказка, обемът, дръжката, плъзгача диапазон и плъзгач себе си.
Ще направим тази част по част, започвайки от…
Slider
Тъй като не сме дефинирали максималната стойност за самия плъзгач, потребителският интерфейс jQuery ще приложи по подразбиране; това е 100. Ето защо можем да приложим 100 (px) за плъзгача широчина.
Променихме малко иконата за силата на звука, за да изпълним идеята си. Идеята е да създадем ефект повдигайте постепенно лентата за сила на звука в съответствие със стойността на плъзгача. Сигурен съм, че често сте виждали такъв ефект в потребителския интерфейс на медийния плейър.
В тази стъпка ще започнем да работим върху специалния ефект на Slider.
Подсказка
В този момент подсказка все още няма съдържание, така че ще я запълним със стойността на плъзгача. Също така, хоризонталното положение на подсказката ще съответства на позицията на дръжката.
Първо, съхраняваме елемента подсказка като променлива.
var tooltip = $ ('. tooltip');
След това определяме ефекта от подсказка, който споменахме по-горе в Slide Event.
slide: функция (събитие, ui) var value = slider.slider ('стойност'), tooltip.css ('left', value) .text (ui.value);
Но също така искаме подсказка първоначално да бъде скрита.
tooltip.hide ();
След това, когато дръжка скоро ще започне да се плъзга, ще се покаже с ефекта на затихване.
start: функция (event, ui) tooltip.fadeIn ('бързо'); ,
И когато потребителят спре да плъзга дръжката, подсказката ще изчезне и ще бъде скрита.
stop: функция (event, ui) tooltip.fadeOut ('бързо'); ,
Сила на звука
Както споменахме по-горе в Секция Стилове, планираме иконата за сила на звука да се променя съответно с позицията на дръжката или да бъдем точни, стойността на плъзгача. Така ще приложим следното условно изявление, за да създадем този ефект.
Но, първо, съхраняваме елемента на обема, както и стойността на плъзгача като променлива.
том = $ (". том");
След това започваме условната операция.
Когато стойността на плъзгача е по-ниска или равна на 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'); ;
Сложете ги всички заедно
Добре, в случай, че се объркате с всички гореспоменати неща, не бъдете. Ето и пряк път. Поставете всички следните кодове в документа.
Днес успешно създадохме по-елегантна тема на jQuery UI, но в същото време успешно преведохме и PSD потребителски интерфейс във функционален контролер за обем..
Надяваме се, че този урок ще ви вдъхнови и ще ви помогне да разберете как да превърнете PSD в по-използваем продукт.
Накрая, ако имате някакви въпроси относно този урок, можете да го добавите в раздела за коментари по-долу.
