动态改变背景颜色的小控件
可以通过样式修改控件的位置及控件大小，可以通过参数指定要改变背景颜色的目标对象，如果不指定，则默认改变body的背景颜色。
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>改变背景颜色的小控件</title>
<style>
<!--
#idContainer{
position:relative;
width:100px;
height:100px;
border:solid 5px #777777;
}
.outerLyr{
background-color:red;
position: absolute;
height:100%;
width: 15%;
z-index: 1;
float:left;
display:inline;
left:10%;
}
.outerLyr1{
background-color:green;
position: absolute;
height:100%;
width: 15%;
z-index: 1;
float:left;
display:inline;
left:40%;
}
.outerLyr2{
background-color:blue;
position: absolute;
height:100%;
width: 15%;
z-index: 1;
float:left;
display:inline;
left:70%;
}
.drag{
position:absolute;
height: 15%;
width: 84%;
z-index: 3;
left:8%;
cursor: hand;
bottom:0px;
background:black;
top:20%;
}
.innerLyr{
background-color: #777777;
position: absolute;
height: 98%;
width: 84%;
z-index: 2;
text-align:center;
left:8%;
top:1%;
}
.barLyr{
background-color: #000000;
position: absolute;
height: 90%;
width: 10%;
z-index: 1;
top:5%;
}
-->
</style>
</head>
<body>
<div id="idContainer"></div>
<div id="idObj" style="position:absolute;left:200px;height:100px;width:100px;height:100px;border:1px solid black;background:white"></div>
<script type="text/javascript">
<!--
var cp = new ColorPalette("idContainer", "idObj");
//-->
</script>
</body>
</html>
在<head>内插入如下JS代码：
<script type="text/javascript">
<!--
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
// 实例化一个对象并调用对象的initialize方法
var Class = {
create : function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
//为对象注册事件
var addEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
// 为对象注销事件
var removeEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
var BindAsEventListener = function(object, fun) {
return function(event) {
return fun.call(object, (event || window.event));
}
};
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
};
var ColorPalette = Class.create();
ColorPalette.prototype = {
initialize : function(idContainer, idObj) {
this.container = $(idContainer) || null;
this.obj = $(idObj) || document.body;
if (this.container == null) return;
this.container.style.position = "relative";
var outerLyr = '<div id="rOuterLyr" class="outerLyr"><div id="rDrag" class="drag"></div><div id="innerLyr" class="innerLyr"><div id="barLyr" class="barLyr"></div></div></div>';
var outerLyr1 = '<div id="gOuterLyr" class="outerLyr1"><div id="gDrag" class="drag"></div><div id="innerLyr1" class="innerLyr"><div id="barLyr1" class="barLyr"></div></div></div>';
var outerLyr2 = '<div id="bOuterLyr" class="outerLyr2"><div id="bDrag" class="drag"></div><div id="innerLyr2" class="innerLyr"><div id="barLyr2" class="barLyr"></div></div></div>';
this.container.innerHTML = outerLyr + outerLyr1 + outerLyr2;
var rDrag = $("rDrag"), gDrag = $("gDrag"), bDrag = $("bDrag");
var rOuterLyr = $("rOuterLyr"), gOuterLyr = $("gOuterLyr"), bOuterLyr = $("bOuterLyr");
this.fM = BindAsEventListener(this, this.move);
this.fS = Bind(this, this.stop);
// 计算并设置初始化时的颜色值
var rVal = Math.round(rDrag.offsetTop * 255 / (rOuterLyr.offsetHeight - rDrag.offsetHeight));
var gVal = Math.round(gDrag.offsetTop * 255 / (gOuterLyr.offsetHeight - gDrag.offsetHeight));
var bVal = Math.round(bDrag.offsetTop * 255 / (bOuterLyr.offsetHeight - bDrag.offsetHeight));
this.r = this.getHex(rVal);
this.g = this.getHex(gVal);
this.b = this.getHex(bVal);
this.obj.style.backgroundColor = "#" + this.r + this.g + this.b;
// 注册事件
this.drag = rDrag;
this.outerLyr = rOuterLyr;
this.flag = 1; // 标记是修改r,g,b的值(1:r;2:g;3:b)
var oThis = this;
addEventHandler(rDrag, "mousedown", function(event) {oThis.drag = rDrag; oThis.outerLyr = rOuterLyr; oThis.flag = 1; oThis.start(event || window.event);});
addEventHandler(gDrag, "mousedown", function(event) {oThis.drag = gDrag; oThis.outerLyr = gOuterLyr; oThis.flag = 2; oThis.start(event || window.event);});
addEventHandler(bDrag, "mousedown", function(event) {oThis.drag = bDrag; oThis.outerLyr = bOuterLyr; oThis.flag = 3; oThis.start(event || window.event);});
},
start : function(oEvent) {
this.y = this.drag.offsetTop;
this.yPos = oEvent.clientY;
this.dragHeight = this.drag.offsetHeight;
this.outerLyrHeight = this.outerLyr.offsetHeight;
addEventHandler(document, "mousemove", this.fM);
addEventHandler(document, "mouseup", this.fS);
},
move : function(oEvent) {
var iDrag = this.drag, oldY = iDrag.style.pixelTop, iHeight = this.outerLyrHeight - this.dragHeight;
var iPos = this.y + oEvent.clientY - this.yPos;
if (iPos > oldY) {
this.dir = -1; // 向下
} else {
this.dir = 1; // 向上
}
if (iPos <= 0 && this.dir == 1) {
iDrag.style.pixelTop = 0;
this.dir = 1;
} else if (iPos >= iHeight && this.dir == -1) {
iDrag.style.pixelTop = iHeight;
this.dir = -1;
} else {
iDrag.style.pixelTop = iPos;
}
this.changeColor();
},
changeColor : function() {
var curHeight = this.drag.style.pixelTop, totalHeight = this.outerLyrHeight - this.dragHeight;
var value = Math.round((curHeight * 255) / totalHeight);
if (this.flag == 1) {
this.r = this.getHex(value);
} else if (this.flag == 2) {
this.g = this.getHex(value);
} else if (this.flag == 3) {
this.b = this.getHex(value);
}
this.obj.style.backgroundColor = "#" + this.r + this.g + this.b;
},
getHex : function(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else {
var str = "0" + i.toString(16);
return str.substring(str.length - 2);
}
},
stop : function() {
removeEventHandler(document, "mousemove", this.fM);
removeEventHandler(document, "mouseup", this.fS);
}
};
//-->
</script>
分享到：
相关推荐
在Visual Studio 2015 (VS2015) 中使用MFC（Microsoft Foundation Classes）进行Windows应用程序开发时，有时我们需要对用户界面中的控件进行定制，比如改变`static`文本控件和`edit`编辑框的字体颜色与背景颜色。...
同时，通过调用`SetBkColor`和`SetTextColor`函数来改变文本颜色和背景颜色，以达到与主窗口背景颜色一致的效果。 在实际编程时，需要注意的是，自定义颜色的处理必须考虑到不同主题和高对比度模式下的适配，以确保...
在编程领域，特别是涉及到用户界面（UI）设计时，改变控件的背景颜色是常见的需求。控件是用户与应用程序交互的基本元素，如按钮、文本框、列表框等。在这个场景中，我们关注的是“LISTBOX”，即列表框，一个可以...
在Microsoft Foundation Classes (MFC)库中，动态修改对话框（Dialog Box）的背景颜色是一项常见的自定义化任务，这可以提升用户界面的视觉效果和交互体验。在本篇文章中，我们将深入探讨如何在MFC应用程序中实现这...
改变EditControl控件的背景颜色 在参数文本框中输入数值，如果当前值为奇数，则状态文本框背景色为绿色，文本内容为在线；否则，状态文本框背景色为红色，文本内容为离线。默认情况下，状态文本框背景色为红色，文本...
// 修改背景颜色 calendar.BackColor = Color.LightGray; // 修改文本颜色 calendar.ForeColor = Color.Black; // 修改选中日期的颜色 calendar.SelectionBackColor = Color.Yellow; calendar.SelectionForeColor ...
`www.pudn.com.txt`可能是源代码下载的来源信息，而"改变树控件背景颜色的VC源代码"很可能是包含实际实现的源代码文件名。要获取完整的源代码实现，你需要查看下载的文件内容。通常，源代码会包含创建`CBrush`对象、...
2. **清除背景**：使用DC的FillRect函数，结合所需的背景颜色，覆盖掉原有的背景。 3. **绘制列表项**：对于list控件的每一项，都需要手动绘制。可以使用DrawItem函数，根据需要设置字体颜色、背景色以及高亮状态。...
可以通过`SetItem`函数设置`HDITEM`的`hbmBack`成员来指定背景位图，或者直接操作`Header Control`的DC（设备上下文）来改变颜色。 4. **绘制表头**：可能需要重写`OnDrawItem`和`OnDrawHeaderCtrl`方法，以便在`...
CListCtrl控件背景颜色网格色彩，用CListCtrl来显示数据比较方便，有时候我们需要标注某一列或某一个单元格的背景和字体颜色，或者需要改变一下行高和字体大小，CListCtrl要改变这些并不是很方便。本文将介绍如何...
在Windows应用程序开发中，有时我们需要自定义列表控件的外观，如改变头（header）的背景颜色、字体大小等，以满足用户界面的个性化需求。在标题提到的问题中，我们关注的是如何正确且无内存泄露地实现这些设置。 ...
在本文中，我们将深入探讨如何在C++编程环境中，特别是在MFC（Microsoft Foundation Classes...改变对话框的背景颜色和集成日历控件只是其中的一部分。随着你对MFC的深入理解，你将能够创建更多复杂且用户友好的界面。
这种方法允许你对按钮的外观进行高度自定义，而不仅仅是修改字体颜色和背景颜色。 总结一下，自定义CButton控件的字体颜色和背景颜色，需要以下步骤： 1. 创建一个继承自CButton的新类，如CTestBtn。 2. 在新类中...
当我们需要自定义Edit控件的外观，比如改变其背景颜色或字体颜色时，可以使用MFC提供的API函数和消息响应机制。下面将详细介绍如何实现这个功能。 首先，我们需要了解Edit控件的基本属性。在MFC中，Edit控件通常是...
要实现颜色变化，我们需要编写一段代码，当布尔控件的状态改变时，能够即时更新其背景色。这涉及到LabVIEW中的事件结构和条件判断。事件结构允许程序响应特定事件，如用户点击控件，而条件判断则根据布尔值来决定...
颜色可以以RGB、HSV或HEX等模式表示，通过调整红色、绿色和蓝色的值或色调、饱和度和亮度来改变颜色。在Winform中，我们可以使用`ColorDialog`类来弹出一个标准的颜色选择对话框，或者自定义控件来实现更复杂的颜色...
// 设置背景颜色 // 如果需要设置背景图片，可以使用CDC的位图操作 CBitmap* pBitmap = GetBackgroundBitmap(); // 获取背景图片 CDC memDC; memDC.CreateCompatibleDC(pDC); CBitmap* pOldBitmap = memDC....
在本案例中，我们讨论的主题是如何改变按钮控件的背景颜色。 MFC中的CButton类是Windows API中的BUTTON控件的面向对象封装。默认情况下，CButton控件的颜色遵循系统设定，但有时我们可能需要自定义其外观，比如改变...
对于特定的控件，可以进一步细化颜色设置，例如改变某个按钮的字体颜色或者背景颜色。这通常通过在`OnCtlColor`函数中判断控件ID来实现： ```cpp HBRUSH CSettingDlg::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT ...
本篇文章将详细讲解如何在MFC框架下扩展编辑框控件（CEdit）的功能，包括修改编辑框的背景颜色、文字格式以及边框颜色。 首先，我们需要创建一个自定义的编辑框类，继承自MFC的CEdit类。这通常通过创建一个新的...