<img src="http://nimbuzzerblack.hexat.com/icon.gif">Jquery Color picker - NIMBUZZ SHINOBI BLACK

Home
Menu1
- Submenu1
- Submenu2
- Submenu3
- Submenu4
Menu2
Menu3
Menu4
Menu5
Link1
Link2

Minggu, 03 April 2011

Jquery Color picker

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :
/*----------------
Jquery color Picker
-------------------------------*/
.navigationTabs {
   height: 23px;
   line-height: 23px;
   border-bottom: 1px solid #ccc;
}
.navigationTabs li {
   float: left;
   height: 23px;
   line-height: 23px;
   padding-right: 3px;
}
.navigationTabs li a{
   float: left;
   dispaly: block;
   height: 23px;
   line-height: 23px;
   padding: 0 10px;
   overflow: hidden;
   color: #52697E;
   background-color: #eee;
   position: relative;
   text-decoration: none;
}
.navigationTabs li a:hover {
   background-color: #f0f0f0;
}
.navigationTabs li a.active {
   background-color: #fff;
   border: 1px solid #ccc;
   border-bottom: 0px solid;
}
.tabsContent {
   border: 1px solid #ccc;
   border-top: 0px solid;
   width: 698px;
   overflow: hidden;
}
.tab {
   padding: 16px;
   display: none;
}
.tab h2 {
   font-weight: bold;
   font-size: 16px;
}
.tab h3 {
   font-weight: bold;
   font-size: 14px;
   margin-top: 20px;
}
.tab p {
   margin-top: 16px;
   clear: both;
}
.tab ul {
   margin-top: 16px;
   list-style: disc;
}
.tab li {
   margin: 10px 0 0 35px;
}
.tab a {
   color: #8FB0CF;
}
.tab strong {
   font-weight: bold;
}
.tab pre {
   font-size: 11px;
   margin-top: 20px;
   width: 668px;
   overflow: auto;
   clear: both;
}
.tab table {
   width: 100%;
}
.tab table td {
   padding: 6px 10px 6px 0;
   vertical-align: top;
}
.tab dt {
   margin-top: 16px;
}

#colorSelector {
   position: relative;
   width: 36px;
   height: 36px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir13kCka_QD4Tbc_SBi7VmaIr6PsIQrKaz1UCiE4lY6ck9HhguOnRcXjqzWu6Pwo1u0CEyyBnrVyjZY6T0op5bhROb6BYEVjsL_jkwcyiUha-zajbDKlH46lqO2CpI_YkuNBsyk4PnSpQ/s1600/select2.png);
}
#colorSelector div {
   position: absolute;
   top: 3px;
   left: 3px;
   width: 30px;
   height: 30px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir13kCka_QD4Tbc_SBi7VmaIr6PsIQrKaz1UCiE4lY6ck9HhguOnRcXjqzWu6Pwo1u0CEyyBnrVyjZY6T0op5bhROb6BYEVjsL_jkwcyiUha-zajbDKlH46lqO2CpI_YkuNBsyk4PnSpQ/s1600/select2.png) center;
}
#colorSelector2 {
   position: absolute;
   top: 0;
   left: 0;
   width: 36px;
   height: 36px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir13kCka_QD4Tbc_SBi7VmaIr6PsIQrKaz1UCiE4lY6ck9HhguOnRcXjqzWu6Pwo1u0CEyyBnrVyjZY6T0op5bhROb6BYEVjsL_jkwcyiUha-zajbDKlH46lqO2CpI_YkuNBsyk4PnSpQ/s1600/select2.png);
}
#colorSelector2 div {
   position: absolute;
   top: 4px;
   left: 4px;
   width: 28px;
   height: 28px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir13kCka_QD4Tbc_SBi7VmaIr6PsIQrKaz1UCiE4lY6ck9HhguOnRcXjqzWu6Pwo1u0CEyyBnrVyjZY6T0op5bhROb6BYEVjsL_jkwcyiUha-zajbDKlH46lqO2CpI_YkuNBsyk4PnSpQ/s1600/select2.png) center;
}
#colorpickerHolder2 {
   top: 32px;
   left: 0;
   width: 356px;
   height: 0;
   overflow: hidden;
   position: absolute;
}
#colorpickerHolder2 .colorpicker {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwutjGfRHc6Q2GxJpGYYGI-XMaGs0yq2yHWkL2zq-eYg8669xbllb3p3dS4MCVbg24tdTUUtQBtadLUfJN3Ly8YV1dhmZxMtYgNn6jgdsUYs3ujRYZM-vblNZE7TV0ToPUFtWN_3HFLWE/s1600/custom_background.png);
   position: absolute;
   bottom: 0;
   left: 0;
}
#colorpickerHolder2 .colorpicker_hue div {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ezuZoxIG0GD9sDsL9e6wkhmxLqzG0ujQMKBp2kuIDCXICFAEukps3fWUDJ2JouAmjUbFn87-PSOBKqj7eCU6WRGO0c2rWyQwsVySCsqOArdTiGcTD-d-05e_XChuda_fUXmRFPpFSXY/s1600/custom_indic.gif);
}
#colorpickerHolder2 .colorpicker_hex {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVXq2b-27RZIcWWM2obFpXW7G__ACA4S-Wdz5bhqA9PsCt3a2ow5r54XuakvgayeRBG-k_aPCWY7cfeNgp8TxHrD8DB0XBvXZgAh271-FRKPhQSvFcnEehg7EDFmi8c6h5qlSr5i2w1uE/s1600/custom_hex.png);
}
#colorpickerHolder2 .colorpicker_rgb_r {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7PxGWxatX-Cgo61MlfEOvAKS-a0C_LIkXX2ioWPX9KkXhKiTu3PpQBLC_p-DIHipIkDb0skCVtQfirmfVYRKaLfDJNqY6zYJhzrrBFg_uluKYYDDc6eq1rw9Rg7oqDRhgbCAdbLr_Qsw/s1600/custom_rgb_r.png);
}
#colorpickerHolder2 .colorpicker_rgb_g {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTlwk8rwzJN7ClsxZcbJKe9zD-nIwUqR9ZzGBfYtS4jDqyFUkj3Pdw1ko9bAC1rqubrnN4kxV0yuF7hBCsp_G8nT3wXJYdmBSPK_YobcJKdLXHWq9KwbYq4uQD2SJZHhBRYgLg-MzQZ8/s1600/custom_rgb_g.png);
}
#colorpickerHolder2 .colorpicker_rgb_b {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm__esOwExhzsGlyFbQjufQka6vm43mCdojg5tu536iJ-wGlWZNsTkf7hEFWM_lJpyfxa9qK_ZFXu9fgaWKKgKiu15ZeBD8n-p725NiU0kuMaxXIdqyALgrJloCwSM6f22-abNbvKee4I/s1600/custom_rgb_b.png);
}
#colorpickerHolder2 .colorpicker_hsb_s {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA_YcvgDeUf-KhTDAJPcpklpAhbszLd39v0rd8byAo7rq455Ph9WP6d-aVmIjS1uFKcdo63_QC7tirrRlO7m1LVUJn2P0O5SHKfFQ37IQ_721uvRSWN-fD7KQDSppKueHVBsql0Kdx-k8/s1600/custom_hsb_s.png);
   display: none;
}
#colorpickerHolder2 .colorpicker_hsb_h {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifqG4T1f75hi8IugUpjxW4L63oqPkjVhHNEZrmcM2wQDlfqXEw326aeYQE4XF0p11oN_DCeX4qIH021T2eRxp9HiXLAca4VS_GlLd5g4_ZGCIQlzNxLZ8slcKLbZTWcqsOLKP9-SGgFx0/s1600/custom_hsb_h.png);
   display: none;
}
#colorpickerHolder2 .colorpicker_hsb_b {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaDX5rfYQlrsKYBx5FkLYL4Zj-luzdbnBvGl2MHpfJIiFv0kJqdvx0TbJTmgxaxNTL4gcWzP4i6XmOf5UoOG59uMWdCNBKrdQzxk2xFpQmUs0SCxy2rFjhanUmrwrtItOisjMgHPckVDw/s1600/custom_hsb_b.png);
   display: none;
}
#colorpickerHolder2 .colorpicker_submit {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulYuu1qKOmMnS2erLJVmW53JuPaLLI13QOqWkdQEtj7dRvy3v4gOJOwmVAE1OFKoVj_dr8e0-GQa1tScHqGaJ5d14GufV6rvNHr3xhLdPuP4FjfYS4jjw85R_eisxHj-FnB-xESQ6HbI/s1600/custom_submit.png);
}
#colorpickerHolder2 .colorpicker input {
   color: #778398;
}
#customWidget {
   position: relative;
   height: 36px;
}

.colorpicker {
   width: 356px;
   height: 176px;
   overflow: hidden;
   position: absolute;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWQ4lgjax60WKmi0oD5Hm5LhLcrDNlnMk6ncGC3cZixfbI6hyc2Q1MV2LPxi6N0SdEzlcHCu7vSToLQGRoZPTdgkXQyeiyp7EYk-uJGn16lLCnr070T5o0MYF1GTVuhnzd9r66VBQDg4/s1600/colorpicker_background.png);
   font-family: Arial, Helvetica, sans-serif;
   display: none;
}
.colorpicker_color {
   width: 150px;
   height: 150px;
   left: 14px;
   top: 13px;
   position: absolute;
   background: #f00;
   overflow: hidden;
   cursor: crosshair;
}
.colorpicker_color div {
   position: absolute;
   top: 0;
   left: 0;
   width: 150px;
   height: 150px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUoeBgGRpTG2hlzJ7qHoKJeX1BCSxs90d7AdQTd8ErDdpo7sF_QBsRavfAfpAs63t_t2t-0gmXMawxnO40JugJjTpvdKnee-HLF4X-5-owIPDCnDo7jWypxHOumVga5u6NMM2NtKfdqHU/s1600/colorpicker_overlay.png);
}
.colorpicker_color div div {
   position: absolute;
   top: 0;
   left: 0;
   width: 11px;
   height: 11px;
   overflow: hidden;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI5hgL5Ou2KxqwegtvQXI9ips9EO7joeJ6jSdxLPclSyTVWIx7enX1cm-hhgnip6S0BlwcfAmGuvwwSmr4WhLuO6E_o2iuk5iprNsUH-qypXqtEKlSJMbbqbh-0IZMGM4L-gZ6W-T00uo/s1600/colorpicker_select.gif);
   margin: -5px 0 0 -5px;
}
.colorpicker_hue {
   position: absolute;
   top: 13px;
   left: 171px;
   width: 35px;
   height: 150px;
   cursor: n-resize;
}
.colorpicker_hue div {
   position: absolute;
   width: 35px;
   height: 9px;
   overflow: hidden;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicsB-7O8y3PqcgPSokryCwMj87h7YvvwNtiWWe93acMxQE7lE0gthuQa4CAuxiBoWQ2AXA7AxhG-WcDmjTke2d0R3RkfR0__Xf3pg_tO8tlOzCIqT2WTFnn5lr9aiKrxRNCnE4yFDGJfo/s1600/colorpicker_indic.gif) left top;
   margin: -4px 0 0 0;
   left: 0px;
}
.colorpicker_new_color {
   position: absolute;
   width: 60px;
   height: 30px;
   left: 213px;
   top: 13px;
   background: #f00;
}
.colorpicker_current_color {
   position: absolute;
   width: 60px;
   height: 30px;
   left: 283px;
   top: 13px;
   background: #f00;
}
.colorpicker input {
   background-color: transparent;
   border: 1px solid transparent;
   position: absolute;
   font-size: 10px;
   font-family: Arial, Helvetica, sans-serif;
   color: #898989;
   top: 4px;
   right: 11px;
   text-align: right;
   margin: 0;
   padding: 0;
   height: 11px;
}
.colorpicker_hex {
   position: absolute;
   width: 72px;
   height: 22px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMW5URIIi1MWFDI0CZnvuqnNkr7T_KQY_WkpzS7YB2i3bu9DD6vyH0MdsqQanVMz6t6Hn80CI88YHaIfUrHdumv5hRE9dThFKSUzI5g8wo4zuh54n-z2vwRItpKsr1WYwmbC0lGHg9zAo/s1600/colorpicker_hex.png) top;
   left: 212px;
   top: 142px;
}
.colorpicker_hex input {
   right: 6px;
}
.colorpicker_field {
   height: 22px;
   width: 62px;
   background-position: top;
   position: absolute;
}
.colorpicker_field span {
   position: absolute;
   width: 12px;
   height: 22px;
   overflow: hidden;
   top: 0;
   right: 0;
   cursor: n-resize;
}
.colorpicker_rgb_r {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5q4EboYxWnEZaLT7yY50TEKf2ddihyphenhyphenr_LZ8CS183_aYgCOJVBhaQ9ppS98j67hER1MysU97u6nKNdxLXomGOEw8r8ojOPVK1X4ZFSgCT_e-F371cwUGER_W-tV51PmtKP9Y17SN8WcY/s1600/colorpicker_rgb_r.png);
   top: 52px;
   left: 212px;
}
.colorpicker_rgb_g {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD3OktCICj-3fUrcFH7f3xHBEaRgm0AN9jNa1qyjRk-VijGVQk3ewlnecvZ2jA2-YiuJMII3ABXJDI_w88t-Jj5gs-ZoCEUFzCwOgNhlK_ZrX-0GW1quz5lXxaWWwSkRV8ssJ2iscEkUo/s1600/colorpicker_rgb_g.png);
   top: 82px;
   left: 212px;
}
.colorpicker_rgb_b {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqYahPFgqjNoF5zqtg7EejlKkAu6ikPy3Snfx9l7_acR3wSYDy5B8z_tTLY0F04XI_8l_RjEAn3o_mNU6J4pFCNQ862EAOwDdq8yeEWuJW0C7Gah2ExmxwmpA8WnRxTQpD86w4djRGJc0/s1600/colorpicker_rgb_b.png);
   top: 112px;
   left: 212px;
}
.colorpicker_hsb_h {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_6zgViu5f-iriPm14shCdhuRzE6rA4zPMGT_4GJOnf0eyZCuXc2WGdLXAK_9u0XRPyuFrHnOo5jvTG0W-aZviztXfkxsrkQQfkzlBGdPVliZqMvgJfBWMGx58D7Jyz1l2smp4F_lipU/s1600/colorpicker_hsb_h.png);
   top: 52px;
   left: 282px;
}
.colorpicker_hsb_s {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh9krboSDmVRA_80y5Rfpj-pGM62eYHYCqsiheU5z0zPYFVKu_53yL68xzOjdGl34Bc8c6zjZE4NtlD8MYSvSckQatvUD0NBP0JX3M0O-7JwRrRYEANVW7Z5prddzD1WULpkqwVKw3Z6E/s1600/colorpicker_hsb_s.png);
   top: 82px;
   left: 282px;
}
.colorpicker_hsb_b {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6C1FQ-9BbmLyorkX7AdBDP3Q9GXdaIIUZaqbPKfSCf4qIG3aMeu0m0UScqiNQDrivuVqXc6ByTcBvmrTqee1T9M4_Lh1i8OBHJY1MpvWqYLIABxwI_ayL8pIgOCNWSBAr0GL6GXT9F8I/s1600/colorpicker_hsb_b.png);
   top: 112px;
   left: 282px;
}
.colorpicker_submit {
   position: absolute;
   width: 22px;
   height: 22px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8O_JN_gaJnL30xUcgBIHniK-InfNLMC-hHM9ChXlnn-r_aZ0E6kdEo19KWM41mEqU9EPcQERHXa22MYKZpmMPL7kDMqmqt_dPAarpBlBHj8TtgQFpvVUeUYZI79yVjVTMmCd_bpsx_ms/s1600/colorpicker_submit.png) top;
   left: 322px;
   top: 142px;
   overflow: hidden;
}
.colorpicker_focus {
   background-position: center;
}
.colorpicker_hex.colorpicker_focus {
   background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
   background-position: bottom;
}
.colorpicker_slider {
   background-position: bottom;
}
selanjutnya simpan kode berikut diatas kode </head> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://kangdadang.googlecode.com/files/colorpicker.js"></script>
    <script type="text/javascript" src="http://kangdadang.googlecode.com/files/eye.js"></script>
    <script type="text/javascript" src="http://kangdadang.googlecode.com/files/layout.js"></script>

5.terakhir cara pemanggilannya pada html atau posting, gadget, sesuai keinginan sobat :

<p id="colorpickerHolder"> </p>
<div id="customWidget">
<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
<div id="colorpickerHolder2">
</div>
</div>

<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
<div id="colorSelector"><div style="background-color: #0000ff"></div></div>selesai...............


SELAMAT MENCOBA BOS!!   hasil copy-an lgi hehehehe.......

Komentar :

ada 0 komentar ke “Jquery Color picker”

Posting Komentar

Langganan: Posting Komentar (RSS)

This Blog is proudly powered by Blogger.com | Template by Angga Leo Putra