jQuery : Color Picker with Sliders

Sebuah plugin jQuery yang merombak pemetik warna klasik dan menyediakan pengguna dengan cara baru memilih kode warna yang diinginkan. Softpedia.com

Apakah Anda tahu perbedaan antara HSL biasa dan dirasakan manusia (CIE LCH) slider?

Lihat perbedaannya

Gunakan slider HSL rona, dan ringan yang dirasakan manusia akan berubah banyak antara sudut rona yang berbeda (biru tampaknya lebih gelap dari kuning). Gunakan slider CIE rona, dan ringan yang dirasakan masih jauh lebih konstan.
Perbarui warna dari kode:hsl(0,100%,50%) rgba(0,255,0,0.5) blue #ffff00 transparent

Warna picker dalam popup

Petunjuk: Anda dapat mengetik dalam CSS warna (bahkan yang bernama, seperti kuning).

Mari kita lihat beberapa contoh pengambilan warna yang berbeda

HSL Color Picker

Demo berikut menggunakan slider HSL dengan preview.

<span class="hsl-demo"></span>

$(".hsl-demo").ColorPickerSliders({
    flat: true,
    previewformat: 'hsl',
    order: {
        hsl: 1,
        preview: 2
    }
});

CIE Lch Color Picker

Demo berikut menggunakan slider CIE LCH dengan ringan yang dirasakan manusia. Ini menggunakan berbagai customswatches nama dan default yang berbeda swatches , sehingga swatch independen dari pemilih warna lain di halaman ini.

<span class="cielch-demo"></span>

$(".cielch-demo").ColorPickerSliders({
    flat: true,
    customswatches: "different-swatches-groupname",
    swatches: ["rgb(174, 156, 227)","rgb(29, 179, 229)","rgb(54, 185, 163)","rgb(144, 176, 105)","rgb(224, 148, 110)","rgb(233, 137, 168)"],
    order: {
        cie: 1,
        preview: 2
    }
});

RGB Color Picker

Demo berikut menggunakan RGB dan opacity slider. Swatch dinonaktifkan untuk pemilih warna ini.

<span class="rgb-demo"></span>

$(".rgb-demo").ColorPickerSliders({
    flat: true,
    swatches: false,
    order: {
        rgb: 1,
        opacity: 2
    },
    labels: {
        rgbred: 'Red',
        rgbgreen: 'Green',
        rgbblue: 'Blue'
    }
});

Popup on any element

Contoh berikut ini terkait dengan unsur-unsur yang berbeda dan diberikan di popup. Hanya swatch cutom dinonaktifkan untuk demo ini, sehingga Anda dapat menggunakan swatch yang telah ditetapkan.

<input id="color" type="text" class="demo-popup" value="#56B29A" data-color-format="hex">
<button type="button" class="demo-popup">button</button>
<span class="demo-popup">span</span>
<a class="demo-popup">link</a>

$('.demo-popup').ColorPickerSliders({
    previewontriggerelement: true,
    flat: false,
    color: '#cf966f',
    customswatches: false,
    swatches: ['red', 'green', 'blue'],
    order: {
        rgb: 1,
        preview: 2
    }
});

Color:

span link

Example for using the onchange() setting

kalimat ini diperbarui tentang perubahan

<input type="text" class="onchange-example" data-color-format="hex" value="GreenYellow"> <span class="onchange-example" style="padding:3px;border:1px solid #ccc;">this span is updated on change</span>

<script>
    $("input.onchange-example").ColorPickerSliders({
        order: {
            hsl: 1
        },
        onchange: function(container, color) {
            var span = $("span.onchange-example");

            span.css("background-color", color.tiny.toRgbString());

            if (color.cielch.l < 60) {
                span.css("color", "white");
            }
            else {
                span.css("color", "black");
            }
        }
    });
</script>

Sebuah contoh full-blown menunjukkan semua slider beraksi

Demo berikut menggunakan semua slider, dan menghubungkan ke sekelompok input untuk menunjukkan nilai warna yang sebenarnya dalam format yang berbeda. Format warna dapat diatur pada input data-color-format properti.
 
warna dapat diperbarui melalui salah satu input terhubung. Plugin menggunakan baik kecil Warna Plugin, sehingga menangani semua format warna CSS valid (nama warna CSS juga!).

<input type="text" class="full-demo-input" data-color-format="hsl">
<input type="text" class="full-demo-input" data-color-format="hex">
<input type="text" class="full-demo full-demo-input" data-color-format="rgb">

$(".full-demo").ColorPickerSliders({
    flat: true,
    invalidcolorsopacity: 0,
    connectedinput: '.full-demo-input'
});

CIE LCH color picker dengan rentang warna yang tidak valid disembunyikan

Penanda posisi di slider selalu menunjukkan tanda seru ketika pengaturan LCH yang sebenarnya tidak dapat dikonversi ke nilai RGB, tapi ada lebih dari itu! Anda dapat membuat warna tidak valid terlihat atau semi-transparan menggunakan invalidcolorsopacity pengaturan. Cara ini lebih mudah untuk menemukan warna yang berbeda atau ringan dengan kroma yang sama.
Anda dapat melihat bahwa jika chroma diatur terlalu tinggi, maka preview menunjukkan warna sebenarnya dengan tertinggi nilai chroma. Lihat dalam tindakan:

<span class="cielch-demo2"></span>

$(".cielch-demo2").ColorPickerSliders({
    flat: true,
    invalidcolorsopacity: 0.2,
    order: {
        cie: 1,
        preview: 2
    }
});

Settings

Option	Description
color	Ini adalah warna awal jika tidak ada (setiap CSS diformat) nilai warna yang valid dari elemen input yang terhubung. Dapat dalam format yang Tiny Color supports.
previewformat	adalah format warna pada slider preview (jika terlihat). Bisa rgb , hsl atau hex . Perhatikan format hex tidak dapat mewakili nilai opacity.
preventtouchkeyboardonshow	true: Membuat input dibaca untuk mencegah sentuhan keyboard untuk muncul pada fokus, membutuhkan klik kedua untuk menjadi diedit.
swatches	array: Array warna CSS (bisa nama warna CSS juga). false: swatch dinonaktifkan.
customswatches	string: Nama kelompok swatch kustom. Pemetik warna dengan sama customswatches nama share warna swatch sama, jadi jika Anda menambahkan warna baru untuk salah satu pemetik warna, maka semua pemetik warna swatch akan diperbarui pada halaman yang memiliki yang sama customswatches nama. false: swatch kustom dinonaktifkan, sehingga hanya swatch yang telah ditetapkan dapat digunakan.
connectedinput	selector or jQuery object: terhubung nilai elemen input akan secara otomatis diperbarui sinkron dengan pemilih warna. Format warna yang warna diwakili saya input dapat diatur melalui data-color-format properti. Hal ini dapat setiap hex , hsl atau rgb . Jika itu adalah hex, maka opacity akan dibuang.
flat	false: color picker diberikan dalam popup, yang ditunjukkan pada fokus dari elemen terhubung. true: Warna picker diberikan tepat setelah elemen terhubung, dan selalu terlihat.
disableautopopup	false: popup akan terlihat pada blu atau klik. true: popup ditampilkan pada blur atau klik. Harus memicu colorpickersliders.showPopup dan colorpickersliders.hidePopup acara untuk menampilkan / menyembunyikan popup.
updateinterval	Memperbarui interval slider sambil menyeret (ms). default adalah 30.
previewontriggerelement	true: melihat dari warna latar belakang elemen terhubung ini. false: Pratinjau pada elemen terhubung.
previewcontrasttreshold	30: Jika previewontriggerelement diaktifkan, maka jika ringan berada di bawah nilai ini, warna teks elemen akan menjadi putih. Jika tidak teks hitam.
erroneousciecolormarkers	true: warna CIE Unconvertable ditandai dengan tanda seru pada CIE tingkat slider penanda. false: Tidak ada tanda seru pada spidol.
invalidcolorsopacity	1: Opacity of the invalid (unconvertable) area of the CIE sliders.
finercierangeedges	true: Sharper, tepi lebih akurat dari CIE valid berkisar pada slider. false: Smoother tepi CIE valid berkisar pada slider
order	Sebuah objek yang mendefinisikan yang slider muncul dan urutannya. Sifat-sifat yang mungkin: opacity , hsl , rgb , cie , preview .
labels	Sebuah benda yang mendefinisikan label slider. Mungkin properties: hslhue , hslsaturation , hsllightness , rgbred , rgbgreen , rgbblue , cielightness , ciechroma , ciehue , opacity , preview .
onchange	function(container, color): Fungsi ini dipicu ketika warna berubah dengan slider atau melalui input terhubung. The color parameter memegang objek warna yang sebenarnya dalam format berikut: objek rgb, objek HSL, cie LCH objek, kecil warna objek.
titleswatchesadd	string: Judul dari warna add ke tombol swatch.
titleswatchesreset	string: Judul tombol swatch ulang.

Events

Contoh penggunaan: $("#colorpicker").trigger("colorpickersliders.updateColor", "red"));
Peristiwa berikut dapat dipicu pada elemen yang pemilih warna diinisialisasi pada.

Event	Description
colorpickersliders.destroy	function(): Menghancurkan pemilih warna.
colorpickersliders.reset	function(): reinitializes pemilih warna.
colorpickersliders.updateColor	function(newcolor): Mengatur warna baru untuk pemilih warna.
colorpickersliders.showPopup	function(): Menunjukkan popup jika pemilih warna menggunakannya (itu tidak datar).
colorpickersliders.hidePopup	function(): Menyembunyikan popup jika pemilih warna menggunakannya (itu tidak datar).

Read More