Koma's UIblog

前端技术与RIA开发

WindowShade的样式

Posted by koma on May 21, 2008 under 前端技术与RIA开发

项目中的部分页面采用了Flex进行表现，用到WindowShade控件，搜索引擎中相关的资料比较少，通过阅读部分相关文档并根据自己的应用经验，关于WindowShade的样式进行整理如下。（部分文字翻译自英文文档，可能有叙述不准确之处）

WindowShade控件显示为一个Button,点击时，Button下会有一个Panel如同拉窗帘（windowshade）般展开；如果这个Panel已经是显示状态了，点击按钮后便会收起，如同窗帘的卷起。如果多个WindowShade存在于一个VBox下，他们的表现就会像是Accordian，不同的是，多个WindowShade可以同时显示，而Accordian和Tabnavigator一样，每次只能显示一个Panel。

Styles

closeDuration 定义WindowShade关闭（收起）过渡的持续时间，单位是毫秒。值为0代表没有过渡，默认值为250

closeIcon 当WindowShade处于关闭（panel不显示）状态时显示在headerButton上图标

headerClass 取headerButton实例的样式（已经存在headerButton的实例，应用该实例的样式）；headerClass的值必须是Button或者它的子样式类。默认值为Button

headerStyleName 为headerButton声明的特殊样式名。

headerTextAlign headerButton上的文字对齐方式；有效值为left，right或center；默认值为right

openDuration 定义WindowShade显示（展开）过渡的持续时间，单位是毫秒。值为0代表没有过渡，默认值为250

openIcon 当WindowShade处于打开（Panel显示）状态时显示在headerButton上图标

toggleHeader 此属性的具体功能不详

1.在使用中，推荐的方法是给WindowShade加个headerStyleName，如.WindowShadeHeader,然后在.WindowShadeHeader里定义headerButton的样式。这里要注意headerButton继承的是Button的样式。

2.针对headerButton的背景同样可以采用Scale9在WindowShadeHeader下定义upSkin,overSkin,downSkin。

3.如果在WindowShade中定义了border,要想headerButton不出现边框，可以在WindowShadeH中设置borderStyle: none

4.WindowShade的opened属性值为true时，状态为打开，false时为关闭。

学习稻草的几个css思想

Posted by koma on March 24, 2008 under 前端技术与RIA开发

稻草刚发布了新版的首页效果，页面看起来很舒服，像时尚杂志。
不过，更吸引我的是他对于</h1>、</span>等标签的运用，以及由这些标签组成的清晰的页面结构。抽空通读了一遍代码，获益匪浅。

先举一例，比如页面logo的处理方式是我没有想过的，之前在搜拍上也见过的这样的处理方式，既达到了logo应具备的内容，同时优化了代码。
HTML结构:

<div id=”logo”>
<a href=”#” title=”这里是logo”>
<h1>这里是logo</h1>
</a>
</div>

这里的</a>下面我经常就放个<img>完事，不去考虑什么</h1>,而从一个页面在搜索引擎下的表现这个角度讲，</h1>是不可或缺的。有人觉得</h1>不适合放在logo下，仁者见仁，智者见智吧，还要看在什么样的页面下，只要保证一个页面只有一个</h1>就好了，稻草同学显然是深知这一点的。

CSS方面也很好理解，背景放在</a>中，让</a>充满整个logo块，把</h1>隐藏掉就可以了。

#logo a{
display:block;
background: url(hope标志图.jpg) no-repeat;
width:200px;
height:72px;
}

#logo h1 {
display:block;
overflow:hidden;
width:0;
height:0;
}

发散一下，我觉得这里#logo h1 {}也可以用text-indent:-999em把文字内容处理掉。暂且不去考虑这样写是否规范了，呵呵。

另外，这样的结构是我没用过的：

<ul>
<li>
<a>
<p>baidu</p>
<p>百度一下</p>
</a>
</li>
</ul>

把</p>放在</a>里，效果不错！这个是以后经常会用到的一个方法。

做项目时间长了，处理页面往往只侧重表现，不去在意代码结构是否合理以及在搜索引擎下的更优化。
还是得多看多学习。

b/s开发常用javaScript技术

Posted by koma on February 26, 2008 under 前端技术与RIA开发

在b/s开发中经常用到的javaScript技术
一、验证类
1、数字验证内
1.1 整数
1.2 大于0的整数（用于传来的ID的验证)
1.3 负整数的验证
1.4 整数不能大于iMax
1.5 整数不能小于iMin
2、时间类
2.1 短时间，形如 (13:04:06)
2.2 短日期，形如 (2003-12-05)
2.3 长时间，形如 (2003-12-05 13:04:06)
2.4 只有年和月。形如(2003-05,或者2003-5)
2.5 只有小时和分钟,形如(12:03)
3、表单类
3.1 所有的表单的值都不能为空
3.2 多行文本框的值不能为空。
3.3 多行文本框的值不能超过sMaxStrleng
3.4 多行文本框的值不能少于sMixStrleng
3.5 判断单选框是否选择。
3.6 判断复选框是否选择.
3.7 复选框的全选，多选，全不选，反选
3.8 文件上传过程中判断文件类型
4、字符类
4.1 判断字符全部由a-Z或者是A-Z的字字母组成
4.2 判断字符由字母和数字组成。
4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母
4.4 字符串替换函数.Replace();
5、浏览器类
5.1 判断浏览器的类型
5.2 判断ie的版本
5.3 判断客户端的分辨率

6、结合类
6.1 email的判断。
6.2 手机号码的验证
6.3 身份证的验证

二、功能类

1、时间与相关控件类
1.1 日历
1.2 时间控件
1.3 万年历
1.4 显示动态显示时钟效果（文本，如OA中时间）
1.5 显示动态显示时钟效果 (图像，像手表)
2、表单类
2.1 自动生成表单
2.2 动态添加，修改，删除下拉框中的元素
2.3 可以输入内容的下拉框
2.4 多行文本框中只能输入iMax文字。如果多输入了，自动减少到iMax个文字（多用于短信发送)

3、打印类
3.1 打印控件
4、事件类
4.1 屏蔽右键
4.2 屏蔽所有功能键
4.3 –> 和<– F5 F11,F9,F1
4.4 屏蔽组合键ctrl+N
5、网页设计类
5.1 连续滚动的文字，图片（注意是连续的，两段文字和图片中没有空白出现）
5.2 html编辑控件类
5.3 颜色选取框控件
5.4 下拉菜单
5.5 两层或多层次的下拉菜单
5.6 仿IE菜单的按钮。（效果如rongshuxa.com的导航栏目)
5.7 状态栏，title栏的动态效果（例子很多，可以研究一下）
5.8 双击后，网页自动滚屏
6、树型结构。
6.1 asp+SQL版
6.2 asp+xml+sql版
6.3 java+sql或者java+sql+xml
7、无边框效果的制作
8、连动下拉框技术
9、文本排序

一、验证类
1、数字验证内
1.1 整数
/^(-|\+)?\d+$/.test(str)
1.2 大于0的整数（用于传来的ID的验证)
/^\d+$/.test(str)
1.3 负整数的验证
/^-\d+$/.test(str)
2、时间类
2.1 短时间，形如 (13:04:06)
function isTime(str)
{
var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
if (a == null) {alert('输入的参数不是时间格式'); return false;}
if (a[1]>24 || a[3]>60 || a[4]>60)
{
alert("时间格式不对");
return false
}
return true;
}
2.2 短日期，形如 (2003-12-05)
function strDateTime(str)
{
var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if(r==null)return false;
var d= new Date(r[1], r[3]-1, r[4]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
}
2.3 长时间，形如 (2003-12-05 13:04:06)
function strDateTime(str)
{
var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
var r = str.match(reg);
if(r==null)return false;
var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
}
2.4 只有年和月。形如(2003-05,或者2003-5)
2.5 只有小时和分钟,形如(12:03)
3、表单类
3.1 所有的表单的值都不能为空
<input onblur="if(this.value.replace(/^\s+|\s+$/g,'')=='')alert('不能为空!')">
3.2 多行文本框的值不能为空。
3.3 多行文本框的值不能超过sMaxStrleng
3.4 多行文本框的值不能少于sMixStrleng
3.5 判断单选框是否选择。
3.6 判断复选框是否选择.
3.7 复选框的全选，多选，全不选，反选
3.8 文件上传过程中判断文件类型
4、字符类
4.1 判断字符全部由a-Z或者是A-Z的字字母组成
<input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">
4.2 判断字符由字母和数字组成。
<input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')">
4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母
/^([a-zA-z_]{1})([\w]*)$/g.test(str)
4.4 字符串替换函数.Replace();
5、浏览器类
5.1 判断浏览器的类型
window.navigator.appName
5.2 判断ie的版本
window.navigator.appVersion
5.3 判断客户端的分辨率
window.screen.height; window.screen.width;

6、结合类
6.1 email的判断。
function ismail(mail)
{
return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));
}
6.2 手机号码的验证
6.3 身份证的验证
function isIdCardNo(num)
{
if (isNaN(num)) {alert("输入的不是数字！"); return false;}
var len = num.length, re;
if (len == 15)
re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
else if (len == 18)
re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
else {alert("输入的数字位数不对！"); return false;}
var a = num.match(re);
if (a != null)
{
if (len==15)
{
var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
else
{
var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;}
}
return true;
}

3.7 复选框的全选，多选，全不选，反选
<form name=hrong>
<input type=checkbox name=All onclick="checkAll('mm')">全选<br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/><br/>

</form>

<SCRIPT LANGUAGE="java script">
function checkAll(str)
{
var a = document.getElementsByName(str);
var n = a.length;
for (var i=0; i<n; i++)
a[i].checked = window.event.srcElement.checked;
}
function checkItem(str)
{
var e = window.event.srcElement;
var all = eval("document.hrong."+ str);
if (e.checked)
{
var a = document.getElementsByName(e.name);
all.checked = true;
for (var i=0; i<a.length; i++)
{
if (!a[i].checked){ all.checked = false; break;}
}
}
else all.checked = false;
}
</SCRIPT>

3.8 文件上传过程中判断文件类型
<input type=file onchange="alert(this.value.match(/^(.*)(\.)(.{1,8})$/)[3])">

画图:
<OBJECT
id=S
style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px"
height=240
width=392
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6">
</OBJECT>
<SCRIPT>
S.DrawingSurface.ArcDegrees(0,0,0,30,50,60);
S.DrawingSurface.ArcRadians(30,0,0,30,50,60);
S.DrawingSurface.Line(10,10,100,100);
</SCRIPT>

写注册表：
<SCRIPT>
var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.RegWrite ("HKCU\\Software\\ACME\\FortuneTeller\\", 1, "REG_BINARY");
WshShell.RegWrite ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader", "Goocher!", "REG_SZ");
var bKey = WshShell.RegRead ("HKCU\\Software\\ACME\\FortuneTeller\\");
WScript.Echo (WshShell.RegRead ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader"));
WshShell.RegDelete ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader");
WshShell.RegDelete ("HKCU\\Software\\ACME\\FortuneTeller\\");
WshShell.RegDelete ("HKCU\\Software\\ACME\\");
</SCRIPT>

TABLAE相关(客户端动态增加行列）
<HTML>
<SCRIPT LANGUAGE="JScript">
function numberCells() {
var count=0;
for (i=0; i < document.all.mytable.rows.length; i++) {
for (j=0; j < document.all.mytable.rows(i).cells.length; j++) {
document.all.mytable.rows(i).cells(j).innerText = count;
count++;
}
}
}
</SCRIPT>
<BODY onload="numberCells()">
<TABLE id=mytable border=1>
<TR><TH> </TH><TH> </TH><TH> </TH><TH> </TH></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
</BODY>
</HTML>

１．身份证严格验证：

function cidInfo(sId){
var iSum=0
var info=""
if(!/^\d{17}(\d|x)$/i.test(sId))return false;
sId=sId.replace(/x$/i,"a");
if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区";
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";
for(var i = 17;i>=0;i –) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
if(iSum%11!=1)return "Error:非法证号";
return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}

document.write(cidInfo("380524198002300016"),"<br/>");
document.write(cidInfo("340524198002300019"),"<br/>")
document.write(cidInfo("340524197711111111"),"<br/>")
document.write(cidInfo("34052419800101001x"),"<br/>");
</script>

２．验证ＩＰ地址
<SCRIPT LANGUAGE="java script">
function isip(s){
var check=function(v){try{return (v<=255 && v>=0)}catch(x){return false}};
var re=s.split(".")
return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false
}

var s="202.197.78.129";
alert(isip(s))
</SCRIPT>

３．加sp1后还能用的无边框窗口！！
<HTML XMLNS:IE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<IE:Download ID="include" STYLE="behavior:url(#default#download)" />
<title>Chromeless Window</title>

<SCRIPT LANGUAGE="JScript">
/*— Special Thanks For andot —*/

/*
This following code are designed and writen by Windy_sk <seasonx@163.net>
You can use it freely, but u must held all the copyright items!
*/

/*— Thanks For andot Again —*/

var CW_width = 400;
var CW_height = 300;
var CW_top = 100;
var CW_left = 100;
var CW_url = "/";
var New_CW = window.createPopup();
var CW_Body = New_CW.document.body;
var content = "";
var CSStext = "margin:1px;color:black; border:2px outset;border-style:expression(onmouseout=onmouseup=function(){this.style.borderStyle='outset'}, onmousedown=function(){if(event.button!=2)this.style.borderStyle='inset'});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;";

//Build Window
include.startDownload(CW_url, function(source){content=source});

function insert_content(){
var temp = "";
CW_Body.style.overflow = "hidden";
CW_Body.style.backgroundColor = "white";
CW_Body.style.border = "solid black 1px";
content = content.replace(/<a ([^>]*)>/g,"<a onclick='parent.open(this.href);return false' $1>");
temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>";
temp += "<tr style=';font-size:12px;background:#0099CC;height:20;cursor:default' ondblclick=\"Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\" onmouseup='parent.drag_up(event)' onmousemove='parent.drag_move(event)' onmousedown='parent.drag_down(event)' onselectstart='return false' oncontextmenu='return false'>";
temp += "<td style='color:#ffffff;padding-left:5px'>Chromeless Window For IE6 SP1</td>";
temp += "<td style='color:#ffffff;padding-right:5px;' align=right>";
temp += "<span id=Help onclick=\"alert('Chromeless Window For IE6 SP1 - Ver 1.0\\n\\nCode By Windy_sk\\n\\nSpecial Thanks For andot')\" style=\""+CSStext+"font-family:System;padding-right:2px;\">?</span>";
temp += "<span id=Min onclick='parent.New_CW.hide();parent.blur()' style=\""+CSStext+"font-family:Webdings;\" title='Minimum'>0</span>";
temp += "<span id=Max onclick=\"this.innerText=this.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();\" style=\""+CSStext+"font-family:Webdings;\" title='Maximum'>1</span>";
temp += "<span id=Close onclick='parent.opener=null;parent.close()' style=\""+CSStext+"font-family:System;padding-right:2px;\" title='Close'>x</span>";
temp += "</td></tr><tr><td colspan=2>";
temp += "<div id=include style='overflow:scroll;overflow-x:hidden;overflow-y:auto; HEIGHT: 100%; width:"+CW_width+"'>";
temp += content;
temp += "</div>";
temp += "</td></tr></table>";
CW_Body.innerHTML = temp;
}

setTimeout("insert_content()",1000);

var if_max = true;
function show_CW(){
window.moveTo(10000, 10000);
if(if_max){
New_CW.show(CW_top, CW_left, CW_width, CW_height);
if(typeof(New_CW.document.all.include)!="undefined"){
New_CW.document.all.include.style.width = CW_width;
New_CW.document.all.Max.innerText = "1";
}

}else{
New_CW.show(0, 0, screen.width, screen.height);
New_CW.document.all.include.style.width = screen.width;
}
}

window.onfocus = show_CW;
window.onresize = show_CW;

// Move Window
var drag_x,drag_y,draging=false

function drag_move(e){
if (draging){
New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height);
return false;
}
}

function drag_down(e){
if(e.button==2)return;
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return;
drag_x=e.clientX;
drag_y=e.clientY;
draging=true;
e.srcElement.setCapture();
}

function drag_up(e){
draging=false;
e.srcElement.releaseCapture();
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return;
CW_top = e.screenX-drag_x;
CW_left = e.screenY-drag_y;
}

</SCRIPT>
</HTML>

电话号码的验证

要求：
　　(1)电话号码由数字、"("、")"和"-"构成
　　(2)电话号码为3到8位
　　(3)如果电话号码中包含有区号，那么区号为三位或四位
　　(4)区号用"("、")"或"-"和其他部分隔开
　　(5)移动电话号码为11或12位，如果为12位,那么第一位为0
　　(6)11位移动电话号码的第一位和第二位为"13"
　　(7)12位移动电话号码的第二位和第三位为"13"
　　根据这几条规则，可以与出以下正则表达式：
　　(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^$[0-9]{3,4}$[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)

具有在输入非数字字符不回显的效果，即对非数字字符的输入不作反应。
function numbersonly(field,event){
var key,keychar;
if(window.event){
key = window.event.keyCode;
}
else if (event){
key = event.which;
}
else{
return true
}
keychar = String.fromCharCode(key);
if((key == null)||(key == 0)||(key == 8)||(key == 9)||(key == 13)||(key == 27)){
return true;
}
else if(("0123456789.").indexOf(keychar)>-1){
window.status = "";
return true;
}
else {
window.status = "Field excepts numbers only";
return false;
}
}

验证ip

str=document.RegExpDemo.txtIP.value;
if(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.test(str)==false)
{
window.alert('错误的IP地址格式');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
if(RegExp.$1<1 || RegExp.$1>254||RegExp.$2<0||RegExp.$2>254||RegExp.$3<0||RegExp.$3>254||RegExp.$4<1||RegExp.$4>254)
{
window.alert('错误的IP地址');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
//剔除如 010.020.020.03 前面的0
var str=str.replace(/0(\d)/g,"$1");
str=str.replace(/0(\d)/g,"$1");
window.alert(str);

//一下是取数据的类
//Obj参数指定数据的来源(限定Table),默认第一行为字段名称行
//GetTableData类提供MoveNext方法,参数是表的行向上或向下移动的位数,正数向下移动,负数向上.
//GetFieldData方法获得指定的列名的数据
//Sort_desc方法对指定的列按降序排列
//Sort_asc方法对指定的列按升序排列
//GetData方法返回字段值为特定值的数据数组,提供数据,可以在外部进行其他处理
//Delete方法删除当前记录,数组减少一行
//初始化,Obj:table的名字,Leftlen:左面多余数据长度,Rightlen:右面多余数据长度,
function GetTableData(Obj,LeftLen,RightLen){
var MyObj=document.all(Obj);
var iRow=MyObj.rows.length;
var iLen=MyObj.rows[0].cells.length;
var i,j;

TableData=new Array();
for (i=0;i< iRow;i++){
TableData[i]=new Array();
for (j=0;j<iLen;j++){
TableStr=MyObj.rows(i).cells(j).innerText;
TableStr=TableStr.substring(LeftLen, TableStr.length-RightLen).Trim();
TableStr=TableStr.replace(/ /gi,"").replace(/\r\n/ig,"");
TableData[i][j]=TableStr;
}
}

this.TableData=TableData;
this.cols=this.TableData[0].length;
this.rows=this.TableData.length;
this.rowindex=0;
}

function movenext(Step){
if (this.rowindex>=this.rows){
return
}

if (Step=="" || typeof(Step)=="undefined") {
if (this.rowindex<this.rows-1)
this.rowindex++;
return;

}
else{
if (this.rowindex + Step<=this.rows-1 && this.rowindex + Step>=0 ){
this.rowindex=this.rowindex + Step;
}
else
{
if (this.rowindex + Step<0){
this.rowindex= 0;
return;
}
if (this.rowindex + Step>this.rows-1){
this.rowindex= this.rows-1;
return;
}
}
}
}

}

}
if (highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));
}
}

this.TableData=desc_array;
}
return;
}

function sort_asc(){//升序
var colindex=-1;
var highindex=-1;
var i,j;
for (n=0; n<arguments.length; n++){
asc_array=new Array();
Field=arguments[arguments.length-1-n];
for (i=0;i<this.cols;i++){
if (this.TableData[0][i]==Field){
colindex=i;
break;
}
}
if ( colindex==-1 )
return;
else
{
asc_array[0]=this.TableData[0];
for(i=1;i<this.rows;i++){
asc_array[i]=this.TableData[1];
highindex=1;
for(j=1;j<this.TableData.length;j++){//找出最小的列值
if (asc_array[i][colindex]>this.TableData[j][colindex]){
asc_array[i]=this.TableData[j];
highindex=j;

}

}
if (highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));

}
}

this.TableData=asc_array;
}
return;
}

function getData(Field,FieldValue){
var colindex=-1;
var i,j;

GetData=new Array();
if (typeof(Field)=="undefined" || typeof(FieldValue)=="undefined" ){
return this.TableData;
}

for(j=0;j<this.cols;j++){
if (this.TableData[0][j]==Field){
colindex=j;
}
}
if (colindex!=-1){

for(i=1;i<this.rows;i++){
if (this.TableData[i][colindex]==FieldValue){
GetData[i]=new Array();
GetData[i]=this.TableData[i];
}
}
}
return GetData;
}
function Delete(){
this.TableData=this.TableData.slice(0,this.rowindex).concat(this.TableData.slice(this.rowindex+1,this.TableData.length));
this.rows=this.TableData.length;
return;
}
function updateField(Field,FieldValue){
var colindex=-1;
var i=0;
if (typeof(Field) == "number"){
colindex=Field;
}
else
{
for (i=0;i<this.cols && this.rowindex<this.rows ;i++){
if (this.TableData[0][i]==Field){
colindex=i;
break;
}
}
}
if (colindex!=-1) {
this.TableData[this.rowindex][colindex]=FieldValue;
}

}
function movefirst(){
this.rowindex=0;
}
function movelast(){
this.rowindex=this.rows-1;
}
function String.prototype.Trim() {return this.replace(/(^\s*)|(\s*$)/g,"");}
GetTableData.prototype.MoveNext = movenext;
GetTableData.prototype.GetFieldData = getfielddata;
GetTableData.prototype.Sort_asc = sort_asc;
GetTableData.prototype.Sort_desc = sort_desc;
GetTableData.prototype.GetData = getData;
GetTableData.prototype.Delete = Delete;
GetTableData.prototype.UpdateField = updateField;
GetTableData.prototype.MoveFirst = movefirst;

具体的例子：http://202.119.73.208/NetEAn/com/test/jsprint.htm

在每个文本框的onblur事件中调用校验代码,并且每个文本框中onKeyDown事件中写一个enter转tab函数

//回车键换为tab
function enterToTab()
{
if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
&& event.keyCode == 13)
{
event.keyCode = 9;
}
}

有时候还需要自由编辑表格—
给大家一个自由编辑表格的小例子,写的有点乱,呵呵:）

//===============================start================================

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>测试修改表格</TITLE>
<STYLE>
/*提示层的样式*/
div
{
BORDER-RIGHT: #80c144 1px solid;
BORDER-TOP: #80c144 1px solid;
VISIBILITY: hidden;
BORDER-LEFT: #80c144 1px solid;
CURSOR: default;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: #80c144 1px solid;
FONT-FAMILY: 宋体;
font-size:12px;
POSITION: absolute;
BACKGROUND-COLOR: #f6f6f6;
TOP:30px;
LEFT:30px;
}
/*tr的样式*/
tr
{
font-family: "宋体";
color: #000000;
background-color: #C1DBF5;
font-size: 12px
}
/*table脚注样式*/
.TrFoot
{
FONT-SIZE: 12px;
font-family:"宋体", "Verdana", "Arial";
BACKGROUND-COLOR: #6699CC;
COLOR:#FFFFFF;
height: 25;
}
/*trhead属性*/
.TrHead
{
FONT-SIZE: 13px;
font-family:"宋体", "Verdana", "Arial";
BACKGROUND-COLOR: #77AADD;
COLOR:#FFFFFF;
height: 25;
}
/*文本框样式*/
INPUT
{
BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid;
FONT-SIZE: 12px;
FONT-FAMILY: "宋体","Verdana";
color: #000000;
BACKGROUND-COLOR: #E9EFF5;
}
/*button样式*/
button
{
BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7;
BACKGROUND-COLOR: #D5E4F3;
CURSOR: hand;
FONT-SIZE:12px;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid;
COLOR: #000000;
}
</STYLE>
</HEAD>
<BODY>
<SCRIPT language = "java script">
<!–全局变量
//标志位,值为false代表未打开一个编辑框,值为true为已经打开一个编辑框开始编辑
var editer_table_cell_tag = false;
//开启编辑功能标志,值为true时为允许编辑
var run_edit_flag = false;
//–>
</SCRIPT>

<SCRIPT language = "java script">
<!–
/**
* 编辑表格函数
* 单击某个单元格可以对里面的内容进行自由编辑
* @para tableID 为要编辑的table的id
* @para noEdiID 为不要编辑的td的ID,比如说table的标题
* 可以写为<TD id="no_editer">自由编辑表格</TD>
* 此时该td不可编辑
*/
function editerTableCell(tableId,noEdiId)
{
var tdObject = event.srcElement;
var tObject = ((tdObject.parentNode).parentNode).parentNode;
if(tObject.id == tableId &&tdObject.id != noEdiId&&editer_table_cell_tag == false && run_edit_flag == true)
{
tdObject.innerHTML = "<input type=text id=edit_table_txt name=edit_table_txt value="+tdObject.innerText+" size='15' onKeyDown='enterToTab()'> <input type=button value=' 确定 ' onclick='certainEdit()'>";
edit_table_txt.focus();
edit_table_txt.select();
editer_table_cell_tag = true;
//修改按钮提示信息
editTip.innerText = "请先点确定按钮确认修改!";
}
else
{
return false;
}
}

/**
* 确定修改
*/
function certainEdit()
{
var bObject = event.srcElement;
var tdObject = bObject.parentNode;
var txtObject = tdObject.firstChild;
tdObject.innerHTML = txtObject.value;
//代表编辑框已经关闭
editer_table_cell_tag = false;
//修改按钮提示信息
editTip.innerText = "请单击某个单元格进行编辑!";
}

function enterToTab()
{
if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
&& event.keyCode == 13)
{
event.keyCode = 9;
}
}

/**
* 控制是否编辑
*/
function editStart()
{
if(event.srcElement.value == "开始编辑")
{
event.srcElement.value = "编辑完成";
run_edit_flag = true;
}
else
{
//如果当前没有编辑框,则编辑成功,否则,无法提交
//必须按确定按钮后才能正常提交
if(editer_table_cell_tag == false)
{
alert("编辑成功结束!");
event.srcElement.value = "开始编辑";
run_edit_flag = false;
}
}
}

/**
* 根据不同的按钮提供不同的提示信息
*/
function showTip()
{
if(event.srcElement.value == "编辑完成")
{
editTip.style.top = event.y + 15;
editTip.style.left = event.x + 12;
editTip.style.visibility = "visible";
}
else
{
editTip.style.visibility = "hidden";
}
}
–>
</SCRIPT>
<TABLE id="editer_table" width="100%" align="center"
onclick="editerTableCell('editer_table','no_editer')">
<TR class="TrHead">
<TD colspan="3" align="center" id="no_editer">自由编辑表格</TD>
</TR>
<TR>
<TD width="33%">单击开始编辑按钮,然后点击各单元格编辑</TD>
<TD width="33%">2</TD>
<TD width="33%">3</TD>
</TR>
<TR>
<TD width="33%">4</TD>
<TD width="33%">5</TD>
<TD width="33%">6</TD>
</TR>
<TR>
<TD width="33%">one</TD>
<TD width="33%">two</TD>
<TD width="33%">three</TD>
</TR>
<TR>
<TD width="33%">four</TD>
<TD width="33%">five</TD>
<TD width="33%">six</TD>
</TR>
<TR class="TrFoot">
<TD colspan="3" align="center" id="no_editer">
<INPUT type="button" class="bt" value="开始编辑" onClick="editStart()" onMouseOver="showTip()" onMouseMove="showTip()" onMouseOut="editTip.style.visibility = 'hidden';">
</TD>
</TR>
</TABLE>
</BODY>
<DIV id="editTip">请单击某个单元格进行编辑!</DIV>
</HTML>

css技巧整理

Posted by koma on February 25, 2008 under 前端技术与RIA开发

1.网页中让整段文字左右对齐

text-align:justify; text-justify:inter-ideograph

2.层透明在IE和FF下的区别

filter:Alpha(opacity=30); //IE下
-moz-opacity:0.3; //FF下

javascript练习：模仿qq2008好友列表效果

Posted by koma on February 22, 2008 under 前端技术与RIA开发

今天在写一个列表显示效果的时候，正好看见QQ2008的好友列表显示的效果和正在写的效果有那么几分相似，索性就模仿写了起来
QQ2008好友列表的效果比较简单，主要方法是给ID换className.

先看结构：

<div id=”QQ2008″ >
<dl id=”list_item1″ class=”b” style=”margin-top:0;” onclick=”show(this,1)” onmousemove=”over(1)” onmouseout=”out(1)” >
<dt class=”pic”><img src=”images/1.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>Koma</dd>
<dd class=”text”>(今天天气真好！)</dd>
<dd class=”other”><img src=”images/MailButton.gif” /></dd>
</dl>

<dl id=”list_item2″ class=”b” onclick=”show(this,2)” onmousemove=”over(2)” onmouseout=”out(2)” >
<dt class=”pic”><img src=”images/2.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>Anna</dd>
<dd class=”text”>(过完年上班，新的开始！！)</dd>
<dd class=”other”><img src=”images/MailButton.gif” /></dd>
</dl>

<dl id=”list_item3″ class=”b” onclick=”show(this,3)” onmousemove=”over(3)” onmouseout=”out(3)” >
<dt class=”pic”><img src=”images/3.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>风的样子</dd>
<dd class=”text”>(头痛)</dd>
<dd class=”other”></dd>
</dl>
<dl id=”list_item4″ class=”b” onclick=”show(this,4)” onmousemove=”over(4)” onmouseout=”out(4)” >
<dt class=”pic”><img src=”images/4.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>小鱼儿</dd>
<dd class=”text”>(山重水复疑无路，柳暗花明又一村。)</dd>
<dd class=”other”><img src=”images/MailButton.gif” /><img src=”images/mbi_031.gif” /></dd>
</dl>

<dl id=”list_item5″ class=”b” onclick=”show(this,5)” onmousemove=”over(5)” onmouseout=”out(5)” >
<dt class=”pic”><img src=”images/5.bmp” width=”20″ height=”20″ /></dt>
<dd class=”name”>nick</dd>
<dd class=”text”>(再牛b的肖邦，也弹不出老子的悲伤)</dd>
<dd class=”other”><img src=”images/MailButton.gif” /></dd>
</dl>
</div>

样式表主要分作两部分，一部分是正常显示下的样式，一部分是鼠标点击后的样式。

<style>
*{
margin:0;
padding:0;
}
#QQ2008 {
width:220px;
margin:0 auto;
margin-top:50px;
border:1px solid #B3D7F1;
}
#QQ2008 dl {
margin-top:4px;
}
#QQ2008 .b {
height:24px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
}
#QQ2008 .b .pic {
float:left;
height:24px;
text-align:center;
}
#QQ2008 .b .pic img {
width:20px;
height:20px;
float:left;
margin:2px;
}
#QQ2008 .b .name {
line-height:30px;
font-size:12px;
margin-left:6px;
color:#333333;
float:left;
}
#QQ2008 .b .text {
font-size:12px;
line-height:30px;
color:#666666;
text-overflow : ellipsis;
overflow:hidden;
white-space: nowrap;
}
#QQ2008 .b .other {
display:none;
}
#QQ2008 .show {
height:50px;
background-color:#DDF4FF;
border:1px solid #B3D7F1;
}
#QQ2008 .show .name {
font-size:12px;
line-height:16px;
color:#ff6600;
}
#QQ2008 .show .pic {
float:left;
}
#QQ2008 .show .pic img {
float:left;
width:40px;
height:40px;
margin:5px;
margin-left:2px;
}
#QQ2008 .show .text {
font-size:12px;
line-height:14px;
color:#666;
text-overflow : ellipsis;
overflow:hidden;
white-space: nowrap;
}
</style>

js部分也十分简单

<script>
var show_i=1;
function show(a,b) {
if (show_i==b) {a.className=(a.className==”show”)?”b”:”show”; return true;}
var ohidden=document.getElementById(”list_item”+show_i);
ohidden.className=”b”;
ohidden.style.border=”1px solid #FFFFFF”;
ohidden.style.backgroundColor=”#fff”;
a.className=(a.className==”show”)?”b”:”show”;
show_i=b;

}
function over(d) {
var now_show=document.getElementById(”list_item”+d);
if (now_show.className==”show”) return true;
now_show.style.border=”1px solid #DDF4FF”;
now_show.style.backgroundColor=”#E8F9FF”;
}

function out(e) {
var now_show=document.getElementById(”list_item”+e);
if (now_show.className==”show”) return true;
now_show.style.border=”1px solid #FFFFFF”;
now_show.style.backgroundColor=”#fff”;
}
</script>

效果看这里: qq2008list_demo

从空格谈起

Posted by koma on December 19, 2007 under 前端技术与RIA开发

一、空格运算符

（1）CSS语言
简单地说，CSS语言类似JS语言，是通过客户端下载后，通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言，离JS这种基于对象的比较完善的“弱类型”语言，还差相当一段距离。要知道CSS样式是定义出来的，而样式的呈现是根据文档流顺序和CSS优先级别，浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能（尤以IE为甚），所以样式定义的语法有错误，并不影响浏览器正常工作，只不过显示不出应有的效果罢了。在我们设计定义样式的时候，排错是比较令人苦恼的，其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的，所以我们就更应该注重CSS定义的严禁，才能出较少的错误，较快更好的完成工作。

（2）CSS的运算符

首先说，CSS语言的运算符就不多，有.#{}:”;还有一个非常重要的空格。这几个运算符，都是常用的定义声明符号。而在CSS样式定义中，空格就有点特殊，我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说，我们可以把空格视为路径指向的箭头，表明HTML标签的父子级别关系。CSS是与HTML想关联的，也就是说，CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应，而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”；一个HTML标签也可以“复合调用”多个样式类。所以说，CSS样式定义的复杂性与关联的HTML是密不可分。

（3）实例说明

<td><div class=”b”>第一个类b的类路径是th .b</div></td>
<th class=”b”>第二个类b的类路径是th.b</td>
<td class=”b”>第三个类b的类路径是 .b</th>
</tr>
</table>
<div class=”b”>第三个类b的类路径是 .b</div>

讲解：

1、第一个类b的类路径是td .b，定义该HTML文档内所有的td标签内的带class=”b”的标签的样式。
也就是说，
td .b {
color:#00ff00;
}
定义的是
<td><div class=”b”>text</div></td>这组代码块中的b类，class=”b”是包含在td标签内的，是td的子级，所以在这里要用“空格”指向明确表明父子级别关系。

2、第二个类b的类路径是th.b，定义的是该HTML文档内所有的带class=”b”的th标签的样式。
也就是说，
th.b {
color: #FF0000
}
定义的是<th class=”b”>text</td>，在这里的代码中，th和class=’b'是平级的，先th后.b组成一个同级类路径th.b，所以没有空格代表“HTML类”和“自定义类”具有同级路径！

3、第三个类b的类路径是 .b，定义该HTML文档内所有的td标签的样式，它是该文档的一个全局样式，是body .b的简写。
也就是说，
.b {
color:#0000ff;
font-size:12px;
}
定义了
<td class=”b”>第三个类b的类路径是td.b</th>
和
<div class=”b”>第三个类b的类路径是 .b</div>

这两处的b类没有明确的路径指向，优先级别要比有明确路径的低。

4、大家可以看到，在HTML代码中，同样都是class=”b”，但是在CSS定义时，采用的类路径不同，作用就不同了。类路径越完整，优先级越高。在具体应用的时候，我们可以，使用完整类路径来定义某HTML代码块某一些特殊地方，做异化处理。例如本例表头th的黑体字显示效果。

二、HTML中复合调用样式类
（1）在一个HTML标签内，可以复合调用多个样式类，也是用空格做运算符，复合类名总字符不能超过256。
（2）示例：
<style type=”text/css”>
.myTxt {
font-size:50px;
font-family:Arial Black;
}
.txtRed {
color:red;
}
.txtOrange {
colorrange;
}
.txtGreen {
color:green;
}
.txtBlue {
color:blue;
}
</style>
<ul>
<li class=”myTxt txtRed”>123</li>
<li class=”myTxt txtOrange”>Text</li>
<li class=”txtGreen”>Text</li>
<li class=”myTxt txtBlue”>Text</li>
</ul>
（3）应用：
对于某些多数样式属性累同，仅有几个不同样式属性的定义，可以用这个方法来缩写。
也可以在某个不改变某个通用样式类的同时，用HTML调用复合类，突出局部特例。

三、CSS+HTML的模块化设计

（1）举个简单例子：
.classNameA .classNameB .classNameC
就是一个类包路径,A包含B,B包含C.

意思就是,在A块内的全部HTML代码(包括B块、C块),先应用样式classNameA；
然后，在B块内的全部HTML代码(包括C块),先应用样式classNameA，之后再先应用样式classNameB；
最后，在C块内的全部HTML代码,先应用样式classNameA，再先应用样式classNameB,最后应用样式classNameB；

（2）在样式表中，关于类包的路径，对于某些复杂的HMTL代码，最后写绝对路径，就是每一个类名都不要拉下。这样可读性更强，错误率更小；当然，宽容度就越低。

例如
<style type=”text/css”>
/*控制 li 的样式*/
.a1 ul li {
color:red;
}

/*控制class=”a”的div块内，全部连接 a 的样式*/
.a1 a {
font-size:20px;
}

/*控制class=”a”的div块内，一个一个为 class=”mylink”的样式*/
.a1 .myLink {
font-size:12px;
}

/*控制 li 内连接a的样式*/
.a1 ul li a {
font-size:40px;
}

/*控制名 li 内，一个为 class=”mylink”的连接的样式 */
.a1 ul li .myLink {
font-size:60px;
font-family:黑体;
}

/*b1样式*/
.b1 {
color:blue;
}
/*控制 li 内 b1 的样式*/
.a1 ul li .b1 {
color:green;
}
</style>

<div class=”a1″>
<a href=”#”>linkText</a>
<a href=”#” class=”myLink”>titleText</a>
<div class=”b1″>b11111111</div>
<ul>
<li>
<a href=”#”>titleText</a>
<div class=”b1″>nameCN</div>
</li>
<li>
<a href=”#” class=”myLink”>titleText</a>
<div class=”b1″>nameCN<span class=”c1″>nameEN</span></div>
</li>
<li>titleText</li>
<li>titleText</li>
<li>titleText</li>
</ul>
</div>

样式，按*.HTML从内层到外层；按*.CSS上下文，从下文到上文；按内联样式表上下文，从下文到上文；按内嵌>内联>外联的优先级；
叠加覆盖计算最终显示效果。

CSS语句，严格说是JS代码的一类，换句话说，CSS语句也是“弱类型”的，空格是一个“运算符”，由于“弱类型”不严谨，所以，没有空格的时候，虽然不报错，也有显示效果，但那是按错误逻辑运算的，有时歪打正着，但确莫名其妙。再加上有很多满足各浏览器的HACK语法，CSS语句就更加零乱不堪。所以，写的时候，尽量在满足宽容度的情况下，严禁一些。

如何减少网页的内存与CPU占用

Posted by koma on November 25, 2007 under 前端技术与RIA开发

转自：《样式之美正在消失》aoao

有的网页看起来并不大但打开会很卡，有的网页虽然很长但使用流畅，占用用户电脑的内存与CPU就影响这些。

浏览器问题，有各自的浏览器处理内存问题会影响到，但几乎没办法控制得了，Windows上的：

1.IE系列，刷新回收的量不大，但最小化会释放内存，。
2.Firefox2据说也会在最小化回收，可我从没见过最垃圾，用多少是多少，基本不回收。据说prototype的ajax还会引起内存一直增加。
3.Opera最好。一直控制得很好。不存在什么问题。。
Linux的内存分配机制与Win的不一样，有多少用多少，如果浏览器占光时说不定会干掉系统。

页面问题，浏览器渲染页面会消耗内存和CPU，能减少一点就减少点。

结构上
1.使用DocType，告诉浏览器你在用什么，html4也有DTD。也许Transitional更适合你
2.如果使用的是XHTML并能保持良好结构的话，记得输出相应的MIME跟XML头1，可以减少浏览器的代码检查，
3.保持结构的完整，不要让浏览器帮你补全代码。
4.控制页面的文件大小，可以通过程序把为了看代码比较舒服的缩进去掉。2~3K也是大小。
5.iframe会产生新的页面，其实有很多方式可以代替iframe
6.引入的JS与CSS可以适当合并，同样背景图片也可以合并，甚至有人连Flash都合并
7.给已知宽高的内容图片/Object加上宽度的属性可以减少页面的局部重渲染

表现上
·质量99跟70的jpg在大多数情况下只有文件有大小不一样。gif的也一样，特别是小图标，256色跟128色的差别是文件大小．
·flash动得太快吃CPU很大，控制每秒的帧数及动画的效果可以减少一些，如果把品质用中低显示会省很多资源，但这样却牺牲了效果。。quality属性有时选择Autolow2 或者Autohigh会更适合，没必要一直low 或者best，
·flash使用矢量图会节省文件大小，但计算复杂的图形跟动画时花的是CPU。复杂的太多滤镜，则会占用大量内存，模糊滤镜有减少些3。
·IE的滤镜也是比较占用内存，同时也有兼容性问题。全屏的半透明很吃资源的。
·2*2的图片跟8*8的图片大小差不多，但是平铺背景2*2却占用大很多。
·gif动画同样有帧的概念，别把gif当成flash来玩就行。

行为上
·别为了使用一个$()引入整个prototype或jQuery，它们有更多的作用。
·AJAX很帅。但是用xml会用上XML解析器，有人推荐用JSON，可是这样要eval数据，其实可以直接import已经是对象的script来用。只是要多传个对象名，或者把对象名写死，或者像flickr那样jsonFlickrApi({”xxx”:”xxx”})，直接当函数用，挖哈哈。
·实现某些效果时能用visibility:hidden解决时就别用display:none来玩。
·在这里强调js变量要注全局跟局部等等的意义并不大，JS复杂的地方也不是一两句能说得清的，关注大家关注月影的正在出版的新书吧。^^
·其实这里有的内容有不少跟如何快速的呈现我们的网页相近，不过那篇是以处理服务端为主，但在很多时候，节省服务端资源消耗的同时也会节省客户端的资源消耗。

再其实，这篇已经蹲在草稿箱里好久了，一直没有时间去整理。现在给的也不是完整的，因为没有完整，慢慢补充吧。

——————————————————————————–

·产生问题：虽然会引起浏览器的模式问题，但问题是可以解决滴。参考Serving up XHTML with the correct MIME type，派送XML头浏览器不会容错显示，出现错误结构会导致整个页面无法显法。
·Autolow: 优先考虑速度，但是也会尽可能改善外观。回放开始时，消除锯齿功能处于关闭状态。如果 Flash Player 检测到处理器可以处理消除锯齿功能，就会打开该功能。
·Autohigh:开始时回放速度和外观两者并重，必要时会牺牲外观来保证回放速度。回放开始时，消除锯齿功能处于打开状态。如果实际帧频降到指定帧频之下，就会关闭消除锯齿功能以提高回放速度。使用此设置可模拟“消除锯齿”命令（“视图”>“预览模式”>“消除锯齿”）。
·模糊滤镜:使用模糊滤镜时，如果用于 blurX 和 blurY 的值是 2 的整数次幂（例如 2、4、8、16 和 32），则可以加快计算速度，并且可以使性能提高 20% 到 30%（flash的帮助是介样说滴）。

Flash输出多层嵌套节点的xml文档

Posted by koma on November 23, 2007 under 前端技术与RIA开发

<?xml version=”1.0″?>
<!–xml-002.xml–>
<firstNode name=”1″>
<childNode name=”1.1″>
<Node name=”1.1.1″ />
<Node name=”1.1.2″ />
<Node name=”1.1.3″ />
</childNode>
<childNode name=”1.2″>
<Node name=”1.2.1″ />
<Node name=”1.2.2″ />
<Node name=”1.2.3″ />
</childNode>
<childNode name=”1.3″>
<Node name=”1.3.1″ />
<Node name=”1.3.2″ />
<Node name=”1.3.3″ />
</childNode>
</firstNode>

上面是一个多层嵌套节点的xml文档.结构是一个顶层节点中,嵌套3个子级节点,3个子级节点分别嵌套3个子级节点.

flash文档第一帧的代码

//xml-002.fla.
//实例化一个xml对象.
var myxml:XML = new XML();
//分析时忽略xml文档中的空格.
myxml.ignoreWhite = true;
//加载xml-002.xml文档.
myxml.load(”xml-002.xml”);
//调用XML.onLoad事件.
myxml.onLoad = function(success:Boolean)
{
//如果加载成功,success=true;否则success=false;
if (success) {
trace(”加载成功!”);
//输出顶层节点的节点名和顶层节点中属性name的值.
trace(myxml.firstChild.nodeName+”:”+myxml.firstChild.attributes.name);
//用一个数组来引用顶层节点中子级节点的数组.
var child_arr:Array = myxml.firstChild.childNodes;
//用嵌套for语句遍历出xml文档中的所有数据.
//这个for遍历的是顶层节点下的子级节点.
for (var i = 0; i<child_arr.length; i++) {
//输出顶层节点下的子级节点的节点名和顶层节点下的子级节点中属性name的值.
trace(child_arr[i].nodeName+”:”+child_arr[i].attributes.name);
//这个for遍历的是顶层节点下的子级节点下的子级节点.
for (var j = 0; j<child_arr[i].childNodes.length; j++) {
//输出顶层节点下的子级节点下的子级节点的节点名和顶层节点下的子级节点下的子级节点中属性name的值.不要晕.看看输出面板就会明白它们之间的关系了哦.
trace(child_arr[i].childNodes[j].nodeName+”:”+child_arr[i].childNodes[j].attributes.name);
}
}
} else {
trace(”加载失败!”);
}
};

web服务器架设中的一些遭遇

Posted by koma on November 21, 2007 under 前端技术与RIA开发

最近几天忙于调试一个培训管理系统，主要是实现客户内部网络内计算机可访问管理系统，并且管理系统与网站之间的数据互通。

由于在这方面缺乏经验（主要是配置急及.net2.0），开始阶段比较吃力。甚至于都不能把系统在本地测试起来。

这个过程中主要是没有主要到以下几个问题：

1.iis在.net2.0上的设置。没有把framework从1.0升级到2.0。在.net方面的知识实在是太匮乏。
2.没有注意到系统的设置。该系统可以设置为单机版，局域网，广域网，局域网+广域网四种模式。

经过一段时间的折腾，才看到该系统的真实面目。

c#写的程序我看不懂，甚至于想把一个类似于asp里<%=id%>的从数据库传递过来的信息给删掉都不会，最后只能用margin-left:-999em给挪走。

很尴尬。

一直以来都不是很倾向于要去学习.net领域内的技能，因为我站在很无知的姿态认为这个领域实在是庞大，而且我的目标在前端，后台我只想在下一个阶段好好修炼一下php.

现在看来，有些领域，不触及触及就不会对以后的工作有利。

今天终于把最需要实现的功能都实现了，只是在端口映射上面还是无法前行，因为想用动态ip访问我的web服务器，只能把路由器的端口映射到我的主机上。查阅了很多资料，就是实现不起来。

下班前又把安装配置过程重温了一遍，不幸的是我的iis又出现了http 500d的错误。

明天把文档撰写一下这个事情应该算是了结了，就等着实际安装了。

经验很重要。

浏览器的困扰

Posted by koma on November 1, 2007 under 前端技术与RIA开发

项目中还是出现了一些浏览器不兼容的问题，布局基本上没有问题，javascript那边开始不能很好的兼容了。

我仔细研究了一下，有些代码如果不加DOCTYPE那么需要javascript支持的效果也是能正常显示，但是，IE下其他地方却出现了错位等现象，原因是DOCTYPE定义了代码的解释方式，有些代码IE是很难理解的。

我所权衡的是到底是放弃FF下的Js效果还是把Doctype去掉然后针对IE6写hack。

最终我还是放弃了FF下的特效，因为Doctype是起码的标准基础，没有这个是不行的，这个可以在阿捷的网站看到。另一方面，我们的项目所面向的使用群体大多数使用的还是IE浏览器，IE6尚不会那么快退出历史舞台，就算IE6退出了，IE7也是他们的首选，毕竟IE7将是系统捆绑的浏览器，IE7又开放非正版用户的注册了。

想来想去，其实还是自己的技术不精，还是很难把几个浏览器熟练的使用，把他们脾性都了解的很清楚，还是会有时候被他们的作怪搞得有点烦。不应该去埋怨标准的不统一，应该更好的去了解他们。

记得看过一篇文章，作者以一个opera使用者的身份倡导开发者使用较少的ajax，毕竟很多浏览器根本就是不支持的。想想也是，搞那么多花哨的东西出来，主流的IE浏览器才支持到DOM1，好多人还是无法接受一个被误解了的界面的。宁缺毋滥。

项目最终还是完成了，浏览器的困扰是没完没了的。假如做梦梦见一个比较开心的是事情，浏览器标准的慢慢统一应该算是其中一个吧。