Color Picker Widget (YUI based)
Color Picker Widget ini dapat dengan mudah diintegrasikan ke dalam setiap element Form, berdasarkan YUI's Color Picker. Color Picker ini juga memungkinkan untuk meng-extract RGB, HSV dan nilai-nilai heksadesimal dari setiap warna yang dipilih.
Example 1: Floating Color Picker
Please choose a color:
YUI Color Picker Widget
Example 2: Inline Color Picker (always visible)
Set focus on form field, then choose a color:
Features:
- Kemampuan untuk menampilkan Color Picker baik inline, maupun sebagai widget floating dalam bentuk Popup, diaktifkan dengan mengklik pada "kontrol".
- Color Picker ini didukung YUI, sehingga dua kelompok elemen FORM pada masing-masing halaman dapat memiliki beberapa Color Picker.
- Color range dan saturasi disesuaikan melalui sliders, sedangkan rincian teknis dari warna saat ini ditampilkan dalam RGB, hex, dan format HSV.
Implementation:
Untuk mengimplementasikan ini Anda tidak perlu memiliki pengalaman yang solid. Cukup ikuti langkah-langkah dibawah ini:
1. Download zip archive Color Picker Widget.
2. Upload isi archive kedalam webserver anda.
3. Tempatkan kode berikut di bagian halaman Anda:
Insert the below into the HEAD section of your page:
<!-- YUI Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/slider/slider-min.js" ></script>
<!-- Color Picker source files for CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/colorpicker.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/colorpicker/colorpicker-min.js" ></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<link rel="stylesheet" type="text/css" href="windowfiles/dhtmlwindow.css" />
<script type="text/javascript" src="ddcolorpicker.js">
/***********************************************
* Color PIcker Widget (YUI Based)- By Buku Catatan si Ugi DHTML code library (http://caprt3a.blogspot.com)
* Requires: YUI Color Picker and DHTML Window Widget
***********************************************/
</script>
<style type="text/css">
* html .yui-picker-bg{ /*Requires CSS. Do not edit/ remove*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/picker_mask.png',sizingMethod='scale');
}
/*Style used in demos below. Edit if desired*/
.colorpreview{ /*CSS for sample Preview Control*/
border: 1px solid black;
padding: 1px 10px;
cursor: hand;
cursor: pointer;
}
form div{
margin-bottom: 5px;
}
</style>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/slider/slider-min.js" ></script>
<!-- Color Picker source files for CSS and JavaScript -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/colorpicker.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/colorpicker/colorpicker-min.js" ></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<link rel="stylesheet" type="text/css" href="windowfiles/dhtmlwindow.css" />
<script type="text/javascript" src="ddcolorpicker.js">
/***********************************************
* Color PIcker Widget (YUI Based)- By Buku Catatan si Ugi DHTML code library (http://caprt3a.blogspot.com)
* Requires: YUI Color Picker and DHTML Window Widget
***********************************************/
</script>
<style type="text/css">
* html .yui-picker-bg{ /*Requires CSS. Do not edit/ remove*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://yui.yahooapis.com/2.5.1/build/colorpicker/assets/skins/sam/picker_mask.png',sizingMethod='scale');
}
/*Style used in demos below. Edit if desired*/
.colorpreview{ /*CSS for sample Preview Control*/
border: 1px solid black;
padding: 1px 10px;
cursor: hand;
cursor: pointer;
}
form div{
margin-bottom: 5px;
}
</style>
Add the below two demos to the BODY of your page:
<h2>Example 1: Floating Color Picker (Popup Widget)</h2>
<form>
<p>Select a Color:</p>
<div>Rectangle control, preview on: <input type="text" id="field1" size="20" /> <span id="control1" class="colorpreview"> </span></div>
<div>Text link control, preview off: <input type="text" id="field2" size="20" /> <a id="control2" class="nopreview" href="#">[Select Color]</a></div>
<div>No control, instead set focus on field: <input type="text" id="field3" size="20" /></div>
</form>
<!--HTML for Color Picker. Should contain two unique IDs-->
<div id="ddcolorpicker">
Please choose a color:
<div id="colorpicker" style="position:relative; height:205px"></div>
<a href="http://caprt3a.blogspot.com/" style="margin-left:5px; font-size:90%">DD Color Picker Widget</a>
</div>
<script type="text/javascript">
ddcolorpicker.init({
colorcontainer: ['ddcolorpicker', 'colorpicker'], //id of widget DIV, id of inner color picker DIV
displaymode: 'float', //'float' or 'inline'
floatattributes: ['DD Color Picker Widget', 'width=390px,height=250px,resize=1,scrolling=1,center=1'], //'float' window attributes
fields: ['field1:control1', 'field2:control2', 'field3'] //[fieldAid[:optionalcontrolAid], fieldBid[:optionalcontrolBid], etc]
})
</script>
<hr style="margin-top: 100px" />
<h2>Example 2: Inline Color Picker (always visible)</h2>
<form>
<p>Select a Color:</p>
<div>Rectangle control, preview on: <input type="text" id="field1alt" size="20" /> <span id="control1alt" class="colorpreview"> </span></div>
<div>Text link control, preview off: <input type="text" id="field2alt" size="20" /> <a id="control2alt" class="nopreview" href="#">[Select Color]</a></div>
<div>No control: <input type="text" id="field3alt" size="20" /></div>
</form>
<!--HTML for Color Picker. Should contain two unique IDs-->
<div id="ddcolorpickeralt">
<div style="color:white; background:black; width: 400px; margin:1em 0; padding: 3px">Set focus on form field, then choose a color:</div>
<div id="colorpickeralt" style="position:relative; height:205px"></div>
</div>
<script type="text/javascript">
ddcolorpicker.init({
colorcontainer: ['ddcolorpickeralt', 'colorpickeralt'],
displaymode: 'inline',
floatattributes: ['DD Color Picker Widget', 'width=390px,height=250px,resize=1,scrolling=1,center=1'],
fields: ['field1alt:control1alt', 'field2alt:control2alt', 'field3alt']
})
</script>
<form>
<p>Select a Color:</p>
<div>Rectangle control, preview on: <input type="text" id="field1" size="20" /> <span id="control1" class="colorpreview"> </span></div>
<div>Text link control, preview off: <input type="text" id="field2" size="20" /> <a id="control2" class="nopreview" href="#">[Select Color]</a></div>
<div>No control, instead set focus on field: <input type="text" id="field3" size="20" /></div>
</form>
<!--HTML for Color Picker. Should contain two unique IDs-->
<div id="ddcolorpicker">
Please choose a color:
<div id="colorpicker" style="position:relative; height:205px"></div>
<a href="http://caprt3a.blogspot.com/" style="margin-left:5px; font-size:90%">DD Color Picker Widget</a>
</div>
<script type="text/javascript">
ddcolorpicker.init({
colorcontainer: ['ddcolorpicker', 'colorpicker'], //id of widget DIV, id of inner color picker DIV
displaymode: 'float', //'float' or 'inline'
floatattributes: ['DD Color Picker Widget', 'width=390px,height=250px,resize=1,scrolling=1,center=1'], //'float' window attributes
fields: ['field1:control1', 'field2:control2', 'field3'] //[fieldAid[:optionalcontrolAid], fieldBid[:optionalcontrolBid], etc]
})
</script>
<hr style="margin-top: 100px" />
<h2>Example 2: Inline Color Picker (always visible)</h2>
<form>
<p>Select a Color:</p>
<div>Rectangle control, preview on: <input type="text" id="field1alt" size="20" /> <span id="control1alt" class="colorpreview"> </span></div>
<div>Text link control, preview off: <input type="text" id="field2alt" size="20" /> <a id="control2alt" class="nopreview" href="#">[Select Color]</a></div>
<div>No control: <input type="text" id="field3alt" size="20" /></div>
</form>
<!--HTML for Color Picker. Should contain two unique IDs-->
<div id="ddcolorpickeralt">
<div style="color:white; background:black; width: 400px; margin:1em 0; padding: 3px">Set focus on form field, then choose a color:</div>
<div id="colorpickeralt" style="position:relative; height:205px"></div>
</div>
<script type="text/javascript">
ddcolorpicker.init({
colorcontainer: ['ddcolorpickeralt', 'colorpickeralt'],
displaymode: 'inline',
floatattributes: ['DD Color Picker Widget', 'width=390px,height=250px,resize=1,scrolling=1,center=1'],
fields: ['field1alt:control1alt', 'field2alt:control2alt', 'field3alt']
})
</script>
And You are now done!
Customization:
Didalam Formulir diatas, Kode HTML penuh terlihat seperti ini:
<form>
<div>Rectangle control, preview on: <input type="text" id="field1" size="20" /> <span id="control1" class="colorpreview"> </span></div>
<div>Text link control, preview off: <input type="text" id="field2" size="20" /> <a id="control2" class="nopreview" href="#">[Select Color]</a></div>
<div>No control, instead set focus on field: <input type="text" id="field3" size="20" /></div>
</form>
<div>Rectangle control, preview on: <input type="text" id="field1" size="20" /> <span id="control1" class="colorpreview"> </span></div>
<div>Text link control, preview off: <input type="text" id="field2" size="20" /> <a id="control2" class="nopreview" href="#">[Select Color]</a></div>
<div>No control, instead set focus on field: <input type="text" id="field3" size="20" /></div>
</form>
<!--HTML for Color Picker. Should contain two unique IDs-->
<div id="ddcolorwidget">
Please choose a color:
<div id="ddcolorpicker" style="position:relative; height:205px"></div>
<a href="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/" style="margin-left:5px; font-size:90%">DD Color Picker Widget</a>
</div>
<div id="ddcolorwidget">
Please choose a color:
<div id="ddcolorpicker" style="position:relative; height:205px"></div>
<a href="http://www.dynamicdrive.com/dynamicindex11/ddcolorpicker/" style="margin-left:5px; font-size:90%">DD Color Picker Widget</a>
</div>
<script type="text/javascript">
ddcolorwidget.init({
colorcontainer: ['ddcolorwidget', 'ddcolorpicker'], //id of widget DIV, id of inner color picker DIV
displaymode: 'float', //'float' or 'inline'
floatattributes: ['DD Color Picker Widget', 'width=430px,height=250px,resize=1,scrolling=1,center=1'], //'float' window attributes
fields: ['field1:control1', 'field2:control2', 'field3'] //[fieldAid[:optionalcontrolAid], fieldBid[:optionalcontrolBid], etc]
})
</script>
ddcolorwidget.init({
colorcontainer: ['ddcolorwidget', 'ddcolorpicker'], //id of widget DIV, id of inner color picker DIV
displaymode: 'float', //'float' or 'inline'
floatattributes: ['DD Color Picker Widget', 'width=430px,height=250px,resize=1,scrolling=1,center=1'], //'float' window attributes
fields: ['field1:control1', 'field2:control2', 'field3'] //[fieldAid[:optionalcontrolAid], fieldBid[:optionalcontrolBid], etc]
})
</script>
Di dalam FORM 1 di atas, setiap field input diberikan warna ID yang unik (text warna merah), kemudian pilih beberapa HTML yang akan bertindak sebagai kontrol (text warna biru). "Kontrol" digunakan untuk mengaktifkan Color Picker dan menetapkan fokus ke bidang masukan terkait saat diklik dan masing-masing harus diberikan ID yang unik juga. Jika Anda tidak ingin merubah warna background kontrol, melainkan berdasarkan warna yang dipilih, anda dapat memberikan sebuah class CSS untuk "nopreview". Dan, jika field input warna tidak memiliki definisi untuk kontrol, pengaturan fokus akan mengaktifkan Color Picker.
Pada bagian FORM 2 dari kode HTML mendefinisikan kerangka untuk Color Picker. Cukup dengan menetapkan DIV Widget utama dan DIV dalam yang akan diisi dengan Color Picker itu sendiri. Untuk DIV bagian dalam, Anda cukup memberikan nilai minimal seperti berikut ini:
style="position:relative; height:205px"
Ini bertujuan untuk memberikan posisikan yang tepat pada Color Picker dalam Kontainer Widget.
Dan bagian FORM 3 dari kode, adalah syntax yang harus selalu mengikuti dua bagian sebelumnya untuk membuat Color Picker Widget. Dengan Parameter:
fields: ['field1:control1', 'field2:control2', 'field3']
berfungsi untuk memasukkan ID dari input warna dalam FORM, ditambah opsional ID dari kontrol. Dalam kasus di atas, "field3" tidak memiliki kontrol dan akan mengaktifkan Color Picker ketika pengguna menetapkan fokus pada bidang tersebut. Anda juga dapat memodifikasi atribut dasar untuk Floating Widget (Popup Widget) melalui parameter:
floatattributes: ['Color Picker Widget', 'width=430px,height=250px,resize=1,scrolling=1,center=1'],
sumber:dynamicdrive){kind=link}
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon