Anasayfa » Kodlama » JQuery UI Slider ile Bir Ses Denetleyicisi Oluşturma
JQuery UI Slider ile Bir Ses Denetleyicisi Oluşturma
Eğer bir freebies avcısıysanız, birçok PSD kullanıcı arayüzü (UI) indirmiş olma ihtimaliniz var. Bazıları gerçekten harikalar ve üzerinde çalıştığımız tasarımın prototipini oluşturarak zaman kazanabiliyorlardı..
Bu yazıda bir PSD kullanıcı arayüzünü kodlayacağız ve daha işlevsel bir şeye dönüştüreceğiz. JQuery UI Slider teması olarak uygulanacak aşağıdaki PSD UI Slider'ı kodlayacağız.
ancak, lütfen Not al bu eğitimin amacı orta seviye Deneyim Bunu söyledikten sonra, CSS ve jQuery'e oldukça aşina olduğunuz sürece, takip etmesi nispeten kolaydır..
Tamam, şimdi başlayalım.
Adım 1: jQuery UI
Açıkçası jQuery ve jQuery UI Library'ye ihtiyacımız var ve bunları kullanmak için iki seçeneğimiz var. Öncelikle, jQuery ve jQuery UI'yi doğrudan aşağıdaki CDN'den bağlayabiliriz: Google Ajax API CDN, Microsoft CDN ve jQuery CDN, sitemizi çevrimiçi yayınladığımız zaman barındırılan CDN dosyasını kullanmanın birçok avantajı vardır.
Ancak yalnızca çevrimdışı çalışacağımızdan, ikinci yerine.
JQuery UI kütüphanesini resmi indirme sayfasından indirip özelleştireceğiz. Sadece Slider eklentisine ihtiyacımız olduğu için, bağımlılıkları ile birlikte yalnızca Slider kütüphanesini seçeceğiz ve diğerlerini bırakacağız. Bu yolla kullandığımız dosyalar daha ince olacaktır ve daha hızlı yüklenebilir. Bundan sonra, tüm bu kütüphaneleri HTML sayfasına, tercihen sayfanın altında veya kapanmadan önce bağlayın.
tam olması için etiket.
2. Adım: HTML işaretlemesi
Sürgü için işaretleme çok basittir, bir HTML5'in içine tüm gerekli işaretlemeyi (araç ipucu, kaydırıcı ve ses) sardık. Bölüm etiket. JQuery UI daha sonra otomatik olarak gerisini oluşturur.
Adım 3: Slider UI'yi yükleyin
Aşağıdaki kod parçası, Sayfadaki Kaydırıcıyı yükler, ancak yalnızca varsayılan yapılandırma geçerlidir.
$ (function () $ ("#slider") .slider (););
Yani burada diğer konfigürasyonları ekleyerek kaydırıcıyı biraz geliştireceğiz.
Öncelikle, slider öğesini bir değişken olarak saklıyoruz.
var kaymak = $ ('# kaymak'),
Sonra kaydırıcının minimum varsayılan değerini yaklaşık olarak 35, ilk yüklendiğinde.
slider.slider (range: "min", değer: 35,);
Bu noktada, henüz tarayıcıda hiçbir şey görmeyeceğiz, çünkü jQuery UI temelde sadece işaretleme oluşturma. Bu yüzden sonucu tarayıcıda görsel olarak görmeye başlamak için bazı stiller uygulamamız gerekiyor..
Adım 4: Stiller
Devam etmeden önce, arka plan dokusu ve simge gibi PSD kaynak dosyasındaki bazı varlıklara ihtiyacımız var..
Hakkında konuşmayacağız dilim nasıl Bu yazıda sadece koda odaklanacağız. Nasıl dilimleneceğinden emin değilseniz, devam etmeden önce aşağıdaki ekran görüntüsünü izleyin..
Bir Tasarımı PSD'den HTML'ye Dönüştürme - Nettuts+
Tamam, şimdi stilleri eklemeye başlayalım.
Kaydırıcıyı tarayıcı penceresinin ortasına yerleştirerek başlayacağız ve PSD'den dilime aldığımız arka planı vücut.
body background: url ('… /images/bg.jpg') sol üst tekrarlayın; bölüm genişlik: 150 piksel; yükseklik: otomatik; marj: 100 piksel otomatik 0; pozisyon: göreceli;
Sonra, stilleri uygulayacağız ipucu, ses, sap, kaymak menzil ve kaydırıcı kendisi.
Bu bölümü, baştan başlayarak yapacağız…
kaydırıcı
Slider'ın kendisi için maksimum değeri tanımlamadığımız için, jQuery UI varsayılanı uygulayacaktır; yani 100. Bu nedenle, biz de başvurabiliriz 100 (px) sürgü için Genişlik.
#slider kenarlık genişliği: 1px; sınır tarzı: katı; kenarlık rengi: # 333 # 333 # 777 # 333; sınır yarıçapı: 25 piksel; genişlik: 100px; pozisyon: mutlak; yükseklik: 13px; arka plan rengi: # 8e8d8d; background: url ('… /images/bg-track.png') sol üst tekrarlayın; kutu-gölge: ek 0 0 piksel 5 piksel 0 piksel rgba (0, 0, 0, 5), 0 1 piksel 0 0 piksel rgba (250, 250, 250, 5); sol: 20 piksel;
İpucu
Araç ipucu, kaydırıcıyı belirterek kaydırıcının üzerine yerleştirilecektir. kesinlikle konum ile -25px onun için üst konum.
Ses ikonunu fikrimizi karşılamak için biraz değiştirdik. Fikir şu ki, biz bir etki yaratacağız. ses çubuğunu kademeli olarak yükselt sürgü değerine göre. Medya oynatıcısı kullanıcı arayüzünde sık sık böyle bir etki gördüğünüze eminim.
.hacim ekran: satır içi blok; genişlik: 25 piksel; yükseklik: 25px; sağ: -5px; background: url ('… /images/volume.png') tekrar yok 0 -50 piksel; pozisyon: mutlak; kenar boşluğu: -5px;
UI tanıtıcısı
Sapın tarzı oldukça basittir; Metalik bir daireye benzeyen, PSD'den dilimlenmiş ve arka plana bağlı bir simgeye sahip olacak.
İmleç modunu da değiştireceğiz. Işaretçi, böylece kullanıcı bu öğenin sürüklenebildiğini fark edecek.
.ui-slider-hand pozisyon: mutlak; z-endeksi: 2; genişlik: 25 piksel; yükseklik: 25px; imleç: işaretçi; arka plan: url ('… /images/handle.png') tekrarlamama% 50% 50; yazı tipi ağırlığı: kalın; renk: # 1C94C4; taslak: yok; üst: -7px; sol kenar boşluğu: -12px;
Kaymak Aralığı
Kaydırma aralığı biraz beyaz degrade rengine sahip olacak.
Bu adımda Slider'ın özel efekti üzerinde çalışmaya başlayacağız.
İpucu
Bu noktada, araç ipucunun henüz içeriği yok, bu yüzden kaydırıcıyı değeriyle dolduracağız. Ayrıca, araç ipucunun yatay konumu sapın konumuna karşılık gelecek.
Her şeyden önce, araç ipucu öğesini bir değişken olarak saklıyoruz.
var araç ipucu = $ ('. araç ipucu');
Ardından, Slide Event'de yukarıda bahsettiğimiz araç ipucunun etkisini tanımlarız..
slide: function (event, ui) var value = slider.slider ('değer'), tooltip.css ('left', value) .text (ui.value);
Ancak, ipucunun başlangıçta gizlenmesini istiyoruz.
tooltip.hide ();
Ondan sonra, ne zaman sap kaymaya başlamak üzere, solmaya karşı etkin bir şekilde gösterilecektir.
start: function (event, ui) tooltip.fadeIn ('fast'); ,
Ve kullanıcı tutamacı kaydırmayı bıraktığında, araç ipucu kaybolur ve gizlenir.
stop: function (olay, kullanıcı arabirimi) tooltip.fadeOut ('fast'); ,
hacim
Yukarıda da belirttiğimiz gibi Stiller bölümü, tutamacın konumuna göre değişecek veya doğru olacak şekilde ses simgesini planlıyoruz, kaydırıcının değeri. Bu nedenle, bu etkiyi yaratmak için aşağıdaki koşullu ifadeyi uygulayacağız..
Ancak, öncelikle, hacim öğesinin yanı sıra kaydırıcının değerini değişken olarak saklıyoruz.
hacim = $ ('. hacim');
Sonra şartlı ifadeyi başlatırız.
Kaydırıcının değeri düşük veya ona eşit olduğunda 5 Ses simgesinin hiç bir çubuğu olmaz, bu sesin çok düşük olduğunu gösterir, ancak kaydırıcının değeri yükseldiğinde ses seviyesi de artmaya başlar..
(Değer ise <= 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'); ;
Hepsini bir araya getir
Pekala, yukarıdaki şeylerle karıştırıldığın takdirde, yapma. İşte kısayol. Aşağıdaki tüm kodları belgenize yerleştirin.
$ (function () var slider = $ ('# slider'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (range: "min", min: 1, değer: 35, start: function (event, ui) tooltip.fadeIn ('fast');, slide: function (event, ui) var value = slider.slider ('value'), volume = $ ('. '); tooltip.css (' left ', value) .text (ui.value); if (value <= 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'); , ); );
Pekala, şimdi sonucu tarayıcıda görüntüleyelim.
gösteri
Kaynak İndir
Sonuç
Bugün başarıyla daha zarif bir jQuery UI teması yarattık, ancak aynı zamanda PSD Kullanıcı Arayüzünü işlevsel bir ses denetleyicisine başarıyla çevirdik.
Umarız bu eğitim size ilham verir ve PSD'yi daha kullanışlı bir ürüne nasıl dönüştüreceğinizi anlamanıza yardımcı olabilir..
Son olarak, bu eğitim ile ilgili herhangi bir sorunuz varsa, aşağıdaki yorumlar bölümüne eklemekten çekinmeyin.
