Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita  akan membahas tentang jQuery UI Color Picker tanpa Bootstrap. Ada banyak plugin colorpicker populer yang tersedia di internet. Sebelumnya, saya telah melihat contoh untuk mengimplementasikan colorpicker jQuery dengan Bootstrap. Bootstrap untuk UI mengingatkan bahwa Bootstrap terlalu berat. Jadi dalam artikel ini mari gunakan cara menerapkan pemilih warna tanpa menggunakan plugin Bootstrap. Saya telah menggunakan Vandelee Colorpicker dan penata warna keren. Ini adalah plugin berbasis themeroller jQuery UI dan memberikan antarmuka pemilih warna yang bagus.

Plugin ini menyediakan opsi untuk mengkonfigurasi widget colorpicker dengan mengesampingkan opsi default. Saat memanggil fungsi plugin init, kita harus mengatur konfigurasi ini. Mendukung banyak opsi untuk mengontrol format warna, format input / output dan banyak lagi. Ini pasti memperkaya situs web atau aplikasi PHP. Beberapa fitur widget adalah sebagai berikut:

Tampilan & nuansa JQueryUI (berbasis themeroller)
Komponen Kontrol, tata letak, format input / output yang sangat dapat dikonfigurasi
Model warna yang akurat
Mendukung pelokalan
Lengkapi API dengan acara dan metode
Mudah diperluas dengan plugin
Nonaktifkan / aktifkan kontrol colorpicker
Dukungan keyboard

Antarmuka Colorpicker jQuery

Saya membuat form HTML dengan bidang input yang dipetakan dengan inisialisasi plugin colorpicker UI jQuery. Plugin menambahkan ikon colorpicker di sebelah kolom input ini. Saat mengklik ikon ini, antarmuka colorpicker akan ditampilkan kepada pengguna untuk memilih warna. Saya telah mengaktifkan opsi plugin untuk menampilkan antarmuka colorpicker sebagai jendela modal. Saat memilih warna dari palet warna, kode HEX dari warna yang dipilih akan diisi pada bidang input.

Unduh plugin colorpicker dan sertakan dependensinya. Jangan lupa untuk mendefinisikan doctype HTML untuk mendapatkan output terbaik.

Berikut css colorpicker untuk merapikan icon dengan tag input

saya menggunakan JqueryUI Colorpicker untuk mengubah warna ikon secara dinamis dan menampilkan kode HEX di kotak kontrol input. Kode HTML ini berisi elemen input dan ikon. Elemen ikon akan terikat dengan JqueryUI Colorpicker. Pengikatan ini akan dilakukan pada peristiwa klik tombol ini untuk menampilkan pemilih warna. Saat memilih warna, maka akan diterapkan sebagai warna elemen ikon dan memberikan kode HEX.
Unduh pustaka JqueryUI Colorpicker dan sertakan dependensi JavaScript dan CSS yang diperlukan di HTML Anda.

jqueryUI Inisialisasi colorpicker untuk mendapatkan Kode Warna

Dalam skrip ini, fungsi pustaka color picker diinisialisasi dengan referensi elemen input colorpicker. Dalam inisialisasi ini, saya mengatur opsi konfigurasi untuk mengesampingkan opsi plugin colorpicker default. Sebagai contoh, saya telah mengatur modal sebagai benar untuk menunjukkan colorpicker sebagai jendela modal. Saya juga mengatur colorFormat sebagai HEX untuk mengembalikan kode HEX dalam memilih warna.

jqueryUI Colorpicker Output

Screenshot ini menunjukkan antarmuka color picker dengan menggunakan plugin jQuery ini. Dalam screenshot keluaran ini, ini menunjukkan kode HEX dihuni di kolom input pada pemilihan warna dari palet.

jQuery UI Color Picker tanpa Bootstrap

Oke itulah tadi pembahasan saya tentang jQuery UI Color Picker tanpa Bootstrap, semoga bermanfaat.