Membuat Borang dengan Rangka Kerja Webix

Artikel ini dikaji semula oleh Simon Codrington dan Mallory Van Achterberg. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!

Sebagai pereka web, kemungkinannya anda perlu membuat borang web secara tetap. Ini sering merupakan tugas yang tidak bersyukur dan satu yang penuh dengan sakit kepala (terutama jika anda melakukan sesuatu yang lebih kompleks, seperti membuat bentuk pelbagai langkah). Dalam kes sedemikian, lebih baik menggunakan kerangka UI untuk meringankan kesakitan dan mempercepat proses pembangunan. Dalam artikel ini, saya akan menggariskan pelbagai tip dan cara yang membolehkan anda membuat pelbagai jenis bentuk dengan cepat dan dengan kerumitan minimum menggunakan rangka kerja Webix.

Takeaways Key

kesederhanaan dan kelajuan: Menggunakan perpustakaan UI Webix JavaScript dengan ketara memudahkan proses penciptaan bentuk, yang membolehkan perkembangan pesat dan integrasi bentuk kompleks seperti bentuk multi-langkah dan berbilang tab.
fleksibiliti dalam penciptaan bentuk: Webix menawarkan pelbagai elemen dan konfigurasi bentuk, termasuk bentuk mudah, bentuk dengan pelbagai pilihan pemilihan, dan penggunaan widget yang inovatif seperti widget pokok dalam bentuk.
Penyesuaian dan fleksibiliti: Rangka kerja ini menyokong pilihan penyesuaian yang luas, termasuk membuat kulit tersuai dan menggunakan alat pereka visual untuk penciptaan UI drag-and-drop, memenuhi keperluan reka bentuk tertentu.
Ciri-ciri Lanjutan: Webix menyediakan fungsi canggih seperti pemilihan dan cadangan multi-combo, meningkatkan antara muka pengguna dan pengalaman borang.
Integrasi dan keserasian: Rangka kerja ini serasi dengan pelbagai kaedah kemasukan dalam projek, menyokong pelayar dan peranti utama, dan boleh digunakan bersama kerangka JavaScript lain, menjadikannya dapat disesuaikan dengan persekitaran pembangunan yang pelbagai.
Apa itu Webix?

Webix adalah perpustakaan UI JavaScript komponen HTML5 yang memudahkan penciptaan aplikasi web mudah alih dan desktop. Ia memberikan anda pelbagai komponen dari butang mudah ke widget spreadsheet yang boleh digunakan untuk membangunkan aplikasi seperti Excel. Selain koleksi komponen UI, terdapat mekanisme pengendalian acara, sokongan mod luar talian, dan sekumpulan alat pembangunan. Anda juga boleh membuat kulit anda sendiri menggunakan pembina kulit, menggunakan pereka visual untuk penciptaan UI drag-and-drop dan bermain dengan kod di taman permainan kod sumber dalam talian. Projek ini juga mempunyai dokumentasi lengkap.

Saya telah menulis artikel pengenalan yang menggambarkan ciri -ciri utama dan asas -asas menggunakan rangka kerja ini, jadi jangan ragu untuk melihat terlebih dahulu jika anda berminat.

termasuk Webix

Terdapat pelbagai cara di mana anda boleh memasukkan fail JavaScript dan CSS yang diperlukan dalam projek anda. Jika anda memuat turun pakej perpustakaan, anda akan dapati fail -fail ini dalam folder codebase. Anda boleh memasukkannya seperti berikut:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

Sebagai alternatif anda boleh menggunakan CDN:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

anda juga boleh menggunakan NUGET:

nuget <span>install Webix
</span>

di mana jika anda menggunakan Microsoft Visual Studio, laksanakan ini dari Konsol Pengurus Pakej:

install-package Webix

atau cuba bower:

bower install webix

Membuat bentuk mudah

Sekarang, dengan perpustakaan di tempat, mari kita lihat bagaimana widget bentuk Webix berfungsi.

webix<span>.ui({
</span>  <span>view: "form",
</span>  <span>id: "myForm",
</span>  <span>container: "areaA",
</span>  <span>width: 350,
</span>  <span>elements: [
</span>    <span>{ // first form component },
</span>    <span>{ // second form component},
</span>    <span>{ // n-th form component */}
</span>  <span>]
</span><span>});
</span>

kita mulakan dengan memanggil kaedah UI objek Webix dan lulus pelbagai parameter untuk mengkonfigurasi outputnya.

• Property View menentukan jenis elemen yang dibuat (di sini kita membuat borang, tetapi ini juga boleh menjadi menu atau carta).
• harta ID memberikan ID kepada borang, di mana anda kemudiannya boleh merujuknya.
• Harta kontena menentukan ID elemen HTML yang mana bentuknya harus diberikan.
• Harta lebar digunakan untuk menetapkan lebar elemen bentuk. Webix mengandaikan bahawa anda ingin menggunakan piksel sebagai unit pengukuran di sini, jadi anda hanya perlu menetapkan nombor yang betul.
• Harta Unsur adalah pelbagai komponen yang akan mengandungi borang anda. Anda boleh menggunakan komponen yang sesuai dalam bentuk: medan teks, butang radio, kotak semak, butang, dan lain -lain

Mari buat borang log masuk yang mudah. Kami memerlukan dua medan teks (satu untuk nama pengguna dan satu untuk kata laluan), satu kotak semak, dan, tentu saja, butang hantar.

webix<span>.ui({
</span>  <span>...
</span>  <span>elements: [
</span>    <span>{ view: "text", label: "Username", name: "username" },
</span>    <span>{ view: "text", label: "Password", name: "password", type: "password" },
</span>    <span>{ view: "checkbox", labelRight: "I accept the terms of use", name: "accept" },
</span>    <span>{ view: "button", value: "Submit", width: 150, align: "center", click: submit }
</span>  <span>]
</span><span>});
</span>

Perhatikan bahawa kami menentukan atribut nama untuk elemen borang kami dan menetapkan jenis: "kata laluan" untuk medan kata laluan kami, untuk menutup watak -watak seperti yang dimasukkan. Menetapkan harta label elemen mentakrifkan label untuk elemen itu dan kami boleh menggunakan harta klik elemen untuk menentukan pengendali acara yang akan dipanggil apabila borang diserahkan. Walaupun senang mempunyai kemungkinan untuk memeriksa bahawa segala-galanya adalah OK dengan data, jangan lupa bahawa pengesahan sisi klien hanya boleh menambah pengesahan sisi pelayan.

Sebelum kita dapat menjalankan demo ini, kita perlu menentukan pengendali acara ini. Di sini saya menggunakan Kotak Mesej Webix untuk memberi maklum balas pengguna mengenai apa yang dimasukkan:

<span>function submit(){
</span>  webix<span>.message(JSON.stringify($$("myForm").getValues(), null, 2));
</span><span>}
</span>

Kod ini menggunakan kaedah Webix GetValues ​​untuk memperoleh data yang dimasukkan dari borang dengan ID MyForm dan kemudian menukarnya ke rentetan JSON menggunakan json.stringify ().

Nah, semuanya sudah siap, dan kita boleh menyemak hasilnya:

selepas anda memasukkan beberapa data dan tekan butang hantar anda akan mendapat mesej:

inilah demo:

lihat pen nnbgwm oleh sitepoint (@sitePoint) pada codepen.

seolah -olah semuanya berfungsi dengan baik. Sekarang, mari kita tambahkan sesuatu yang lebih menarik.

Pelbagai Pemilihan dan Cadangan

Kawalan borang yang berbeza membolehkan anda memilih beberapa item atau menggunakan cadangan. Bagi saya, yang paling menarik dari mereka adalah multicombo. Ini adalah kawalan yang membolehkan anda memilih pelbagai nilai untuk medan input melalui antara muka yang mudah tetapi intuitif.

NOTA: Pelepasan Webix baru -baru ini (26 April, 2016) menyaksikan perubahan bagaimana kawalan multicombo berfungsi. Ia kini boleh didapati dalam versi Webix Pro sahaja (produk berbayar).

Bayangkan anda ingin membuat halaman yang akan membantu pemaju untuk menghasilkan CV. Ia boleh mengandungi medan berikut:

Oleh kerana anda mengharapkan pengguna anda akan mengetahui lebih daripada satu bahasa pengaturcaraan, anda boleh menyusun senarai bahasa tersebut dan menggunakan komponen multicombo untuk membentangkannya. Inilah contoh apa yang kelihatan seperti:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

Di samping sifat -sifat yang biasa, di sini kami menggunakan harta butang dan harta yang dicadangkan. Harta butang mencipta butang untuk mengesahkan pemilihan, sedangkan harta yang dicadangkan mentakrifkan sumber item yang akan dipaparkan dalam multicombo. Dalam contoh kami, kami menggunakan harta data untuk menentukan nama array serta harta templat untuk menentukan nilai untuk dipaparkan. Ia juga mungkin untuk menetapkan laluan ke fail (mis. Cadangkan: "jalan/ke/fail/data.js"), melakukan t seperti di atas adalah pilihan yang lebih baik jika anda ingin mengekstrak array data yang berbeza dari sumber besar .

mari kita periksa bagaimana ia berfungsi. Selepas anda mengklik medan teks, senarai drop-down akan muncul:

anda boleh tatal dan pilih item yang anda mahu, atau mula menaip untuk menyempitkan cadangan:

Borang contoh khusus ini akan mengembalikan sekumpulan ID yang sepadan dengan item yang dipilih:

inilah demo untuk contoh ini.

Sebagai alternatif kepada multicombo, anda boleh menyemak komponen GridSuggest dan DataView.

menggunakan widget pokok sebagai elemen bentuk

Webix tidak mengehadkan anda ke elemen bentuk konvensional seperti medan teks, butang, dan kotak semak. Anda boleh meletakkan widget yang anda suka dalam bentuk anda. Mari kita lihat widget pokok, sebagai contoh. Ia tidak dirancang pada awalnya sebagai kawalan bentuk, itulah sebabnya tidak ada kaedah setvalue dan getValue yang tersedia untuk elemen ini. Tetapi kaedah ini diperlukan jika kita mahu dapat kembali atau menetapkan nilai untuk komponen ini. Jadi, apa yang boleh kita lakukan? Nasib baik, ada kaedah protoui yang dapat membantu kami. Ia membolehkan penciptaan pandangan baru berdasarkan yang sedia ada.

mari cuba:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

Dalam kod di atas, kami membuat pandangan baru yang dipanggil Formtree. Kami kemudian menentukan dua kaedah baru yang membolehkan kami menetapkan dan mendapatkan nilai IDnya. Akhirnya, kami menggunakan widget pokok sebagai asas untuk pandangan baru ini.

Sekarang mari kita buat beberapa data:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

anda boleh menambah elemen baru anda ke borang seperti biasa:

nuget <span>install Webix
</span>

Kami memperkenalkan beberapa hartanah baru di sini: Harta Templat Menambah kotak semak ke nod pokok dan harta threestate membolehkan kotak semak 3-keadaan. Ini adalah kotak semak di mana:

• Apabila pengguna memeriksa/melepaskan nod induk, nod induk dan semua nod anaknya (setiap peringkat bersarang) diperiksa/tidak dicentang.
• Apabila pengguna memeriksa/melepaskan nod kanak -kanak, hanya nod kanak -kanak individu diperiksa/tidak terkawal.

Jika anda menggunakan kotak semak 3-keadaan, anda harus memberi perhatian kepada satu isu kecil. Apabila anda memilih kotak semak, Webix menyusun semula pokok itu. Jika anda memutuskan untuk menggunakan papan kekunci anda untuk mengisi borang, apabila anda menolak ruang untuk menukar pilihan kotak semak (dalam kes pelayar berasaskan Webkit seperti Chrome), ia boleh menyebabkan kehilangan tumpuan dan anda 'Saya akan mula tabbing dari awal borang.

gembira, ada penyelesaian untuk ini. Anda boleh menggunakan harta On untuk melampirkan pengendali baru ke pokok. Kami akan menggunakannya bersama -sama dengan acara OnItemCheck yang kebakaran apabila anda memilih item pokok tertentu. Menggunakan beberapa kaedah tambahan, kita boleh memastikan fokus selamat:

install-package Webix

Ini mesti berfungsi. Tetapi inilah masalah lain: WebKit tidak menandakan kotak pilihan semasa tabbing. Untuk mengatasi ini, anda boleh menggunakan beberapa kod CSS untuk menambah Outline atau Box Shadow ke kotak semak yang difokuskan. Berikut adalah contoh:

bower install webix

dengan semua ini di tempat, kita boleh mengklik butang hantar untuk memeriksa sama ada kaedah buatan tangan kami berfungsi:

yep, ID telah berjaya diserahkan.

anda boleh menyemak borang ini di sini:

lihat pena anjyjr oleh sitepoint (@sitePoint) pada codepen.

bentuk multi-tab dan pelbagai langkah

Jika anda merancang untuk mengumpulkan sejumlah besar data dari pengguna, anda boleh memisahkan borang anda menjadi bahagian kecil. Mari kita lihat dua kemungkinan: satu bentuk yang terdiri daripada Pelbagai Tab dan bentuk yang membolehkan penyisipan data langkah demi langkah.

komponen tabview

Komponen TabView mencipta koleksi elemen yang dipisahkan menjadi tab, yang pengguna boleh beralih antara. Anda boleh menggunakan sama ada satu elemen sebagai kandungan tabView atau menentukan gabungan baris dan lajur yang mengandungi unsur -unsur yang anda inginkan.

Berikut adalah contoh:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

Idea utama di sebalik pendekatan ini adalah untuk memisahkan borang (dengan itu menjadikannya lebih mudah diurus untuk pengguna anda). Walau bagaimanapun, anda harus ingat bahawa komponen yang berkaitan dengan keseluruhan borang (mis. Butang Hantar atau "Saya Terima" kotak semak) hendaklah diletakkan di luar komponen TabView.

contohnya:

Itu sahaja yang anda perlukan untuk membuat bentuk tab. Anda boleh menyemak hasil di bawah:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

Kelebihan tambahan untuk pendekatan ini adalah bahawa tidak perlu menambah sebarang kod tambahan untuk menjadikan bahagian -bahagian ini berfungsi sebagai satu. Hanya letakkan komponen TabView dalam bentuk anda, tambahkan nama harta ke setiap bidang dan anda akan dapat mendapatkan semua nilai yang dimasukkan. Mengklik butang Hantar

mengesahkannya:

kelihatan sedikit kemas tetapi namun ia adalah data kami.

kebolehcapaian papan kekunci

Jika niat anda adalah menggunakan sebilangan besar tab dan anda ingin menggunakan tab

untuk menukar di antara mereka, anda boleh menggunakan butang dalam bar tab. Pendekatan ini membolehkan kami menambah tab ke perintah navigasi tab. Yang perlu anda lakukan ialah menukar harta pengepala:

anda harus menambah beberapa kod CSS untuk membuat butang ini kelihatan asli:

nuget <span>install Webix
</span>

Dalam demo berikut, kami juga akan menggunakan pemetik tarikh. Kami perlu pastikan ia muncul apabila pengguna mencecah

kembali

, walaupun walaupun pengguna tidak boleh (pada masa ini) berinteraksi dengannya melalui papan kekunci, ia memberikan bantuan visual yang berguna.

install-package Webix

Satu cara untuk mencapai ini adalah dengan menggunakan harta hotkey. Tetapi inilah sesuatu yang anda perlu sedar. Harta ini berfungsi tanpa sebarang masalah jika anda ingin mengikat kunci ke elemen halaman tunggal. Tetapi terdapat dua datePickers dalam bentuk kami. Oleh itu, anda harus menggunakan kaedah AddHotKey untuk membuat pengendali baru yang berfungsi dengan semua datePickers anda:

anda dapat melihat semua ini berfungsi bersama dalam demo berikut:

lihat pena zwjjmj oleh sitepoint (@sitePoint) pada codepen.

bower install webix

sebagai alternatif, anda boleh menggunakan akordion untuk tugas ini.

Multiview Component

Komponen multiview membolehkan kita membuat urutan elemen yang dapat dilihat satu demi satu. Anda boleh menggunakan tab untuk beralih di antara kawasan multiview, tetapi kerana kami berminat untuk membuat borang multistep, mari tambahkan butang untuk membimbing pengguna melalui pelbagai peringkat.

Pertama sekali, kita perlu membuat dua fungsi untuk membuat

seterusnya dan kembali Butang berfungsi:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script> src<span >="./codebase/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

Fungsi seterusnya menggunakan kaedah GetParentView Webix untuk mendapatkan rujukan untuk mengandungi butang sel mana yang diklik (iaitu sel yang sedang dipaparkan). Ia kemudian menggunakan nilai ID komponen multiview (FormContent) untuk mengira yang (jika ada) sel akan datang. Sekiranya terdapat sel seterusnya, ia beralih ke pandangan menggunakan kaedah pertunjukan. Fungsi belakang menggunakan kaedah Back Switch Multiview ke Paparan Aktif sebelum ini

elemen multiview boleh ditakrifkan dengan cara yang sama seperti yang kita nyatakan elemen tabview sebelumnya. Walau bagaimanapun, kali ini kita harus meletakkan satu baris tambahan di bahagian bawah setiap sel. Baris ini akan mengandungi butang kawalan. Sekiranya terdapat hanya satu butang untuk dipaparkan (seperti dalam sel pertama), kami menyertakan objek kosong.

mari kita lihat bagaimana rupa ini:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span></span>

mari kita lihat apa yang telah kami lakukan:

Selepas kita mengklik butang

seterusnya

, bahagian seterusnya borang akan muncul.

dan mari kita periksa sama ada semuanya berfungsi seperti yang diharapkan:

Ia tidak! Inilah demo terakhir:

lihat pena anjldo oleh sitepoint (@sitePoint) pada codepen.

Kesimpulan

Dalam tutorial ini saya telah menunjukkan betapa mudahnya Webix menjadikannya menghasilkan bentuk yang kompleks, namun bergaya dan boleh diakses. Rangka kerja ini meletakkan pelbagai widget yang kuat di hujung jari anda dan walaupun mereka tidak dimaksudkan untuk digunakan sebagai komponen bentuk keluar dari kotak, agak mudah untuk mentakrifkan tingkah laku mereka menggunakan kaedah protoui.

Adakah anda menggunakan Webix dalam projek anda? Adakah tutorial ini memberi inspirasi kepada anda untuk mencubanya? Beritahu saya dalam komen di bawah.

Soalan Lazim (Soalan Lazim) Mengenai Rangka Kerja Webix

Apakah rangka kerja Webix dan bagaimana ia berfungsi? Ia menyediakan lebih daripada 100 widget yang disesuaikan sepenuhnya, termasuk jadual data, carta, bentuk, dan banyak lagi. Webix berfungsi dengan membenarkan pemaju membuat komponen UI menggunakan JavaScript, yang kemudiannya dapat diintegrasikan dengan mudah ke dalam mana -mana aplikasi web. Rangka kerja ini direka untuk mudah digunakan, dengan API yang mudah dan intuitif, dan ia juga menyokong pelbagai pelayar dan peranti. Bermula dengan Webix, anda perlu memuat turun perpustakaan dari laman web rasmi Webix. Sebaik sahaja anda mempunyai perpustakaan, anda boleh memasukkannya dalam projek anda dengan menambahkan tag skrip ke fail HTML anda. Dari sana, anda boleh mula membuat komponen UI menggunakan API Webix. Dokumentasi Webix rasmi menyediakan banyak maklumat dan contoh untuk membantu anda memulakan. Alat yang berkuasa untuk pembangunan web. Beberapa ciri utama termasuk lebih daripada 100 widget UI, API yang mudah dan intuitif, sokongan untuk pelbagai pelayar dan peranti, dan keupayaan untuk membuat susun atur UI yang kompleks. Di samping itu, Webix juga menyediakan beberapa ciri canggih, seperti pengikatan data, pengendalian acara, dan sokongan Ajax. Perpustakaan UI JavaScript lain dalam beberapa cara. Pertama, ia menawarkan pemilihan widget UI yang lebih besar daripada kebanyakan perpustakaan lain, yang membolehkan pemaju membuat aplikasi yang lebih kompleks dan kaya. Kedua, Webix direka untuk menjadi mudah digunakan, dengan API yang mudah dan intuitif yang memudahkan untuk dimulakan. Akhirnya, Webix menawarkan prestasi yang sangat baik, dengan masa rendering yang cepat dan penggunaan memori yang cekap. Angular, React, dan Vue.js. Ini membolehkan pemaju memanfaatkan kekuatan pelbagai rangka dalam aplikasi mereka. Sebagai contoh, anda mungkin menggunakan Angular untuk ciri -ciri mengikat data yang kuat, sambil menggunakan Webix untuk pemilihan widget UI yang kaya. dan menyokong pelbagai peranti, termasuk telefon bimbit dan tablet. Ini menjadikannya pilihan yang baik untuk pemaju yang ingin membuat aplikasi web mesra mudah alih.

Bagaimana saya boleh menyesuaikan penampilan aplikasi Webix saya?

Webix menyediakan beberapa cara untuk menyesuaikan penampilan aplikasi anda. Anda boleh menggunakan CSS untuk gaya komponen UI anda, atau anda boleh menggunakan salah satu daripada banyak kulit pra-buatan yang disediakan oleh Webix. Di samping itu, Webix juga membolehkan anda membuat kulit tersuai anda sendiri menggunakan alat Builder Skin. Laman web webix rasmi menyediakan banyak dokumentasi dan contoh, serta forum di mana anda boleh bertanya dan mendapatkan bantuan daripada masyarakat. Di samping itu, Webix juga menawarkan pakej sokongan premium, yang termasuk akses langsung ke pasukan pembangunan Webix. Versi percuma termasuk pemilihan widget dan ciri yang terhad, sementara versi berbayar memberikan akses kepada pelbagai widget dan ciri -ciri penuh, serta sokongan premium.

Cara terbaik untuk mengetahui lebih lanjut mengenai Webix adalah untuk melawat laman web Webix rasmi, di mana anda dapat mencari banyak maklumat dan sumber, termasuk dokumentasi, contoh, tutorial, dan banyak lagi. Anda juga boleh menyertai komuniti Webix di GitHub, di mana anda boleh mencari sumber tambahan dan berhubung dengan pemaju Webix yang lain.

Atas ialah kandungan terperinci Membuat Borang dengan Rangka Kerja Webix. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!