Categories: JavaScript

[JS] Color Picker Script

Color Picker Script
網站:http://www.flooble.com/scripts/colorpicker.php

用途:在有些時候網頁需要選取顏色的時候需要用到的script

下午做了 FMP的修改,看到jw的作者的播放器設定程式中看到選顏色的功能,由於Script 並不大,所以打算整合到下個fmp的版本上

colorpicker

jw 修改的Color Picker Script 如下:
http://www.jeroenwijering.com/embed/colorpicker.js

作者主要是省略了 document.getElementById 這個 標準擷取id的 script 改為, gid 函式進行處理

使用方法如下

<a class="pick" id="欄位ID+pick" href="javascript:pickColor('欄位ID');"></a>

例如我有一個欄位叫做 backcolor ,寫法如下:

<input id="backcolor" type="text" />
<a class="pick" id="backcolorpick" href="javascript:pickColor('backcolor');"></a>

另外定義一下css

.pick {
border-left: 1px solid #444;
border-top: 1px solid #444;
border-right: 1px solid #BBB;
border-bottom: 1px solid #BBB;
margin:0 8px;
padding: 0 6px;
}
#colorpicker {
border-collapse: collapse;
position: absolute;
left: 300px;
top: 600px;
background-color: #FFF;
border-top: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right:1px solid #999;
border-bottom:1px solid #999;
display: none;
padding:5px;
}
#colorpicker a {
display: block;
width: 15px;
height: 15px;
margin-bottom: 1px;
margin-right: 1px;
font-size:10px;
}
Mesak

我是米薩克,想了解更多可以點選  關於我 

Disqus Comments Loading...
Share
Published by
Mesak
Tags: javascript

Recent Posts

[教學] 利用 n8n 建立 LINE 聊天機器人

n8n 有多厲害,這邊就不贅述...

3 週 ago

[開箱] IROCKS K103R 熱插拔無線機械式鍵盤

許久沒有開箱了,近年鍵盤的規格...

3 個月 ago

[開箱] IROCKS-K85R 無線機械鍵盤

最近一直想要組一把 無線的 9...

1 年 ago

[開箱] IROCKS K75M 銀色上蓋機械式鍵盤

IROCKS K75M 這款鍵...

2 年 ago

[開箱] IROCKS M31E 粉紅色光學遊戲滑鼠

喜歡粉紅色周邊產品的朋友,有一...

2 年 ago