<TD height=35 align=right>颜色:</TD> <TD><INPUT id=tcolor class=iColorPicker style="BACKGROUND-COLOR: #39b778" value=#39b778 name=tcolor> <A onclick="iColorShow('tcolor','icp_tColor1')" id=icp_tColor1 href="javascript:void(null)"><IMG align=absMiddle src="/ngcgpro/images/color.png"> </A></TD>
iColorPicker.js:
/*Copyright(c)2009,www.supersite.me*/var imageUrl = '../../images/color.png'; function iColorShow(id, id2) { var eICP = jQuery("#" + id2).position(); jQuery("#iColorPicker").css({ 'top' : eICP.top + (jQuery("#" + id).outerHeight()) + "px", 'left' : (eICP.left) +120+ "px", 'position' : 'absolute' }).fadeIn("fast"); jQuery("#iColorPickerBg").css({ 'position' : 'fixed', 'top' : 0, 'left' : 0, 'width' : '100%', 'height' : '100%' }).fadeIn("fast"); var def = jQuery("#" + id).val(); jQuery('#colorPreview span').text(def); jQuery('#colorPreview').css('background', def); jQuery('#color').val(def); var hxs = jQuery('#iColorPicker'); for (i = 0; i < hxs.length; i++) { var tbl = document.getElementById('hexSection' + i); var tblChilds = tbl.childNodes; for (j = 0; j < tblChilds.length; j++) { var tblCells = tblChilds[j].childNodes; for (k = 0; k < tblCells.length; k++) { jQuery(tblChilds[j].childNodes[k]).unbind().mouseover( function(a) { var aaa = "#" + jQuery(this).attr('hx'); jQuery('#colorPreview').css('background', aaa); jQuery('#colorPreview span').text(aaa) }).click(function() { var aaa = "#" + jQuery(this).attr('hx'); jQuery("#" + id).val(aaa).css("background", aaa); jQuery("#iColorPickerBg").hide(); jQuery("#iColorPicker").fadeOut(); jQuery(this) }) } } } } this.iColorPicker = function() { jQuery("input.iColorPicker") .each( function(i) { if (i == 0) { jQuery(document.createElement("div")) .attr("id", "iColorPicker") .css('display', 'none') .html( '<img onclick="colseColorDiv()" src="'+ctxPath+'/images/no.png"/><table class="pickerTable" id="pickerTable0"><thead id="hexSection0"><tr><td style="background:#f00;" hx="f00"></td><td style="background:#ff0" hx="ff0"></td><td style="background:#0f0" hx="0f0"></td><td style="background:#0ff" hx="0ff"></td><td style="background:#00f" hx="00f"></td><td style="background:#f0f" hx="f0f"></td><td style="background:#fff" hx="fff"></td><td style="background:#ebebeb" hx="ebebeb"></td><td style="background:#e1e1e1" hx="e1e1e1"></td><td style="background:#d7d7d7" hx="d7d7d7"></td><td style="background:#cccccc" hx="cccccc"></td><td style="background:#c2c2c2" hx="c2c2c2"></td><td style="background:#b7b7b7" hx="b7b7b7"></td><td style="background:#acacac" hx="acacac"></td><td style="background:#a0a0a0" hx="a0a0a0"></td><td style="background:#959595" hx="959595"></td></tr><tr><td style="background:#ee1d24" hx="ee1d24"></td><td style="background:#fff100" hx="fff100"></td><td style="background:#00a650" hx="00a650"></td><td style="background:#00aeef" hx="00aeef"></td><td style="background:#2f3192" hx="2f3192"></td><td style="background:#ed008c" hx="ed008c"></td><td style="background:#898989" hx="898989"></td><td style="background:#7d7d7d" hx="7d7d7d"></td><td style="background:#707070" hx="707070"></td><td style="background:#626262" hx="626262"></td><td style="background:#555" hx="555"></td><td style="background:#464646" hx="464646"></td><td style="background:#363636" hx="363636"></td><td style="background:#262626" hx="262626"></td><td style="background:#111" hx="111"></td><td style="background:#000" hx="000"></td></tr><tr><td style="background:#f7977a" hx="f7977a"></td><td style="background:#fbad82" hx="fbad82"></td><td style="background:#fdc68c" hx="fdc68c"></td><td style="background:#fff799" hx="fff799"></td><td style="background:#c6df9c" hx="c6df9c"></td><td style="background:#a4d49d" hx="a4d49d"></td><td style="background:#81ca9d" hx="81ca9d"></td><td style="background:#7bcdc9" hx="7bcdc9"></td><td style="background:#6ccff7" hx="6ccff7"></td><td style="background:#7ca6d8" hx="7ca6d8"></td><td style="background:#8293ca" hx="8293ca"></td><td style="background:#8881be" hx="8881be"></td><td style="background:#a286bd" hx="a286bd"></td><td style="background:#bc8cbf" hx="bc8cbf"></td><td style="background:#f49bc1" hx="f49bc1"></td><td style="background:#f5999d" hx="f5999d"></td></tr><tr><td style="background:#f16c4d" hx="f16c4d"></td><td style="background:#f68e54" hx="f68e54"></td><td style="background:#fbaf5a" hx="fbaf5a"></td><td style="background:#fff467" hx="fff467"></td><td style="background:#acd372" hx="acd372"></td><td style="background:#7dc473" hx="7dc473"></td><td style="background:#39b778" hx="39b778"></td><td style="background:#16bcb4" hx="16bcb4"></td><td style="background:#00bff3" hx="00bff3"></td><td style="background:#438ccb" hx="438ccb"></td><td style="background:#5573b7" hx="5573b7"></td><td style="background:#5e5ca7" hx="5e5ca7"></td><td style="background:#855fa8" hx="855fa8"></td><td style="background:#a763a9" hx="a763a9"></td><td style="background:#ef6ea8" hx="ef6ea8"></td><td style="background:#f16d7e" hx="f16d7e"></td></tr><tr><td style="background:#ee1d24" hx="ee1d24"></td><td style="background:#f16522" hx="f16522"></td><td style="background:#f7941d" hx="f7941d"></td><td style="background:#fff100" hx="fff100"></td><td style="background:#8fc63d" hx="8fc63d"></td><td style="background:#37b44a" hx="37b44a"></td><td style="background:#00a650" hx="00a650"></td><td style="background:#00a99e" hx="00a99e"></td><td style="background:#00aeef" hx="00aeef"></td><td style="background:#0072bc" hx="0072bc"></td><td style="background:#0054a5" hx="0054a5"></td><td style="background:#2f3192" hx="2f3192"></td><td style="background:#652c91" hx="652c91"></td><td style="background:#91278f" hx="91278f"></td><td style="background:#ed008c" hx="ed008c"></td><td style="background:#ee105a" hx="ee105a"></td></tr><tr><td style="background:#9d0a0f" hx="9d0a0f"></td><td style="background:#a1410d" hx="a1410d"></td><td style="background:#a36209" hx="a36209"></td><td style="background:#aba000" hx="aba000"></td><td style="background:#588528" hx="588528"></td><td style="background:#197b30" hx="197b30"></td><td style="background:#007236" hx="007236"></td><td style="background:#00736a" hx="00736a"></td><td style="background:#0076a4" hx="0076a4"></td><td style="background:#004a80" hx="004a80"></td><td style="background:#003370" hx="003370"></td><td style="background:#1d1363" hx="1d1363"></td><td style="background:#450e61" hx="450e61"></td><td style="background:#62055f" hx="62055f"></td><td style="background:#9e005c" hx="9e005c"></td><td style="background:#9d0039" hx="9d0039"></td></tr><tr><td style="background:#790000" hx="790000"></td><td style="background:#7b3000" hx="7b3000"></td><td style="background:#7c4900" hx="7c4900"></td><td style="background:#827a00" hx="827a00"></td><td style="background:#3e6617" hx="3e6617"></td><td style="background:#045f20" hx="045f20"></td><td style="background:#005824" hx="005824"></td><td style="background:#005951" hx="005951"></td><td style="background:#005b7e" hx="005b7e"></td><td style="background:#003562" hx="003562"></td><td style="background:#002056" hx="002056"></td><td style="background:#0c004b" hx="0c004b"></td><td style="background:#30004a" hx="30004a"></td><td style="background:#4b0048" hx="4b0048"></td><td style="background:#7a0045" hx="7a0045"></td><td style="background:#7a0026" hx="7a0026"></td></tr></thead><tbody><tr><td style="border:1px solid #000;background:#fff;cursor:pointer;height:60px;-moz-background-clip:-moz-initial;-moz-background-origin:-moz-initial;-moz-background-inline-policy:-moz-initial;" colspan="16" align="center" id="colorPreview"><span style="color:#000;border:1px solid rgb(0, 0, 0);padding:5px;background-color:#fff;font:11px Arial, Helvetica, sans-serif;"></span></td></tr></tbody></table><style>#iColorPicker input{margin:2px}</style>') .appendTo("body"); jQuery(document.createElement("div")).attr("id", "iColorPickerBg").click(function() { jQuery("#iColorPickerBg").hide(); jQuery("#iColorPicker").fadeOut() }).appendTo("body"); jQuery('table.pickerTable td').css({ 'width' : '12px', 'height' : '14px', 'border' : '1px solid #000', 'cursor' : 'pointer' }); jQuery('#iColorPicker table.pickerTable').css({ 'border-collapse' : 'collapse' }); jQuery('#iColorPicker').css({ 'border' : '1px solid #ccc', 'background' : '#333', 'padding' : '5px', 'color' : '#fff', 'z-index' : 9999 }) } jQuery('#colorPreview').css({ 'height' : '50px' }); jQuery(this) .css("backgroundColor", jQuery(this).val()) // .after( // '<a href="javascript:void(null)" id="icp_' // + this.id // + '" onclick="iColorShow(\'' // + this.id // + '\',\'icp_' // + this.id // + '\')"><img src="' // + imageUrl // + '" style="border:0;margin:0 0 0 3px" align="absmiddle" ></a>') }) }; jQuery(function() { iColorPicker() }) //关闭颜色div function colseColorDiv(){ jQuery("#iColorPickerBg").hide(); jQuery("#iColorPicker").fadeOut(); }
相关推荐
javaScript实现的选取颜色web控件
一款强大的js写的颜色选择器控件,有现成的演示demo,一个函数,2行代码。
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 ...22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...
5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。(效果如rongshuxa.com的导航栏目) 5.7 状态栏,title栏的动态效果(例子很多,可以研究一下) 5.8 双击后,网页自动...
5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。(效果如rongshuxa.com的导航栏目) 5.7 状态栏,title栏的动态效果(例子很多,可以研究一下) 5.8 双击后,网页自动滚屏 6...
5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。(效果如rongshuxa.com的导航栏目) 5.7 状态栏,title栏的动态效果(例子很多,可以研究一下) 5.8 双击后,网页自动滚屏 6...
5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿ie菜单的按钮。(效果如rongshuxa.com的导航栏目) 5.7 状态栏,title栏的动态效果(例子很多,可以研究一下) 5.8 双击后,网页自动...
5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿ie菜单的按钮。(效果如rongshuxa.com的导航栏目) 5.7 状态栏,title栏的动态效果(例子很多,可以研究一下) 5.8 双击后,网页自动...
9.37 改变目前选取的选项按钮的颜色... 285 9.38 连动式选项按钮... 286 9.39 选中单选按钮改变网页背景颜色... 288 9.40 检验一个复选框是否选中... 289 9.41 检验一组复选框是否选中... 290 9.42 检验两个复...
SWFUpload并不是拖放式的上传控件,它需要JavaScript和DOM的知识。一些可用的演示展示了它能够完成什么事情以及它是如何完成这些常见的任务。 SWFUpload由4部分组成: 初始化和设置 JavaScript 库: SWFUpload.js...
1、特殊文本的实现 页面的空格以及一些特殊字符需要通过转义字符的方式体现 1、 表示一个空格 2、< 表示 < 3、> 表示 > 4、© 表示© Demo : 1、创建一个页面 02-text.html 2、在页面...
5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。(效果如rongshuxa.com的导航栏目) 5.7 状态栏,title栏的动态效果(例子很多,可以研究一下) 5.8 双击后,网页自动...
9.42、激活JAVASCRIPT打开内部链接 266 9.43、清空手机COOKIES 267 9.44、检查SD卡是否存在并且可以写入 267 9.45、获取SD卡的路径和存储空间 268 9.46、将程序安装到SD卡 268 9.47、创建一个SD映像 269 9.48、查看...
9.42、激活JAVASCRIPT打开内部链接 266 9.43、清空手机COOKIES 267 9.44、检查SD卡是否存在并且可以写入 267 9.45、获取SD卡的路径和存储空间 268 9.46、将程序安装到SD卡 268 9.47、创建一个SD映像 269 9.48、查看...