Membuat Pengontrol Volume dengan Slider UI jQuery

Jika Anda seorang pemburu gratis, kemungkinan Anda telah mengunduh banyak antarmuka pengguna PSD (UI). Beberapa dari mereka benar-benar luar biasa dan dapat menghemat waktu kita dengan membuat prototipe desain yang sedang kita kerjakan.

Dalam posting ini kita akan kode UI PSD dan mengubahnya menjadi sesuatu yang lebih fungsional. Kita akan mengkodekan Slider PSD UI berikut untuk diterapkan sebagai tema Slider UI jQuery.

Namun, mohon dicatat tutorial ini dimaksudkan untuk tingkat menengah pengalaman. Karena itu, ini masih relatif mudah diikuti, selama Anda cukup terbiasa dengan CSS dan jQuery.

Baiklah, sekarang mari kita mulai.

Langkah 1: UI jQuery

Kami jelas membutuhkan jQuery dan jQuery UI Library, dan kami memiliki dua opsi untuk menggunakannya. Pertama, kita dapat menautkan jQuery dan jQuery UI langsung dari CDN berikut: Google Ajax API CDN, Microsoft CDN, dan jQuery CDN, ada banyak keuntungan menggunakan file CDN yang di-host ketika kita menempatkan situs kita langsung online.

Tetapi karena kami hanya akan mengerjakannya secara offline, kami akan menggunakan kedua cara sebaliknya.

Kami akan mengunduh dan menyesuaikan perpustakaan jQuery UI dari halaman unduhan resmi. Karena kita hanya memerlukan plugin Slider, kita hanya akan memilih perpustakaan Slider beserta dependensinya dan meninggalkan yang lainnya. Dengan begitu file yang kita gunakan akan jauh lebih ramping dan dapat memuat lebih cepat. Setelah itu, tautkan semua pustaka tersebut ke dokumen HTML, sebaiknya di bagian bawah halaman atau sebelum tutup tag tepatnya.

Langkah 2: Markup HTML

Markup untuk slider sangat sederhana, kami membungkus semua markup yang diperlukan - tooltip, slider, dan volume - di dalam HTML5 bagian menandai. UI jQuery kemudian akan secara otomatis menghasilkan sisanya.

Langkah 3: Instal Slider UI

Cuplikan di bawah ini akan menginstal Slider pada halaman, tetapi hanya berlaku konfigurasi default.

 $ (function () $ ("#slider") .slider (););

Jadi di sini kita akan sedikit meningkatkan slider dengan menambahkan konfigurasi lainnya.

Pertama, kami menyimpan elemen slider sebagai variabel.

 var slider = $ ('# slider'),

Kemudian kita menetapkan nilai default minimum dari slider 35, saat pertama kali dimuat.

 slider.slider (range: "min", nilai: 35,);

Pada titik ini, kami belum akan melihat apa pun di browser, karena UI jQuery sedang pada dasarnya hanya menghasilkan markup. Jadi, kita perlu menerapkan beberapa gaya untuk mulai melihat hasilnya secara visual di browser.

Langkah 4: Gaya

Sebelum melanjutkan, kami memerlukan beberapa aset dari file sumber PSD seperti tekstur latar belakang dan ikon.

Kami tidak akan membicarakannya cara mengiris dalam artikel ini, kami hanya akan fokus pada kode. Jika Anda tidak yakin cara mengiris, perhatikan screencast berikut terlebih dahulu sebelum melanjutkan.

Mengonversi Desain dari PSD ke HTML - Nettuts+

Baiklah, sekarang mari kita mulai menambahkan gaya.

Kami akan mulai dengan memposisikan slider di tengah jendela browser dan melampirkan latar belakang yang telah kami iris dari PSD ke tubuh.

 body background: url ('… /images/bg.jpg') ulangi kiri atas;  bagian width: 150px; tinggi: otomatis; margin: 100px otomatis 0; posisi: relatif;

Selanjutnya, kami akan menerapkan gaya untuk tooltip, volume, pegangan, slider jarak dan slider diri.

Kami akan melakukan bagian ini demi bagian, dimulai dengan ...

Slider

Karena kami tidak menetapkan nilai maksimum untuk Slider itu sendiri, UI jQuery akan menerapkan default; itu adalah 100. Karena itu, kita juga bisa melamar 100 (px) untuk slider lebar.

 #slider lebar-lebar: 1px; gaya perbatasan: solid; warna batas: # 333 # 333 # 777 # 333; batas-radius: 25px; lebar: 100px; posisi: absolut; tinggi: 13px; warna latar: # 8e8d8d; background: url ('… /images/bg-track.png') ulangi kiri atas; box-shadow: inset 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); kiri: 20px;

Tip alat

Tooltip akan diposisikan di atas slider dengan menentukan posisi mutlak dengan -25px untuk itu posisi teratas.

 .tooltip position: absolute; display: blok; atas: -25px; lebar: 35px; tinggi: 20px; warna: #fff; perataan teks: tengah; font: 10pt Tahoma, Arial, sans-serif; batas-jari-jari: 3px; perbatasan: 1px solid # 333; box-shadow: 1px 1px 2px 0px rgba (0, 0, 0, .3); ukuran kotak: kotak batas; latar belakang: gradien linier (atas, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);

Volume

Kami telah sedikit memodifikasi ikon volume untuk memenuhi ide kami. Idenya adalah kita akan menciptakan efek naikkan volume bar secara bertahap sesuai dengan nilai slider. Saya yakin Anda sering melihat efek seperti itu di antarmuka pengguna pemutar media.

 .volume display: inline-block; lebar: 25px; tinggi: 25px; kanan: -5px; background: url ('… /images/volume.png') no-repeat 0 -50px; posisi: absolut; margin-top: -5px;

Pegangan UI

Gaya pegangannya cukup sederhana; itu akan memiliki ikon yang terlihat seperti lingkaran logam, diiris dari PSD, dan dilampirkan sebagai latar belakang.

Kami juga akan mengubah mode kursor ke penunjuk, sehingga pengguna akan melihat bahwa elemen ini dapat diseret.

 .ui-slider-handle position: absolute; z-index: 2; lebar: 25px; tinggi: 25px; kursor: pointer; latar belakang: url ('... /images/handle.png') jangan ulangi 50% 50%; font-weight: bold; warna: # 1C94C4; garis besar: tidak ada; atas: -7px; margin-left: -12px;

Rentang Slider

Rentang slider akan memiliki warna gradien yang agak putih.

 .ui-slider-range background: linear-gradient (atas, #ffffff 0%, # eaeaea 100%); posisi: absolut; perbatasan: 0; atas: 0; tinggi: 100%; batas-radius: 25px;

Langkah 5: Efeknya

Pada langkah ini kita akan mulai bekerja pada efek khusus Slider.

Tip alat

Pada titik ini, tooltip belum memiliki konten, jadi kami akan mengisinya dengan nilai slider. Juga, posisi horizontal tooltip akan sesuai dengan posisi pegangan.

Pertama-tama, kita menyimpan elemen tooltip sebagai variabel.

 var tooltip = $ ('. tooltip');

Kemudian kita mendefinisikan efek tooltip yang telah kita sebutkan di atas di dalam Slide Event.

 slide: function (event, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (ui.value);

Tapi, kami juga ingin tooltip awalnya disembunyikan.

 tooltip.hide ();

Setelah itu, kapan menangani akan mulai meluncur, itu akan ditampilkan dengan efek fade-in.

 start: function (event, ui) tooltip.fadeIn ('fast'); ,

Dan, ketika pengguna berhenti menggeser gagang, ujung alat akan pudar dan disembunyikan.

 stop: function (event, ui) tooltip.fadeOut ('fast'); ,

Volume

Seperti yang telah kami sebutkan di atas di Bagian gaya, kami merencanakan ikon volume untuk berubah sesuai dengan posisi pegangan atau tepatnya, nilai slider. Jadi, kami akan menerapkan pernyataan kondisional berikut untuk membuat efek ini.

Tapi, pertama-tama, kita menyimpan elemen volume serta nilai slider sebagai variabel.

 volume = $ ('. volume');

Kemudian kita mulai pernyataan bersyarat.

Ketika nilai slider lebih rendah atau sama dengan 5 ikon volume tidak akan memiliki bilah sama sekali, menunjukkan bahwa volume sangat rendah, tetapi ketika nilai slider meningkat, bilah volume akan mulai meningkat juga.

 jika (nilai <= 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'); ;

Kumpulkan semuanya

Baiklah, kalau-kalau Anda bingung dengan semua hal di atas, jangan. Ini pintasannya. Masukkan semua kode berikut ke dalam dokumen Anda.

 $ (function () var slider = $ ('# slider'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (range: "min", min: 1, nilai: 35, start: function (event, ui) tooltip.fadeIn ('fast');, slide: function (event, ui) var value = slider.slider ('value'), volume = $ ('. Volume '); tooltip.css (' kiri ', nilai) .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'); , ); );

Baiklah, sekarang mari kita lihat hasilnya di browser.

Demo
Sumber Unduhan

Kesimpulan

Hari ini kami telah berhasil membuat tema UI jQuery yang lebih elegan tetapi pada saat yang sama kami juga berhasil menerjemahkan Antarmuka Pengguna PSD menjadi pengontrol volume fungsional.

Kami berharap tutorial ini menginspirasi Anda dan dapat membantu Anda memahami cara mengubah PSD menjadi produk yang lebih bermanfaat.

Terakhir, jika Anda memiliki pertanyaan tentang tutorial ini, silakan menambahkannya di bagian komentar di bawah ini.