flex 4.6 自定义Datagrid添加checkbo...-【IE大叔的嘴歪眼斜】之—— ...-类似QQ的提醒框设计方案

当前位置: 编程技术>WEB前端

本页文章导读:

▪flex 4.6 自定义Datagrid添加checkbox\图片等功能本文同步至：http://www.waylau.com/flex-4-6-datagrid-add-checkbox-pic/ ......

▪【IE大叔的嘴歪眼斜】之—— 由hasLayout引发的临床CSS Bug表 IE大叔这嘴歪眼斜的毛病不是一天两天了，集体拉出来测试时候，明明大家都在微笑，就丫一副呲牙咧嘴的......哎，没办法，谁让咱国内市面上都是这种呲牙咧嘴的浏览器呢.....(关注IE678死亡.........

▪类似QQ的提醒框设计方案前一段时间一直在做OA，然后OA中有一个消息提醒的功能，开始的思路是用每隔一段时间访问数据库，看有没有新的消息，有新的消息的话，就用window.showModalDialog显示出来。但是最后发现有一.........

[1]flex 4.6 自定义Datagrid添加checkbox\图片等功能

来源: 互联网发布时间: 2013-11-06

本文同步至：http://www.waylau.com/flex-4-6-datagrid-add-checkbox-pic/

flex 4.6 中的 spark 的Datagrid相比于之前的 mx 有很大不同

实现自定义<s:itemRenderer>详见代码~

<s:DataGrid id="dg" left="14" right="10" top="35" bottom="9" dataProvider="{datagrid_data}">
				<s:columns>
					<s:ArrayList>
						<s:GridColumn   headerText="程序名称" 
									    dataField="name">
							<s:itemRenderer>
								<fx:Component>
									<s:GridItemRenderer>
										<s:HGroup verticalAlign="middle">
											<s:CheckBox id="cbx"/>
											<s:BitmapImage  width="24" height="24" source="{data.pic}"/>
											<s:Label text="{data.name}"/>
										</s:HGroup>
									</s:GridItemRenderer>
								</fx:Component>
							</s:itemRenderer>
						</s:GridColumn>
						<s:GridColumn dataField="date" headerText="更新时间"/>
						<s:GridColumn dataField="version" headerText="版本号"/>
						<s:GridColumn dataField="moduleUrl" headerText="moduleUrl"/>
						<s:GridColumn />
					</s:ArrayList>
				</s:columns>
			</s:DataGrid>

作者：kkkloveyou 发表于2013-3-7 18:25:13 原文链接

阅读：0 评论：0 查看评论

[2]【IE大叔的嘴歪眼斜】之—— 由hasLayout引发的临床CSS Bug表

来源: 发布时间: 2013-11-06

IE大叔这嘴歪眼斜的毛病不是一天两天了，集体拉出来测试时候，明明大家都在微笑，就丫一副呲牙咧嘴的......

哎，没办法，谁让咱国内市面上都是这种呲牙咧嘴的浏览器呢.....(关注IE678死亡速度)

查阅，翻读，摘抄，记录，再逐一实践，总结，终于对他这个臭毛病有了根源上的认识。

hasLayout！

先上定义：

它是IE的特有属性。它决定着一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算组织内容。为了区别这两个概念，渲染引擎采用了hasLayout的属性，true或false，当属性为true时，我们说这个元素触发了布局(Layout)。

具有hasLayout属性的标签：

<html>，<body>
<table>，<tr>，<td>，<td>
<img>
<hr>
<input>，<button>，<select>，<textarea>，<fieldset>，<legend>
<iframe>，<embed>，<object>，<applet>
<marquee>

这个属性存在的意义？

当一个元素对象的layout被激活时候，它和它的子元素的定位和尺寸计算将独立进行，也就是独立布局，因此浏览器会消耗更多的代价来处理拥有layout的元素。为了提高性能，IE整出了个这么个私有属性。

可触发hasLayout的CSS特性：

display: inline-block
height:（除了auto之外任何值）
width:（除了auto之外任何值）
float:（left || right）
position：absolute
writing-mode：tb-rl
zoom:（除了normal之外任何值）

IE7可触发hasLayout的CSS特性：

min-height:（任意值）
min-width:（任意值）
max-height:（除none之外任意值）
max-width:（除none之外任意值）
overflow:（除visible之外任意值，仅用于块级元素）
overflow-x:（除visible之外任意值，仅用于块级元素）
overflow-y:（除visible之外任意值，仅用于块级元素）
position:fixed

再来看看嘴歪眼斜的临床表现：（以下内容均本人亲测）

问题浏览器DEMO解决办法1input[button | submit]未居中IE8bug | fixed添加width2body{overflow:hidden;}没有去掉滚动条IE6/7bug | fixed改成html{overflow:hidden;}3拥有hasLayout的标签有高度IE6/7bug | fixed添加_overflow:hidden;*height:04form>[hasLayout]元素有margin-left时，子元素中的[input | textarea] 出现2×margin-leftIE6/7bug | fixedform > [hasLayout 元素]{margin-left:宽度;}
form div{*margin-left:宽度÷2;}5当子元素有position:relative的时候，父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible;IE6/7bug | fixed给父元素设置position:relative;6列表中混乱的浮动：在list中浮动图片时，图片出现溢出正常位置；或没有list-styleIE8bug | fixed用背景图片替换list-style7th 不会自动继承上级元素的 text-alignIE8bug | fixed给th添加text-align:inherit;8样式(包括link/style/@import(link)) 最多允许个为是：32IE6-8─ 常识99.99%的情况下，不会遇到9PNG图片中的颜色和背景颜色的值相同，但显示不同IE6-7bug | fixed利用 pngcrush 去除图片中的 Gamma profiles10margin:0 auto; 不能让block元素水平居中IE6-8bug | fixed给block元素添加一个width11使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效IE8bug | fixed!important is evil, don’t use it anymore12:first-letter 失效IE6bug | fixed把 :first-letter 移到离{}最近的地方，如 h1, p:first-letter{}，而非 p:first-letter h1{}13Position:absolute元素中，a display:block, 在非:hover时只有文本可点击IE6/7bug | fixed给a添加background, 如果背景透明，使用background:url(/blog_article/‘任何页面中已经缓存的文件链接’/index.html)，不推荐background：url(#)[官方的解决方法]，因为会增加一下HTTP请求14dt, dd, li 背景失效IE6bu

[3]类似QQ的提醒框设计方案

来源: 发布时间: 2013-11-06

前一段时间一直在做OA，然后OA中有一个消息提醒的功能，开始的思路是用每隔一段时间访问数据库，看有没有新的消息，有新的消息的话，就用window.showModalDialog显示出来。但是最后发现有一点地方很不好，就是当我把OA最小化然后在其他的软件或者界面工作的时候，消息提示框弹出来之后就会自动回到OA的界面，这样用户体验会特别的不好。最后在网上找了很久，找到了一个还算可以的办法：用window.createPopup()来实现。我把它封装到了一个js文件中，代码如下：

//本JS文件用于弹出电脑短信提示框
//将HTML标签解密
function htmlDecode(value) {
if (value) {
return $('<div />').html(value).text();
} else {
return '';
}
}

//消息构造函数
function CLASS_MSN_MESSAGE(id, width, height, caption, title, message, target, action) {
this.id = id;
this.title = title;
this.caption = caption;
this.message = message;
this.target = target;
this.action = action;
this.width = width ? width : 200;
this.height = height ? height : 120;
this.timeout = 150;
this.speed = 20;
this.step = 1;
this.right = screen.width - 1;
this.bottom = screen.height;
this.left = this.right - this.width;
this.top = this.bottom - this.height;
this.timer = 0;
this.pause = false;
this.close = false;
this.autoHide = true;
}

//隐藏消息方法
CLASS_MSN_MESSAGE.prototype.hide = function () {
if (this.onunload()) {

var offset = this.height > this.bottom - this.top ? this.height : this.bottom - this.top;
var me = this;

if (this.timer > 0) {
window.clearInterval(me.timer);
}

var fun = function () {
if (me.pause == false || me.close) {
var x = me.left;
var y = 0;
var width = me.width;
var height = 0;
if (me.offset > 0) {
height = me.offset;
}

y = me.bottom - height;

if (y >= me.bottom) {
window.clearInterval(me.timer);
me.Pop.hide();
} else {
me.offset = me.offset - me.step;
}
me.Pop.show(x, y, width, height);
}
}

this.timer = window.setInterval(fun, this.speed)
}
}

//消息卸载事件，可以重写
CLASS_MSN_MESSAGE.prototype.onunload = function () {
return true;
}
//消息命令事件，要实现自己的连接，请重写它
CLASS_MSN_MESSAGE.prototype.oncommand = function () {
//this.close = true;
this.hide();
window.open("http://www.baidu.com");

}
//消息显示方法
CLASS_MSN_MESSAGE.prototype.show = function () {

var oPopup = window.createPopup(); //IE5.5+

this.Pop = oPopup;

var w = this.width;
var h = this.height;

var str = "<DIV + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>"
str += "<object id='myVoice' name='myVoice' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='0' height='0'><param name='movie' value='../Flash/Sms.swf'><param name='quality' value='high'><embed src='/blog_article/Flash/Sms.swf' width='0' height='0' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' wmode='transparent'></embed></object>";//一段声音提示(Flash文件)
str += "<TABLE cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"
str += "<TR>"
str += "<TD width=30 height=24></TD>"
str += "<TD valign=middle width='100%'>" + this.caption + "</TD>"
str += "<TD valign=middle align=right width=19>"
str += "<SPAN title=关闭 id='btSysClose' >×</SPAN></TD>"
str += "</TR>"
str += "<TR>"
str += "<TD colSpan=3 height=" + (h - 28) + ">"
str += "<DIV >" + this.title + "<BR><BR>"
str += "<DIV align=left>" + htmlDecode(this.message) + "</DIV>"
str += "</DIV>"
str += "</TD>"
str += "</TR>"
str += "</TABLE>"
str += "</DIV>"

oPopup.document.body.innerHTML = str;

//调用父窗口方法
oPopup.document["DoWork"] = DoWork;
oPopup.document["SetRead"] = SetRead;

this.offset = 0;
var me = this;

oPopup.document.body.onmouseover = function () { me.pause = true; }
oPopup.document.body.onmouseout = function () { me.pause = false; }

var fun = function () {
var x = me.left;
var y = 0;
var width = me.width;
var height = me.height;

if (me.offset > me.height) {
height = me.height;
} else {
height = me.offset;
}

y = me.bottom - me.offset;
if (y <= me.top) {
me.timeout--;
if (me.timeout == 0) {
window.clearInterval(me.timer);
if (me.autoHide) {
me.hide();
}
}
} else {
me.offset = me.offset + me.step;
}
me.Pop.show(x, y, width, height);

}

this.timer = window.setInterval(fun, this.speed)

var btClose = oPopup.document.getElementById("btSysClose");

btClose.onclick = function () {
me.close = true;
me.hide();
}
}
//设置速度方法
CLASS_MSN_MESSAGE.prototype.speed = function (s) {
var t = 20;
try {
t = praseInt(s);
} catch (e) { }
this.speed = t;
}
//设置步长方法
CLASS_MSN_MESSAGE.prototype.step = function (s) {
var t = 1;
try {
t = praseInt(s);
} catch (e) { }
this.step = t;
}

CLASS_MSN_MESSAGE.prototype.rect = function (left, right, top, bottom) {
try {
this.left = left != null ? left : this.right - this.width;
this.right = right != null ? right : this.left + this.width;
this.bottom = bottom != null ? (bottom > screen.height ? screen.height : bottom) : screen.height;
this.top = top != null ? top : this.bottom - this.height;
} catch (e) { }
}

最后调用的时候用这个语句：

//弹出消息框
var MSG1;
function ShowComputerMSG(msg) {
if (typeof (MSG1) != "undefined") {
MSG1.close = true;
MSG1.hide();
}
else {
var width = 300;
var height = 150;
if (msg.length > 200 && msg.length < 400) {
width = 400;
height = 180;
}
else if (msg.length > 400) {
width = 500;
height = 180;
}
MSG1 = new CLASS_MSN_MESSAGE("aa", width, height, "短消息提示：", "您有新的消息", decodeURI(msg));
MSG1.rect(null, null, null, screen.height - 50);
MSG1.speed = 20;
MSG1.step = 10;
MSG1.show();
}
}

这样最后的效果是：每隔一段时间，如果有新的消息就会给显示出来，提示框会在一定的时间内消失，如果鼠标放在提示框上面则会不消失，但当下一个提示框出来的时候，上一个提示框会自动消失，下面是效果图：

在这里我们可以看到可以点击查看进入查看界面，这就意味着要在提示窗口条用父页面的方法，在这里不可以直接调用父页面的方法，必须先注册才能使用，注册方法是在上面的JS文件中加入类似一下的语句：

//调用父窗口方法
oPopup.document["DoWork"] = DoWork;

比如说你要在提示框调用父页面上的Do