jsp页面引入调色板、颜色表
jsp页面：
<form>
<input id="fontColor"/>
<div id="colorpanel" style="position:absolute;display:none; width:253px;height:177px;"></div>
</form>
javascript脚本：
$(document).ready(function() {
initPanel(); //初始化调色板
$("#fontColor").bind("click", OnDocumentClick); //fontColor：调用调色板的控件ID
});
js内容：
var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF','FF00FF');
var current = null
//初始化调色板
function initPanel() {
var colorTable = ''
for (i = 0; i < 2; i++) {
for (j = 0; j < 6; j++) {
colorTable = colorTable + '<tr style="height:12px;">'
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#000000">'
if (i == 0) {
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '">'
}
else {
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#' + SpColorHex[j] + '">'
}
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#000000">'
for (k = 0; k < 3; k++) {
for (l = 0; l < 6; l++) {
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '">'
}
}
}
}
colorTable = '<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;" bordercolor="000000">'
+ '<tr height="30px"><td colspan=21 bgcolor=#cccccc>' + '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+ '<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
+ '<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td><td align="right" width="100%"><span id="spnClose" style="cursor:hand;">Ⅹ</span> </td></tr></table></td></table>'
+ '<table width=253 id="tblColor" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:hand;">'
+ colorTable + '</table>';
$("#colorpanel").html(colorTable);
$("#tblColor").bind("mouseover", doOver);
$("#tblColor").bind("mouseout", doOut);
$("#tblColor").bind("click", doclick);
$("#spnClose").bind("click", function(){
$("#colorpanel").css("display","none"); }
);
}
//鼠标覆盖事件
function doOver(event) {
var e = $.event.fix(event);
var element = e.target;
if ((element.tagName == "TD") && (current != element)) {
if (current != null) { current.style.backgroundColor = current.style.background; }
element.style.background = element.style.backgroundColor;
$("#DisColor").css("backgroundColor",
element.style.backgroundColor);
var clr = element.style.backgroundColor.toUpperCase();
if (clr.indexOf('RGB') > -1) {
clr = clr.substring(clr.length - 18);
clr = rgb2hex(clr);
}
$("#HexColor").val(clr);
//element.style.backgroundColor = "white";
current = element;
}
}
//鼠标移开事件
function doOut(event) {
if (current != null) current.style.backgroundColor =
current.style.background.toUpperCase();
}
//鼠标点击事件
function doclick(event) {
var e = $.event.fix(event);
if (e.target.tagName == "TD") { var clr = e.target.style.background;
clr = clr.toUpperCase();
if (targetElement) {
if (clr.indexOf('RGB') > -1) {
clr = clr.substring(clr.length - 18);
clr = rgb2hex(clr);
}
targetElement.value = clr;
}
DisplayClrDlg(false, e);
return clr;
}
}
var targetElement = null;
function OnDocumentClick(event) {
var e = $.event.fix(event);
var srcElement = e.target;
// if (srcElement.alt == "clrDlg") {
targetElement = srcElement;
DisplayClrDlg(true, e);
// }
// else {
// while (srcElement && srcElement.id != "colorpanel") {
// srcElement = srcElement.parentElement;
// }
// if (!srcElement) {
// DisplayClrDlg(false, e);
// }
// }
}
//显示颜色对话框
//display 决定显示还是隐藏
//自动确定显示位置
function DisplayClrDlg(display, event) {
var clrPanel = $("#colorpanel");
if (display) {
var left = document.body.scrollLeft + event.clientX;
var top = document.body.scrollTop + event.clientY;
if (event.clientX + clrPanel.width > document.body.clientWidth) {
//对话框显示在鼠标右方时会出现遮挡将其显示在鼠标左方
left -= clrPanel.width;
}
if (event.clientY + clrPanel.height > document.body.clientHeight) {
//对话框显示在鼠标下方时会出现遮挡将其显示在鼠标上方
top -= clrPanel.height;
}
clrPanel.css("left", left);
clrPanel.css("top", top);
clrPanel.css("display", "block");
} else {
clrPanel.css("display", "none");
}
}
//RGB转十六进制颜色值
function zero_fill_hex(num, digits) {
var s = num.toString(16);
while (s.length < digits)
s = "0" + s;
return s;
}
function rgb2hex(rgb) {
if (rgb.charAt(0) == '#')
return rgb;
var n = Number(rgb);
var ds = rgb.split(/\D+/);
var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]);
return "#" + zero_fill_hex(decimal, 6);
}
jsp页面引入调色板、颜色表相关推荐
- 解决/WEB-INF目录下的jsp页面引入webRoot下的Js、css和图片的问题
通常把jsp页面放在webRoot的/WEB-INF下可以防止访问者直接输入页面. 而webRoot的/WEB-INF下的页面是受保护的,用户无法通过形如http://localhost:8080/t ...
- 一个JSP页面引入另一个JSP页面
JSP文件中引入另一个JSP JSP include 指令 JSP include 动作 静态导入与动态导入 1.什么是静态导入 2.什么是动态导入 总结 指令与动作: 静态导入和动态导入区别 附:当 ...
- html JSP 富文本案例,JSP页面引入Ueditor富文本编辑器！
最近做项目时,需要用到富文本编辑器,使用了百度的Ueditor编辑器,因此 在这和大家分享下 工具/原料 myeclipse,ueditor 方法/步骤 从官网上 地开级还思层似未屏别.域一插式近址发 ...
- 添加与编辑共用一个jsp页面时，控制按钮的显示与隐藏
场景 添加与编辑共用一个jsp页面,后台action传过来 op参数,如果是edit则执行编辑,如果是add,则执行添加. 如果是编辑页面则显示充值按钮,如果是添加页面则不显示. 实现 后台actio ...
- 在jsp中引入jQuery
在jsp页面引入JQuery插件,主要的是引入的路径问题,下面有三种方式: 1 .在WetRoot下直接建立jsp文件,将jquery-1.7.js放入一个新建的文件夹下:如图: 此时在index.j ...
- JSP中的taglib标签如何让JSP页面使用标签
taglib指令的作用是在JSP页面中,将标签库描述符文件引入到该页面中,并设置前缀,而去利用标签的前缀去使用标签库表述文件中的标签. 就用个例子具体说一下步骤. 例如要创建一个自定义标签: < ...
- 怎么引css样式,jsp怎么引入css样式？
JSP页面引入CSS样式有三种方法,且其优先级不同.具体如下:外部样式,内嵌样式,行内样式.优先级依次增高! 下面给大家具体介绍一下: 1.外部样式 jsp可以在link标签中使用href属性引入cs ...
- jsp中引入css文件不起作用
jsp中引入css文件不起作用 笔者遇到的问题所在是jsp页面引入css文件后,样式无法加载,在SpringMVC的配置文件dispatcherServlet.xml中引入如下代码后解决: <m ...
- jsp页面中实现图片切换显示
今天遇到一个需求,要求要在页面实现一张或多张图片的显示,如果为多张图片时要实现图片切换,于是自己就写了.但是在写的时候发现如果有多个容器都有这个需求的时就很容易造成id冲突(就是在多个div中了),于 ...
- jsp如何引入html样式,jsp怎么引入css样式？
jsp怎么引入css样式?下面本篇文章就来给大家介绍一下jsp引入css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. JSP页面引入CSS样式有三种方法,且其优先级不同 ...
最新文章
- java python算法_用Python，Java和C ++示例解释的排序算法
- 1000行 MySQL 学习笔记，不怕你不会，就怕你不学！
- Centos 5.5下面架设NTP服务器
- OAuth2.0授权码认证流程介绍
- 再赠邓超明（帮别人名字作诗）
- 浙大计算机专硕培养方案,浙江大学硕士研究生培养方案
- You have unstaged changes.
- python小数补0,python用零填充小数
- Kettle定时抽取两个库中的两个表到目标库SYS_OPLOG表
- idea jpa方法 自动提示_Spring Boot的自动配置、Commandline Runner
- python兼职程序员工资-没想到，学会Python即使不做程序员都能月入过万！
- P1164 小A点菜（动态规划背包问题）
- 【图像去噪】基于matlab GUI DCT图像去噪【含Matlab源码 614期】
- 春运前夕探秘动车所里的“动车体检医生”
- 在CAD中容易混淆的概念
- VCC、VDD、VSS等是什么意思
- Excel最强玩法！用Excel做“动态日历表”，让你的好记性更牢固！
- matlab rand 2 3 4,matlab随机函数rand的使用
- 程序员月薪过3万，却感叹活得不如狗，北漂压力太大又不敢辞职
- 广州互联网公司面试地图