Membuat jQuery UI Color Picker Tanpa Menggunakan Bootstrap

1 91

Ada banyak plugin colorpicker populer yang tersedia di internet. Sebelumnya, infokoding telah memberikan contoh untuk mengimplementasikan colorpicker jQuery dengan Bootstrap. Ada banyak situs web yang tidak suka menggunakan Bootstrap karena alasan penggunaan UI Bootstrap terlalu berat. Jadi dalam artikel ini mari kita gunakan cara menerapkan pemilih warna tanpa menggunakan plugin Bootstrap. Saya telah menggunakan Vandelee Colorpicker dan color picker yang keren menggunakan hex. Ini adalah plugin berbasis themeroller jQuery UI yang memberikan antarmuka pemilih banyak warna.

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 formulir 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 interface colorpicker sebagai modal window. 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 hasil terbaik.

<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>Membuat jQuery UI Color Picker Tanpa Menggunakan 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>

Saya telah mengganti style colorpicker untuk menjajarkan ikon dengan field input. style itu,

<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>

Kami 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>

Dan Stylenya,

.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.

Demo

Get real time updates directly on you device, subscribe now.

1 Comment
  1. krestiana says

    makasih informasinya. sangat membantu sekali untuk belajar. ditunggu artikel-artikel lainnya. kunjungi juga website saya di http://jos.co.id/ untuk membuat website mulai dari 1juta. terimakasih

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.