Sekiranya anda pemburu percuma, kemungkinan anda telah memuat turun banyak antara muka pengguna JPA (UI). Sesetengah daripada mereka benar-benar hebat dan boleh menjimatkan masa kita dengan prototaip reka bentuk yang kami sedang kerjakan.
Dalam jawatan ini kita akan kodkan JPA UI dan menjadikannya sesuatu yang lebih berfungsi. Kami akan kodkan UI JPA Slider berikut untuk digunakan sebagai tema jQuery UI Slider.
Walau bagaimanapun, sila ambil perhatian bahawa tutorial ini dimaksudkan untuk tahap perantaraan pengalaman. Setelah mengatakan itu, Ia masih agak mudah untuk diikuti, selagi anda cukup mengenali CSS dan jQuery.
Baiklah, sekarang mari bermula.
Langkah 1: UI jQuery
Kami jelas memerlukan jQuery dan Perpustakaan jQuery UI, dan kami mempunyai dua pilihan untuk menggunakannya. Pertama, kita boleh memautkan jQuery dan UI jQuery secara langsung dari CDN yang berikut: Google Ajax API CDN, Microsoft CDN, dan jQuery CDN, terdapat banyak kelebihan menggunakan fail CDN yang dihoskan apabila kita meletakkan laman web kami secara langsung dalam talian.
Tetapi kerana kita hanya akan bekerja di luar talian, kita akan menggunakannya kedua cara sebaliknya.
Kami akan memuat turun dan menyesuaikan perpustakaan jQuery UI dari halaman muat turun rasmi. Oleh kerana kami hanya memerlukan plugin Slider, kami hanya akan memilih perpustakaan Slider bersama dengan kebergantungannya dan meninggalkan yang lain. Dengan cara itu, fail yang kami gunakan akan menjadi lebih langsing dan boleh memuatkan lebih cepat. Selepas itu, hubungkan semua perpustakaan tersebut ke dokumen HTML, sebaiknya di bahagian bawah halaman atau sebelum tutup
tag tepat.
Langkah 2: Penanda HTML
Penanda untuk slider adalah sangat mudah, kami membungkus semua markup yang diperlukan - tooltip, slider, dan volume - di dalam HTML5 seksyen tag. UI jQuery kemudian akan menjana secara selebihnya.
Langkah 3: Pasang UI Slider
Coretan di bawah akan memasang Slider di halaman, tetapi ia hanya terpakai bagi konfigurasi lalai.
$ (function () $ ("#slider") .slider (););
Jadi di sini kita akan meningkatkan slider sedikit dengan menambahkan konfigurasi lain.
Pertama, kami menyimpan unsur slider sebagai pembolehubah.
var slider = $ ('# slider'),
Kemudian kami tetapkan nilai lalai minimum slider untuk menjadi kira-kira 35, apabila ia dimuatkan terlebih dahulu.
slider.slider (range: "min", value: 35,);
Pada ketika ini, kita tidak akan melihat apa-apa pada pelayar lagi, kerana UI jQuery itu pada dasarnya hanya menghasilkan markup. Oleh itu, kita perlu memohon beberapa gaya untuk mula melihat hasil visual pada penyemak imbas.
Langkah 4: Gaya
Sebelum meneruskan, kami memerlukan beberapa aset dari fail sumber PSD seperti tekstur latar belakang dan ikon.
Kita tidak akan bercakap bagaimana untuk memotong dalam artikel ini, kami hanya akan memberi tumpuan kepada kod. Sekiranya anda tidak pasti bagaimana untuk menghiris, tonton skreencast berikut terlebih dahulu sebelum meneruskan.
Menukar Reka bentuk dari JPA ke HTML - Nettuts+
Baiklah, sekarang mari kita tambahkan gaya.
Kami akan bermula dengan meletakkan slider di tengah-tengah tetingkap pelayar dan melampirkan latar belakang yang kami telah dihiris dari JPA ke badan.
body background: url ('... /images/bg.jpg') berulang kiri atas; seksyen lebar: 150px; ketinggian: auto; margin: 100px auto 0; kedudukan: relatif;
Seterusnya, kami akan menggunakan gaya untuk petua alat, jumlahnya, pemegang, gelangsar pelbagai dan juga gelangsar sendiri.
Kami akan melakukan bahagian ini mengikut bahagian, bermula dengan ...
Slider
Oleh kerana kita tidak menentukan nilai maksimum untuk Slider itu sendiri, UI jQuery akan memohon lalai; itu dia 100. Oleh itu, kita juga boleh memohon 100 (px) untuk gelangsar lebar.
Kami telah mengubahsuai ikon kelantangan sedikit untuk memenuhi idea kami. Ideanya ialah kita akan mewujudkan kesan kepada meningkatkan bar kelantangan secara beransur-ansur mengikut nilai gelangsar. Saya pasti anda sering melihat kesan sedemikian dalam antara muka pengguna pemain media.
Dalam langkah ini kita akan mula bekerja pada kesan khas Slider itu.
Petua alat
Pada ketika ini, tooltip tidak mempunyai kandungan, jadi kami akan mengisinya dengan nilai gelangsar. Juga, kedudukan mendatar tooltip akan sesuai dengan kedudukan pemegangnya.
Pertama sekali, kami menyimpan elemen tooltip sebagai pembolehubah.
var tooltip = $ ('tooltip');
Kemudian kami mentakrifkan kesan tooltip yang telah disebutkan di atas di dalam Acara Slide.
slaid: fungsi (event, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (ui.value);
Tetapi, kami juga mahu tooltip pada awalnya disembunyikan.
tooltip.hide ();
Selepas itu, apabila mengendalikan akan mula gelongsor, ia akan ditunjukkan dengan kesan pudar.
permulaan: fungsi (event, ui) tooltip.fadeIn ('cepat'); ,
Dan, apabila pengguna berhenti gelongsor pemegang, tooltip akan pudar-keluar dan tersembunyi.
stop: function (event, ui) tooltip.fadeOut ('fast'); ,
Jumlah dagangan
Seperti yang telah disebutkan di atas di dalam Bahagian gaya, kami merancang ikon kelantangan untuk menukar sama dengan kedudukan pemegang atau tepat, nilai slider. Oleh itu, kami akan menggunakan pernyataan bersyarat berikut untuk membuat kesan ini.
Tetapi, pertama, kita menyimpan unsur kelantangan serta nilai slider sebagai pemboleh ubah.
jumlah = $ ('. volume');
Kemudian kita mulakan kenyataan bersyarat.
Apabila nilai gelangsar lebih rendah atau sama dengan 5 ikon kelantangan tidak mempunyai bar sama sekali, menunjukkan bahawa jumlahnya sangat rendah, tetapi apabila nilai slider semakin meningkat, bar kelantangan akan mula 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'); ;
Letakkan semuanya bersama
Baiklah, sekiranya anda keliru dengan semua perkara di atas, janganlah. Berikut ialah jalan pintas. Masukkan semua kod berikut ke dalam dokumen anda.
slider.slider (range: "min", min: 1, value: $ (function () var slider = $ ('# slider'), tooltip = 35, mula: fungsi (event, ui) tooltip.fadeIn ('fast');, slaid: function (event, ui) var value = slider.slider ('value'), volume = $ (' '); tooltip.css (' kiri ', nilai) .text (ui.value); 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'); ; , stop: function(event,ui) tooltip.fadeOut('fast'); , ); );
Baiklah, mari kita lihat keputusan dalam penyemak imbas.
Demo
Muat turun Sumber
Kesimpulannya
Hari ini kami berjaya mencipta tema jQuery UI yang lebih elegan tetapi pada masa yang sama kami juga telah berjaya menerjemahkan Antara Muka JPA Pengguna ke pengawal kelantangan berfungsi.
Kami berharap tutorial ini memberi inspirasi kepada anda dan boleh membantu anda memahami cara menjadikan JPA menjadi produk yang lebih berguna.
Akhir sekali, jika anda mempunyai sebarang soalan mengenai tutorial ini, jangan ragu untuk menambahnya di bahagian komen di bawah.
