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.
<!DOCTYPE html>
<html>
<head>
<title>jQueryUI Colour Picker</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="colorpicker/jquery.colorpicker.js"></script>
<link href="colorpicker/jquery.colorpicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>jQueryUI color picker without bootstrap</h2>
<div class="frm-colorpicker">
<form>
<div class="input-row">
Hex Value : <input id="colorpicker-full"
class="input-field" type="text" />
</div>
</form>
</div>
</body>
</html>
Berikut css colorpicker untuk merapikan icon dengan tag input
<style>
body {
font-family: Arial;
width: 550px;
}
.frm-colorpicker {
background: #F0F0F0;
border: #e0dfdf 1px solid;
padding: 20px;
border-radius: 2px;
}
.input-row {
margin-bottom: 20px;
}
.input-field {
width: 250px;
padding: 10px;
border: #e0dfdf 1px solid;
text-transform: uppercase;
text-align: left;
vertical-align: bottom;
}
.ui-button .ui-button-text img {
width: 20px;
}
.ui-button {
border-radius: unset;
background: #FFF;
margin-left: 10px;
}
.ui-button-text-only .ui-button-text {
padding: .2em .4em;
}
</style>
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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="colorpicker-master/jquery.colorpicker.js"></script>
<link href="colorpicker-master/jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
<div class="main-input-container">
<form>
<div class="input-row">
HEX : <input class="input-field" type="text" id="colorpicker-full" value="Pick a color using the icon">
</div>
</form>
</div>
and the styles are
.main-input-container
{
background: #F0F0F0;
border: #e0dfdf 1px solid;
padding: 20px;
border-radius: 2px;
}
.input-row
{
margin-bottom: 20px;
}
.input-field
{
width: 65%;
border-radius: 2px;
padding: 10px;
border: #e0dfdf 1px solid;
}
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.
<script>
$(function() {
$('#colorpicker-full').colorpicker({
showOn: 'both',
showNoneButton: true,
showCloseButton: true,
showCancelButton: true,
colorFormat: ['#HEX'],
position: {
my: 'center',
at: 'center',
of: window
},
modal: true
});
});
</script>
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.
Oke itulah tadi pembahasan saya tentang jQuery UI Color Picker tanpa Bootstrap, semoga bermanfaat.