原文：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1530264.html#2580430
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
</style>
</head>
<body bgcolor="#D5F3F4">
<div id="result"></div>
<script type="text/javascript">
var addSheet = function(){
var doc,cssCode;
if(arguments.length == 1){
doc = document;
cssCode = arguments[0];
}else if(arguments.length == 2){
doc = arguments[0];
cssCode = arguments[1];
}else{
alert("addSheet函数最多接受两个参数!");
}
var headElement = doc.getElementsByTagName("head")[0];
var styleElements = headElement.getElementsByTagName("style");
if(styleElements.length == 0){/*如果不存在style元素则创建*/
if(!+"\v1"){ //ie
doc.createStyleSheet();
}else{
var tempStyleElement = doc.createElement(‘style‘);//w3c
tempStyleElement.setAttribute("type", "text/css");
headElement.appendChild(tempStyleElement);
}
}
var styleElement = styleElements[0];
var media = styleElement.getAttribute("media");
if(media != null && !/screen/.test(media.toLowerCase()) ){
styleElement.setAttribute("media","screen");
}
if(!+"\v1"){ //ie
styleElement.styleSheet.cssText += cssCode;
}else if(/a/[-1]==‘a‘){
styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加样式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var ColorPicker = Class.create();//我们的富文本编辑器类
ColorPicker.prototype = {
initialize:function(options){
this.setOptions(options);
this.drawPicker(this.options.textfield_id);
},
setOptions:function(options){
this.options = { //这里集中设置默认属性
id:‘colorpicker‘+ new Date().getTime(),
textfield_id:null//用于textarea的ID,也就是我们的必选项
}
extend(this.options, options || {});//这里是用来重写默认属性
},
ID:function(id){
return document.getElementById(id)
},//getElementById的快捷方式
TN:function(tn){
return document.getElementsByTagName(tn)
},//getElementsByTagName的快捷方式
CE:function(s){
return document.createElement(s)
},//createElement的快捷方式
hide:function(el){
el.style.display = ‘none‘;
},
show:function(el){
el.style.display = ‘block‘;
},
//用于生成颜色选择器的具体内容
colorPickerHtml : function(){
var _hex = [‘FF‘, ‘CC‘, ‘99‘, ‘66‘, ‘33‘, ‘00‘];
var builder = [];
// 呈现一个颜色格
var _drawCell = function(builder, red, green, blue){
builder.push(‘<td bgcolor="‘);
builder.push(‘#‘ + red + green + blue);
builder.push(‘" unselectable="on"></td>‘);
};
// 呈现一行颜色
var _drawRow = function(builder, red, blue){
builder.push(‘<tr>‘);
for (var i = 0; i < 6; ++i) {
_drawCell(builder, red, _hex[i], blue)
}
builder.push(‘</tr>‘);
};
// 呈现六个颜色区之一
var _drawTable = function(builder, blue){
builder.push(‘<table class="cell" unselectable="on">‘);
for (var i = 0; i < 6; ++i) {
_drawRow(builder, _hex[i], blue)
}
builder.push(‘</table>‘);
};
//开始创建
builder.push(‘<table><tr>‘);
for (var i = 0; i < 3; ++i) {
builder.push(‘<td>‘);
_drawTable(builder, _hex[i]);
builder.push(‘</td>‘);
}
builder.push(‘</tr><tr>‘);
for (var i = 3; i < 6; ++i) {
builder.push(‘<td>‘);
_drawTable(builder, _hex[i])
builder.push(‘</td>‘);
}
builder.push(‘</tr></table>‘);
builder.push(‘<table id="color_result"><tr><td id="color_view"></td><td id="color_code"></td></tr></table>‘);
return builder.join(‘‘);
},
addEvent:function(el, type, fn ) {
if(!+"\v1") {
el[‘e‘+type+fn]=fn;
el.attachEvent( ‘on‘+type, function() {
el[‘e‘+type+fn]();
} );
}else{
el.addEventListener( type, fn, false );
}
},
drawPicker:function(id){
var $ = this,
textfield = $.ID(id),
colorPicker = $.CE("div");
colorPicker.className = "colorpicker";
colorPicker.innerHTML = $.colorPickerHtml();
textfield.parentNode.insertBefore(colorPicker,null);
$.hide(colorPicker);
$.addEvent(textfield,‘focus‘,function(){
textfield.style.position = ‘relative‘;
$.show(colorPicker);
var l = textfield.offsetLeft + ‘px‘,
t = (textfield.clientHeight + textfield.offsetTop)+ ‘px‘;
if(/msie|MSIE 6/.test(navigator.userAgent)){
var iframe = $.CE("<iframe id=‘picker_mask‘ style=‘left:"+l
+";width:220px;filter:mask();position:absolute;"+";top:"+t
+"height:180px;z-index:1;‘></iframe>");//z-index不能为负数
textfield.insertAdjacentElement(‘afterEnd‘,iframe);
}
colorPicker.style.left =l ;
colorPicker.style.top = t ;
})
$.addEvent(colorPicker,‘mouseover‘,function(){
var e = arguments[0] || window.event,
td = e.srcElement ? e.srcElement : e.target,
nn = td.nodeName.toLowerCase(),
colorView = $.ID(‘color_view‘),
colorCode = $.ID(‘color_code‘);
if( ‘td‘ == nn){
colorView.style.backgroundColor = td.bgColor;
!+"\v1"? (colorCode.innerText = td.bgColor):(colorCode.innerHTML = td.bgColor);
}
});
$.addEvent(colorPicker,‘click‘,function(){
var e = arguments[0] || window.event,
td = e.srcElement ? e.srcElement : e.target,
nn = td.nodeName.toLowerCase();
if(nn == ‘td‘){
textfield.value = td.bgColor;
$.hide(colorPicker);
var iframe = $.ID("picker_mask");
iframe && iframe.parentNode.removeChild(iframe);
}
});
addSheet(‘ div.colorpicker {display:none;position:absolute;width:216px;border:2px solid #c3c9cf;background:#f8f8f8;} div.colorpicker table{border-collapse:collapse;margin:0;padding:0;width:100%;} div.colorpicker .cell td{height:12px;width:12px;} div.colorpicker table td {padding:0!important;} #color_result{width:216px;} #color_view{width:110px;height:25px;}‘);
}
}
window.onload = function(){
new ColorPicker({textfield_id:"color"});
}
</script>
<input id="color" type="text"><br />
<select>
<option>
看能否挡住！
</option>
</select><br />
<input type="password" value="" />
</body>
</html>
时间： 2024-10-21 22:43:00