<?xml version="1.0" encoding="UTF-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
  <title type="html"><![CDATA[前端生活日记]]></title>
  <subtitle type="html"><![CDATA[xhtml,css,javascri&#112;t,浏览器解析]]></subtitle>
  <id>http://www.htmlwind.com/</id>
  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/" /> 
  <link rel="self" type="application/atom+xml" href="http://www.htmlwind.com/atom.asp" /> 
  <generator uri="http://www.pjhome.net/" version="2.8">PJBlog3</generator> 
  <updated>2010-01-11T19:54:27+08:00</updated>

  <entry>
	  <title type="html"><![CDATA[腾讯ISD招聘页面重构工程师（代朋友发）]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=7" label="前端交互" /> 
	  <updated>2010-01-11T19:54:27+08:00</updated>
	  <published>2010-01-11T19:54:27+08:00</published>
		  <summary type="html"><![CDATA[招聘职位：页面重构工程师<br/>招聘要求：<br/>1，对符合web标准的网站重构有丰富经验，有成功案例；<br/>2，精通结构化语言xhtml、xml与解释性语言css；<br/>3，精通图像处理软件与网页编辑软件；<br/>4，对业界最新的页面实现有浓厚的兴趣和深入的见解；<br/>5，逻辑分析能力强，善于沟通，较强的学习能力；<br/>6，熟悉对象模型与脚本语言，有前台开发经验者优先考虑；<br/><br/>招聘截至时间：2010年5月<br/><br/>如果你想应聘该职位，请发简历到csspeople@gmail.com，我们会尽快联系您。<br/><br/>如果你对<a href="http://www<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com" target="_blank">javascript</a>还有点兴趣，也可以联系我。315014425@qq.com,QQ宠物也招聘前端中。。<br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=59" /> 
	  <id>http://www.htmlwind.com/default.asp?id=59</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[web前端职业的渗透]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=7" label="前端交互" /> 
	  <updated>2009-12-27T10:50:11+08:00</updated>
	  <published>2009-12-27T10:50:11+08:00</published>
		  <summary type="html"><![CDATA[<span style="color:Red">在大部分人眼里，可能做web前端仅仅是将设计稿实现成demo</span>，然后实现demo以后的事情可能他们就不怎么过问了。这个demo可能仅仅是静态的html加填充数据和CSS组成，当然还有可能有页面动态效果的JS组成。当然这个demo在绝大多数情况下都能还原设计稿，甚至能多些设计稿上不能表现出来的行为。<br/>这些前端工程师都很厉害，具备很多方面的能力，他们不仅要用PS处理设计稿，还要实现浏览器兼容，有些还要处理行为层的交互。但是实际上一作为一个真正的开发者，这样的心态还是远远不够的.当然我们可能还需要一些其他方面知识的积累。<br/><br/><span style="color:Red">很多做web前端的看起来更像一个页面制作者，而不是页面开发者</span>。页面制作者和页面开发者的区别在我看来可能是是否给页面赋予了新的生命。如果仅仅想到还原设计稿的话，也许你很难使自己有创造性思维。但作为一个开发者，还原设计稿仅仅是基础，如何组织页面的结构，如何提高页面的控制力（哪怕是页面中最细微的一个元素，你也能在日后不修改结构的情况下控制其表现和行为），如果页面需要经过下一位开发，你的页面是否方便他处理，如果页面在你这里是开发的终点，你是否考虑过页面上出现的各种可能性以及页面的出入口是否合理等等。<br/><br/><span style="color:Red">也有很多人认为web前端需要的只是html+css+<a href="http://www<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com" target="_blank">javascript</a></span>，其实这三个方面的技能仅仅是你做web前端的一个基础，如何利用者三个方面的技能合理的解决问题才是我们追求的。另外，对产品的熟知程度和对周边应用接口的了解也有助于我们快速解决问题，其实有时候有些问题有肯能在这些技能之外的，这就需要你开阔的思维和敏锐的观察力。JS很多时候都能给flash的交互提供很好的数据支持，比如获取cookie，数据中转，通过互调双方的函数可以实现一些很有意思的交互，这些其实很简单，你只要明白如何调用flash提供的接口就可以开始玩了.<br/><br/><br/><span style="color:Blue">web前端应当更具责任感</span>。我们对产品的综合认知和快速反应能力应当给人留下深刻印象。也许我们有时候面对的问题不仅仅是前端问题，也有产品的问题或者其他的问题，如何快速定位问题和找出解决的方案这也是需要有一定的综合素养的，尽管很多问题可能仅仅需要你定位到其他负责人即可。多多了解你得队友以及你的队友的处理方式对你很有好处的，面对问题，永远不要退缩，大胆站出来吧。<br/><br/><br/><span style="color:Blue">其实web前端更多的时候应该参与到产品的策划与设计中去</span>。很多web前端工程师都是对用户界面及用户体验方面很有研究的，再结合web前端架构方面得经验是可以对产品提出很多建设性的意见的。当然也有一个原则：我们可以为用户体验的优势去提设计建议，但不能为减少前端架构的复杂程度去影响设计。我想这也是我们任何时候都应该坚持的一个客观的原则，从整个产品的角度来做产品，而不仅仅是web前端。<br/><br/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=58" /> 
	  <id>http://www.htmlwind.com/default.asp?id=58</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[QQ宠物产品组招聘web前端开发工程师]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=10" label="javascript" /> 
	  <updated>2009-12-19T14:32:22+08:00</updated>
	  <published>2009-12-19T14:32:22+08:00</published>
		  <summary type="html"><![CDATA[职位: 前端开发工程师 <br/>待遇: 面议<br/>有效期至: 2009-02-31 <br/>工作地点: 深圳南山区 <br/>公司名称: 腾讯公司 <br/>简历投送邮箱: 315014425@qq.com <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;windli@tencent.com<br/><br/><br/>学历: 大专以上 <br/>是否应届: 非应届 <br/>年龄要求: 23以上 <br/>性别要求: 不限 <br/><br/><br/>职位描述：<br/>1. 负责QQ宠物产品的前端开发工作，与后台开发人员配合实现社区的交互。 <br/>2.参与产品的研究与规划 ； <br/>3.负责产品前端方案的实施与优化；<br/>职位要求：<br/>1.大专以上学历；<br/>2.2年以上前端开发经验；有大型Web项目开发经验者尤佳; 有从事过网页游戏开发经验者优先； <br/>3. 精通HTML、CSS、JavaScript等前台相关技术,熟悉W3C网页标准,了解至少一种后台语言的开发机制(如php，Java等)； <br/>4. 能熟练运用一种常见AJAX框架,如Jquery等，参与或者开发过某种JS框架者尤佳； <br/>5.熟悉面向对象编程，对JS性能优化有一定了解。<br/>6. 强烈欢迎敢于面对问题、善于解决问题，善于学习，善于沟通，人品好的同学； <br/><br/>补充说明：本职位招聘2-3人，欢迎深圳及深圳周边的同学请快快加盟吧。<br/><br/>我们为您提供：自由的工作环境，团结友爱的团队，丰富多彩的业余活动（篮球协会，羽球协会，足球协会，台球协会，舞蹈协会等等），不定期的腐败活动，行业内有竞争力的薪酬等等。所有这一切只是为了让您感受，这不仅仅是一份工作，也可以做为您的事业，您的生活！<br/><br/>如有不明事宜可联系QQ315014425或者致电 86013388-83073（9：30-17：30，周一到周五）]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=52" /> 
	  <id>http://www.htmlwind.com/default.asp?id=52</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[CSS的常见误区释疑]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=9" label="web标准" /> 
	  <updated>2009-11-14T10:32:40+08:00</updated>
	  <published>2009-11-14T10:32:40+08:00</published>
		  <summary type="html"><![CDATA[经常在群里或者论坛上看到有些同学会说CSS用这个属性不行，用那个属性不行，会存在这样或那样的问题等等。现就这些常见的问题来进行分析，也希望很多同学能从问题的本质上去分析问题，<br/><span style="color:Blue"><strong>常见误区1：margin属性不能随便用，会有不兼容的问题出现</strong></span><br/>分析：margin属性存在不兼容的情况其实都大部分都跟浮动有关系。还有个特殊情况就是对margin塌陷的解释，这个已经很耳熟能详了，这里就不多叙述了。<br/>跟浮动有关的margin不兼容问题最为大家熟知的就是<span style="color:Red">IE6浮动元素的左右双倍边距bug</span>。这个问题不难解决，大部分人也知道怎么解决，每次使用margin的时候在脑海中过下这个bug，并随手解决之。<br/>另外两个出现margin兼容性的点就很有意思了，这个出现在纵向margin上。<br/><span style="color:Blue">IE中出现双倍margin-bottom</span><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.htmlwind.com/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp57332"> <!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Strict//EN&#34; &#34;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>&#34;>
<html xmlns=&#34;<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>&#34;>

<head>
 
 <title>浏览器差异研究</title>
</head>

<body>
<div style=&#34;background:#666;float:left;&#34;>aaaaaa
 <div style=&#34;margin-bottom:10px;background:#ffe;&#34;>bbbb</div>
 <div style=&#34;float:left;width:200px;background:#fef&#34;>ccccc</div>
</div>
</body>

</html> </TEXTAREA><br/><INPUT onclick="runEx('temp57332')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp57332')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp57332')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/>中间的div因为下面跟了一个浮动的div，它的margin值在IE中被解释了两次。<br/>IE在解释这类block元素的margin-bottom值的时候，会将这个间距解释在另一个block元素之上（如下边代码），如果该元素下面没有block元素，则将这个间距解释到其父元素之上。如果其父元素是浮动元素自适应高度的话，就会在其padding-bottom值上面再产生一个间隙。而这类block元素下面的浮动层同样也意识到了这个margin-bottom的存在。这样一个margin-bottom就被解释了两次。<br/><br/><span style="color:Blue">firefox中margin-top消失之谜。</span><br/>摘要：浮动元素下面接非浮动元素时，非浮动元素如果有margin-top值，这个margin-top值仿佛在firefox中消失了。<br/>分析：1.firefox在解释非浮动元素margin-top或者margin-bottom的时候只能以上一个非浮动元素的相邻界线或者以父元素的对应padding的界限作为参考点。<br/>2,firefox在解释浮动元素的margin值的时候则是以相邻方向距离最近的元素的边界做为参考点。这个元素可以是浮动的也可以是非浮动的，但不能是绝对定位的。<br/>更多解释：firefox中margin-top消失之谜<a target="_blank" href="http://www.<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com/article.asp?id=12" rel="external">http://www.<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com/article.asp?id=12</a><br/><br/><span style="color:Blue"><strong>常见误区2：padding属性不能随便用，会有不兼容的问题出现</strong></span><br/>分析：padding属性在CSS中已经算兼容性比较好的，但是并不是所有的东西都会如你想象的那样。<br/>首先不要对行内元素使用padding和定义宽高，因为它们会无视，如果需要对他们使用的话，请将其绝对定位，浮动或者定义块等等。<br/>如果元素A包含一个浮动元素B，你得清除浮动才能让A自适应B高度，如果你仅使用overflow属性的话，也许高度是自适应了，但A的padding-bottom就消失了。当然如果A元素是个浮动元素或者绝对定位元素的话这一切就不必担心了，它就会完全的自适应。另外还有个很俗的办法就是给A定义高度。<br/>另外有些关于padding的兼容性问题实际上是padding做了line-height的冤大头。如果定义line-height为相对值的时候（1.7或者170%），各浏览器解析会有些差异。这时候在一些input元素上再定义padding的值会使input有些大小的差异。<br/><br/><br/><span style="color:Blue"><strong>常见误区3：绝对定位和相对定位要少用，不好控制</strong></span><br/>说实话，绝对定位和相对定位都是好东西，有时候需要快速解决问题，或者需要解决问题用他们都能帮忙搞定。<br/>使用绝对定位，你需要明白：绝对定位元素会以跟自己关系最近的一个定位（相对定位或者绝对定位）的父级元素或者父级的父级的元素的四个角作为参考点。绝对定位元素不会像其他文档元素一样会考虑父元素的padding值。绝对定位元素的参考只会以定位的父元素的margin，border值之内的角点，而不会受其padding值影响。<br/>当然绝对定位元素在IE6中也会存在一些bug。<br/>摘要：当一个绝对定位元素后面跟一个浮动元素之后，这个绝对定位元素就蒸发了..<br/>延伸阅读：position:absolute问题<a target="_blank" href="http://www.<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com/article.asp?id=44" rel="external">http://www.<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com/article.asp?id=44</a><br/><br/>相对定位问题：通常对一个元素使用相对定位不会对该元素造成多大的影响，仅仅是给其下的绝对定位元素建立一个定位参考点。<br/>当然那只是通常情况下。如果在IE中，你再这个相对定位元素使用overflow属性的话，你会发现这个相对定位元素就开始拥有了绝对定位元素的一些属性了。<br/>如果父元素使用了overflow:hidden 这个相对定位元素超出父元素的不会被截断。<br/>如果父元素使用overflow：auto，这个相对定位元素不会随父元素的滚动条而滚动。<br/><br/>我分析的就这么多，基本上没给出具体的解决方案。很多时候很多人都喜欢去找解决方案，而不去思考问题，其实解决方案就在问题产生的原因里。<br/>如果你知道天气预报说今天下雨你又不做准备的话，那被雨淋湿了就是你自己的问题了.<br/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=57" /> 
	  <id>http://www.htmlwind.com/default.asp?id=57</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[SNS合作项目前端开发思路整理]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=7" label="前端交互" /> 
	  <updated>2009-10-01T21:39:22+08:00</updated>
	  <published>2009-10-01T21:39:22+08:00</published>
		  <summary type="html"><![CDATA[最近有个宠物跟互联网那边的合作项目，由于人手严重不够，只能每周做两天宠物做三天sns，前后不到十个工作日完成了这个sns大致的功能模块。因为sns带来的流量很大，需要尽可能考虑到减少服务器压力的方向来设计。在这个合作项目中，所有的数据拉取以及数据交互逻辑这块都交给了前端来处理，flash与后台之间的通信业通过JavaScript来中转。后台仅提供cgi的数据接口。<br/>需要处理的数据有：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code74663);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code74663><br/>用户的基本信息[头像昵称，各种属性点，体力，生命值，拥有武器，技能]<br/>用户的社区信息[社区形象，昵称，社区属性，等级，其他资料]<br/>好友的基本信息[头像昵称，各种属性点，体力，生命值，拥有武器，技能]<br/>好友的社区信息[社区形象，昵称，社区属性，等级，其他资料]<br/>商店的数据[武器，道具，技能]<br/>用户的留言信息[打斗后的留言，好友的赠送信息]<br/>用户的事件动态[打斗后的结果信息，系统经验和道具的获得信息]<br/>用户的好友列表[开通应用的列表，最近打斗的好友列表]<br/></div></div><br/>结合这些数据的基础功能点有：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code47556);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code47556><br/>查看个人和好友的基本信息<br/>查看个人和好友的社区信息<br/>购买和赠送物品，使用物品<br/>查找好友<br/>与好友打斗<br/>给好友留言<br/>删除好友留言<br/>观看打斗录像<br/></div></div><br/>其他表现性功能：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code55437);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code55437><br/>选项卡切换<br/>通用浮层<br/>购买，赠送，打斗，查看录像弹出框页面交互表现<br/></div></div><br/>其他交互功能<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code5235);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code5235><br/>与flash之间的交互处理<br/></div></div><br/>部分思路：<span style="color:Blue">所有页面均为静态页面，一个主页面创建一个全局sns对象缓存所有请求接收的数据。页面加载时候根据用户登录的cookie中的id向服务器请求其基本信息及好友信息。每次请求前都会判断sns对象中有没有相应的数据，没有才会向服务器发出请求。同时给有时效性的资料属性添加一个时间变量，以判断资料是否过期。</span><br/>这样还会有些特例，当使用某个道具以及与好友打斗都会引起某些资料和数据的即时更新，就需要有一个强制请求数据的方法。<br/><br/><strong>一个简单的静态页面动态化的例子：</strong><br/>以购买为例，用户购买某个物品时给sns对象赋值新增临时的购买属性，用于存储购买赠送物品的ID及物品属性，同时弹出遮罩层窗口，加载购买页面，加载购买页面的时候调入父窗口sns对象的临时属性，写入页面（页面初始没有内容，只有相关的标签架构）。将物品ID存入页面，同时清除父窗口的相关临时数据。当用户点击购买的时候，可以调用父窗口的购买方法，获得相关返回值以后提示给用户。]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=56" /> 
	  <id>http://www.htmlwind.com/default.asp?id=56</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[IE中使用滤镜所及可能引起的内存泄漏]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=7" label="前端交互" /> 
	  <updated>2009-09-20T10:02:40+08:00</updated>
	  <published>2009-09-20T10:02:40+08:00</published>
		  <summary type="html"><![CDATA[以前写过的一篇alert框美化的日志，在这个alert框美化的过程中发现了很多问题，最近抽出时间来整理了下。<br/>用JS来模拟alert框，肯定会需要到一个不透明的遮罩层。对这个遮罩层使用滤镜的时候无意中发现一个问题。<br/>当时的js主体思路如下：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code49833);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code49833><br/>&#160;&#160;&#160;&#160;function $t(s){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return document.all?document.all[s]:document.getElementById(s);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//弹出框调用函数<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;function sAlert(msg,boxtype,func,msgtitle){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//创建一个遮罩层<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var bgObj=document.cr&#101;ateElement(&#34;div&#34;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;bgObj.setAttribute(&#39;id&#39;,&#39;bgDiv&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;bgObj.style.zIndex = &#34;100&#34;;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;document.body.appendChild(bgObj);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//创建一个内容层<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var msgObj=document.cr&#101;ateElement(&#34;div&#34;)<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;msgObj.setAttribute(&#34;id&#34;,&#34;msgDiv&#34;);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msgObj.style.marginLeft = &#34;-127px&#34;;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msgObj.style.marginTop =&nbsp;&nbsp;-145+document.documentElement.scrollTop+&#34;px&#34;;;<br/>&nbsp;&nbsp;&nbsp;&nbsp; <br/>&#160;&#160;&#160;&#160;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//添加内容和按钮等等<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; var txt=document.cr&#101;ateElement(&#34;div&#34;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; txt.setAttribute(&#34;id&#34;,&#34;msgTxt&#34;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; txt.innerHTML =&nbsp;&nbsp;msg;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; var msgButton=document.cr&#101;ateElement(&#34;h5&#34;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; msgButton.setAttribute(&#34;id&#34;,&#34;msgButton&#34;);<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; document.body.appendChild(msgObj);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; $t(&#34;msgDiv&#34;).appendChild(txt);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; $t(&#34;msgDiv&#34;).appendChild(msgButton);<br/>&nbsp;&nbsp; <br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; var Confirm=document.cr&#101;ateElement(&#34;input&#34;);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Confirm.setAttribute(&#34;id&#34;,&#34;msgConfirm&#34;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; Confirm.setAttribute(&#34;type&#34;,&#34;button&#34;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp; Confirm.setAttribute(&#34;value&#34;,&#34;确认&#34;);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Confirm.onclick=function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp;&nbsp;&nbsp;msg_close();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;eval(func);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; $t(&#34;msgButton&#34;).appendChild(Confirm); <br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; //关闭alert,移除添加的dom元素。<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&nbsp;&nbsp;&nbsp;&nbsp;function msg_close(){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.removeChild(msgObj);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.removeChild(bgObj);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/></div></div><br/>这单独只有这段JS不会引起内存的不释放。<br/>当我给遮罩层添加了滤镜以后，问题就出现了。你可以运行下面的代码框，打开任务管理器检测IE的内存使用情况，每调用弹出框一次，内存会固定增加几K（视机器配置而定，可能会有不同，但累加的数量基本相同）。<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.htmlwind.com/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp93222">
 
<!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>&#34;>
<html xmlns=&#34;<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>&#34; xml:lang=&#34;zh-CN&#34; lang=&#34;zh-CN&#34;>
	<head>
	<title>弹出框测试页面</title>
		<meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34; />
		<meta http-equiv=&#34;Content-Language&#34; content=&#34;gb2312&#34; />
	

	<style type=&#34;text/css&#34;>
	/*<![CDATA[*/
	    *{
		        margin:0;padding:0;
		    }
			h5{color:red;padding:10px;}
			ul li{list-style-type:none;}
		    html,body{height:100%;}
			#textid{padding:10px}
			#bgDiv{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;
			        filter:alpha(opacity:75);opacity:0.6;}
            #msgDiv{text-align:center;position:absolute;left:50%;top:50%;line-height:25px;z-index:101;
			              padding:1px 0 25px;font-size:12px;height:auto!important;height:142px;min-height:142px;
						  width:255px;background:url(attachments/month_0904/g200942816344.gif) left top #fff repeat-y;} 
            #msgTxt{clear:both;padding:10px 10px;text-align:left;}
			#msgTxt li{border-bottom:1px dotted #69a;}
			#msgButton input{border:1px solid #369;color:#000;background:#eef5ff;cursor:pointer;
			font-size:12px;height:20px;padding:0 5px;line-height:20px;margin:0 5px;}
			#msgButton{position:absolute;bottom:0px;left:0;width:255px;text-align:center;height:20px;padding:8px 0 6px;
			       background:url(attachments/month_0904/l200942816354.gif) left top repeat-y;}
	  #msgRun{width:600px;margin:0 auto;padding:10px;background:#fff5ee;border:1px solid #f80;}
	  #msgRun ul{margin:10px;padding:10px;background:#fff;border:1px solid #f85;font-size:12px;}
	  #msgRun ul li{border-bottom:1px dotted #ccc;line-height:25px;}
	  input {cursor:pointer;}
	  p{padding:5px;}
	  textarea{width:580px;overflow:hidden;height:60px;padding:5px;}
	/*]]>*/
	</style>
	<script type=&#34;text/<a href="http://www<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com" target="_blank">javascript</a>&#34;>
	function $t(s){
				return document.all?document.all[s]:document.getElementById(s);
            }
            //弹出框调用函数
			function sAlert(msg,boxtype,func,msgtitle){
			
			//创建一个遮罩层
			var bgObj=document.cr&#101;ateElement(&#34;div&#34;);
			bgObj.setAttribute('id','bgDiv');
			bgObj.style.zIndex = &#34;100&#34;;
			document.body.appendChild(bgObj);
			
			//创建一个内容层
			var msgObj=document.cr&#101;ateElement(&#34;div&#34;)
			msgObj.setAttribute(&#34;id&#34;,&#34;msgDiv&#34;);
            msgObj.style.marginLeft = &#34;-127px&#34;;
            msgObj.style.marginTop =  -145+document.documentElement.scrollTop+&#34;px&#34;;;
     
	      //添加内容和按钮等等
		   var txt=document.cr&#101;ateElement(&#34;div&#34;);
		   txt.setAttribute(&#34;id&#34;,&#34;msgTxt&#34;);
		   txt.innerHTML =  msg;
		   var msgButton=document.cr&#101;ateElement(&#34;h5&#34;);
		   msgButton.setAttribute(&#34;id&#34;,&#34;msgButton&#34;);

		   document.body.appendChild(msgObj);
		   $t(&#34;msgDiv&#34;).appendChild(txt);
		   $t(&#34;msgDiv&#34;).appendChild(msgButton);
   
		   var Confirm=document.cr&#101;ateElement(&#34;input&#34;);
           Confirm.setAttribute(&#34;id&#34;,&#34;msgConfirm&#34;);
		   Confirm.setAttribute(&#34;type&#34;,&#34;button&#34;);
		   Confirm.setAttribute(&#34;value&#34;,&#34;确认&#34;);
           Confirm.onclick=function(){
		    msg_close();
			eval(func);
                }
             
		 $t(&#34;msgButton&#34;).appendChild(Confirm); 

		 //关闭alert,移除添加的dom元素。
		    function msg_close(){
            document.body.removeChild(msgObj);
			  document.body.removeChild(bgObj);
            }
            }
	window.onload=function(){
	     $t(&#34;runcode&#34;).onclick=function(){
		   var code=$t(&#34;code&#34;).innerHTML;
		   eval(code);
		 }
	}

	</script>
	</head>

	<body>
	<br />
	<div id=&#34;msgRun&#34;>
	    
		<div>
		<h5>请用IE打开，同时打开任务管理器，监察下每次调用弹出框后IE所占用的内存情况：</h5>
         <input type=&#34;button&#34; value=&#34;弹出框&#34; onclick=&#34;sAlert('测试效果2',1);&#34; />
		 <input type=&#34;button&#34; value=&#34;确认框&#34; onclick=&#34;sAlert('确认框',2,'','宠我宝贝');&#34; />
		<input type=&#34;button&#34; value=&#34;提示框&#34; onclick=&#34;sAlert('提示框');&#34; />
		</div>
		<br />
	   <h4>function sAlert(msg,boxtype,func,title)</h4>
	  <ul>
	   <li >sAlert('信息内容',1,'','信息标题')</li>
	   <li >@msg:提示信息内容</li>
	   <li >@boxtype：1为弹出框，2为确认框，3为提示框</li>
	   <li >@func:点确认时执行的函数</li>
	   <li >@title:信息框标题文字内容</li>
	   <li >只有msg是必须的，后面的参数可以省略。如果中间的参数为空则在对应位置上''或者&#34;&#34;表示（根据实际情况选择单双引号）</li>
	  </ul>


     <p><b>测试环境：可以在下面的文本框里按上面要求的格式函数进行测试：</b></p>
    <p ><textarea rows=&#34;5&#34; cols=&#34;60&#34; id=&#34;code&#34;>sAlert('信息内容',1,'','信息标题')<&#47textarea></p>
	<p ><input type=&#34;button&#34; value=&#34;运行函数&#34; id=&#34;runcode&#34; /></p>
	</div>
	

	</body>
</html>
</TEXTAREA><br/><INPUT onclick="runEx('temp93222')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp93222')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp93222')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/>有一次无意中发现宠物社区调用这个弹出框时会增加几K内存，后来经过查找源码分析发现问题跟IE的滤镜有关系，更大的问题是个人对这方面的意识问题。事件就是这样发生的：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code88545);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code88545><br/>调用sAlert函数<br/>创建一个遮罩层，用滤镜渲染这个遮罩层，IE占用内存nk<br/>关闭弹出窗口，移除遮罩层（使用滤镜渲染的内存仍然存在）<br/>再次调用弹出框<br/>再次创建一个遮罩层，用滤镜渲染这个遮罩层，IE增加占用内存nk<br/>关闭弹出窗口，移除遮罩层（使用滤镜渲染的内存仍然存在）<br/>..............<br/></div></div><br/>虽然社区用户在正常情况下，这个弹出框的使用频率不会太高。但是这个严重的问题还是存在，也必须得结局。<span style="color:Navy">这个例子也可以用来测试下不同系统下不同IE版本对不同滤镜渲染的所占用的内存大小。</span>你可以将运行代码中的css代码中的#bgDiv中所用的滤镜修改成你要测试的滤镜类型。<br/>解决办法：<br/><span style="color:Blue">既然在IE中使用滤镜不可避免的要占用内存，我们的目标就是指渲染一次（也就是遮罩层只创建一次）。</span><br/>关闭弹出框的时候将遮罩层隐藏，下次打开的时候再将其显示。<br/>部分代码如下：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code98967);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code98967><br/>&#160;&#160;&#160;&#160;function sAlert(msg,boxtype,func,msgtitle){<br/>//如果#msgDiv存在，则返回&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br/>if($t(&#39;msgDiv&#39;)) return;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//如果遮罩层存在，则将其显示&#160;&#160;&#160;&#160;<br/>if($t(&#39;bgDiv&#39;)){$t(&#39;bgDiv&#39;).style.display=&#34;block&#34;;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}else{<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var bgObj=document.cr&#101;ateElement(&#34;div&#34;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;bgObj.setAttribute(&#39;id&#39;,&#39;bgDiv&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;document.body.appendChild(bgObj);<br/><br/>......<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //关闭弹出框，将遮罩层隐藏<br/>&#160;&#160;&#160;&#160;function msg_close(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$t(&#34;bgDiv&#34;).style.display=&#34;none&#34;;<br/>....<br/>}<br/></div></div><br/>运用中的效果如下<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.htmlwind.com/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp58378">
 
<!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>&#34;>
<html xmlns=&#34;<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>&#34; xml:lang=&#34;zh-CN&#34; lang=&#34;zh-CN&#34;>
	<head>
	<title>弹出框测试页面</title>
		<meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34; />
		<meta http-equiv=&#34;Content-Language&#34; content=&#34;gb2312&#34; />
		<script type=&#34;text/<a href="http://www<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com" target="_blank">javascript</a>&#34; src=&#34;<a href="http://img.pet.qq.com/2009/alert/alert.js" target="_blank" rel="external">http://img.pet.qq.com/2009/alert/alert.js</a>&#34;></script>
		<link rel=&#34;stylesheet&#34; href=&#34;<a href="http://img.pet.qq.com/2009/alert/alert.css" target="_blank" rel="external">http://img.pet.qq.com/2009/alert/alert.css</a>&#34; media=&#34;all&#34; />
	

	<style type=&#34;text/css&#34;>
	/*<![CDATA[*/

			
	  #msgRun{width:600px;margin:0 auto;padding:10px;background:#fff5ee;border:1px solid #f80;}
	  #msgRun ul{margin:10px;padding:10px;background:#fff;border:1px solid #f85;font-size:12px;}
	  #msgRun ul li{border-bottom:1px dotted #ccc;line-height:25px;}
	  input {cursor:pointer;}
	  p{padding:5px;}
	  textarea{width:580px;overflow:hidden;height:60px;padding:5px;}
	/*]]>*/
	</style>
	<script type=&#34;text/<a href="http://www<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com" target="_blank">javascript</a>&#34;>
	function $t(s){
				return document.all?document.all[s]:document.getElementById(s);
            }
          
	window.onload=function(){
	     $t(&#34;runcode&#34;).onclick=function(){
		   var code=$t(&#34;code&#34;).innerHTML;
		   eval(code);
		 }
	}

	</script>
	</head>

	<body>
	<br />
	<div id=&#34;msgRun&#34;>
	    
		<div>
		<h5>请用IE打开，同时打开任务管理器，监测下每次调用弹出框后IE所占用的内存情况：</h5>
         <input type=&#34;button&#34; value=&#34;弹出框&#34; onclick=&#34;sAlert('测试效果2',1);&#34; />
		 <input type=&#34;button&#34; value=&#34;确认框&#34; onclick=&#34;sAlert('确认框',2,'','宠我宝贝');&#34; />
		<input type=&#34;button&#34; value=&#34;提示框&#34; onclick=&#34;sAlert('提示框');&#34; />
		</div>
		<br />
	   <h4>function sAlert(msg,boxtype,func,title)</h4>
	  <ul>
	   <li >sAlert('信息内容',1,'','信息标题')</li>
	   <li >@msg:提示信息内容</li>
	   <li >@boxtype：1为弹出框，2为确认框，3为提示框</li>
	   <li >@func:点确认时执行的函数</li>
	   <li >@title:信息框标题文字内容</li>
	   <li >只有msg是必须的，后面的参数可以省略。如果中间的参数为空则在对应位置上''或者&#34;&#34;表示（根据实际情况选择单双引号）</li>
	  </ul>


     <p><b>测试环境：可以在下面的文本框里按上面要求的格式函数进行测试：</b></p>
    <p ><textarea rows=&#34;5&#34; cols=&#34;60&#34; id=&#34;code&#34;>sAlert('信息内容',1,'','信息标题')<&#47textarea></p>
	<p ><input type=&#34;button&#34; value=&#34;运行函数&#34; id=&#34;runcode&#34; /></p>
	</div>
	

	</body>
</html>

</TEXTAREA><br/><INPUT onclick="runEx('temp58378')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp58378')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp58378')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=55" /> 
	  <id>http://www.htmlwind.com/default.asp?id=55</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[由html语意化产生的联想]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=9" label="web标准" /> 
	  <updated>2009-07-12T12:14:53+08:00</updated>
	  <published>2009-07-12T12:14:53+08:00</published>
		  <summary type="html"><![CDATA[<a target="_blank" href="http://www.w3.org/News/2009#item119" rel="external">w3c将在2009年底停止xhtml2工作组，并将大量资源用到html5，以加快html5的进程。</a><br/>相信这条消息使很多人都很振奋，振奋之后，很多人将目光转移到IE6的消失问题上了。不错，IE是的却给web重构人员带来了很多困惑和麻烦，但从用户角度来看，这是一款启动速度快，容错性好的浏览器。IE6在CSS的表现和支持上确实存在很多差强人意的地方，但就现阶段针对xhtml语意化这个命题来说，应该是可以脱离浏览器来讨论的.<br/><br/>html5相对于html4增加了大量有语意的标签，很多常用格式的内容都有其自身合适的标签，免去了很多是为了用dl还是ul之类的争论。当然，我还关心其对盒模型的解释是否与xhtml一致，以及部分富有争议的标签的嵌套规则及应用，这些都是比较遥远的事情。<br/><br/>现阶段支持大部分html5的浏览器有safari 4.0何firefox3.5，你也可以这么理解，所有非以上两个浏览器的用户没有升级为未来的版本之前（如IE的用户没有升级为IE8以后的版本等等），他们的浏览器都是不支持html5的.所以IE6的消失并不能代表进入了html5时代，xhtml1.0还有很长的一段路要走。<br/><br/>如果说html5对语意的支持是达到了文档阶段，那xhtml对语意的支持可能还只能算停留在文章阶段。文章的特点如：存在上下文，标题，段落，解释描述，引用，列表等等。而文档跟普通文章相比，多了更多的关联性，规范性，通过这些特性可以描述得更具体，更便于阅读。<br/><br/>由于E文比较差，很少去浏览国外牛人的博客，所以本人对web标准的很多理论都停留在初级阶段，对于很多东西可能实践比较多。在当时前两年结构与表现分离的年代，曾经疯狂的迷恋将一个结构以各种不同的形式表现出来，也包括常说的CSS换肤。渐渐的发现，写一个健壮的结构，语意化html文档是我最缺失的，后来渐渐开始像写作文一样格式化文档，如何让这个文档具有可读性（要让对html不很熟悉的程序员拿到这个页面知道怎么处理）。<br/><br/>我也曾经很傻的认为想让一个健壮的结构和富表现的CSS满足策划和美术的每次修改，在实际开发过程中发现丝毫不能改善工作效率以后。我终于明白了，没有任何方法能适用多种方案，从经济的角度来说，也没有任何一个html页面应该适合所有的设备的。虽然有部分手机能阅读xhtml，盲人或者残障浏览器能阅读xhtml，但对这些设备来说，xhtml不是最佳的语言。对于流量就是金钱的wap浏览来说，xhtml中的很多标签和属性都是对用户流量的浪费。<br/><br/>在企鹅总动员版本的开发过程中，我成了美术组和web后台开发组的唯一接口。很多时候不得不根据项目来思考实际问题的解决方法。由于html模板页面都放在应用程序服务器,CSS和图片放在我能控制的图片服务器上.由于游戏界面丰富的表现形式，为了让美术和策划的修改不给整个项目造成太大的影响，在制作页面的时候，首先保持结构的健壮性，以及每个标签的可控性，然后将所有不是模板输出的图片分离出来（尽管很多图片看起来应该是标题）写在相关标签的背景中，其他所有img标签通过模板标签输出，这样页面只要将CSS修改为绝对路径就可以放在任何目录下正常显示，这是我根据实际理解成的<span style="color:Blue">内容与表现相分离</span>。这样只要后续不牵涉到页面内容功能的修改，均可在我控制的范围内修改，这一修改几乎对开发来说是透明的。为了整个团队的效率，我终于成了打杂的。在项目开发过程中，针对项目问题的沟通和确定责任人，以及对相关责任人工作的打断成本是很高的。<br/><br/>不管web标准如何发展，以及html版本如何更新，我想对我来说做事情的思路和思维都不会变：<br/>思考实现-后续控制力-思路优化--最适用的方法。<br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=54" /> 
	  <id>http://www.htmlwind.com/default.asp?id=54</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[提升框架iframe加载的用户体验]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=7" label="前端交互" /> 
	  <updated>2009-07-11T12:30:55+08:00</updated>
	  <published>2009-07-11T12:30:55+08:00</published>
		  <summary type="html"><![CDATA[iframe标签近年来被越来越多的ajax应用所代替，但不可否认的是iframe有他的不可替代性，很多应用iframe有他独到的优势，就不一一列举了。<br/>使用iframe标签的时候，当iframe里的内容刷新的时候会在IE6中有一段空白背景时间，如果你页面的整体是白色还好，如果是其他颜色就iframe页面载入的这段时间就会产生一种很突兀的感觉，用户体验很不好。<br/>这种情况你可能第一时间想到将iframe的引用页面的背景改成相关颜色或图片，再将主页面的iframe标签设置改成相关颜色或图片。如iframe{background:...}.<br/>但很快发现定义iframe肯定是没有效果，因为iframe始终会被嵌入的页面背景所遮挡，而嵌入的页面在页面在载入之前背景也是不显示的，这种加载过程中这一段空白就是浏览器的主题的默认背景色，类似打开一个about：blank的情况。你可以在你浏览器中进行设置，但你不能保证你的用户也能为了你的这个页面进行设置。<br/><br/>我们要实现的目标：<span style="color:Blue">当iframe的页面加载的时候显示我们提供的背景和颜色（如加载中的图像），页面加载完成以后，显示加载完成的页面内容。</span><br/>根据目标确定一个思路，当页面加载的时候我们需要显示iframe的背景，这个时间段只有iframe的背景是可控的，那就需要隐藏iframe的引用页面。当iframe的页面内容加载完成的时候就显示整个iframe。<br/>1.我们在iframe外面加一层容器，定义容器的背景为加载中的图片。<br/>2.iframe中的页面刷新的时候，将iframe的宽高设置为0.<br/>3.iframe中的页面加载完成的时候，将iframe的尺寸设置为原有尺寸。<br/>实际处理的过程中，很想通过主页面的事件监听来处理，可主页面对iframe的onload和onunload监听不大好处理，只能在引用的页面引用的JS中加入，假设该iframe的id为test。<br/>引用页面的JS中onload事件处理：<br/>parent.document.getElementById(&#34;test&#34;).style.width=&#34;0px&#34;;<br/>parent.document.getElementById(&#34;test&#34;).style.height=&#34;0px&#34;;<br/>onunload事件处理：<br/>parent.document.getElementById(&#34;test&#34;).style.width=&#34;100%&#34;;//修改父页面iframe的默认宽度<br/>parent.document.getElementById(&#34;test&#34;).style.height=&#34;0px&#34;;//修改父页面iframe的默认高度<br/><br/>很简单的一个东西，却能带来不错的效果。实际应用于QQ宠物企鹅总动员中的商城页面加载。<br/>加载前：<br/><img src="http://www.htmlwind.com/download.asp?id=1" border="0" alt=""/><br/>加载中：<br/><img src="http://www.htmlwind.com/download.asp?id=2" border="0" alt=""/><br/>加载后：<br/><br/><img src="http://www.htmlwind.com/download.asp?id=3" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=53" /> 
	  <id>http://www.htmlwind.com/default.asp?id=53</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[JavaScript面向对象-静态方法-私有方法-公有方法-特权方法]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=10" label="javascript" /> 
	  <updated>2009-06-21T23:25:41+08:00</updated>
	  <published>2009-06-21T23:25:41+08:00</published>
		  <summary type="html"><![CDATA[JavaScript面向对象是近年来比较火的一个概念了，由于小弟才疏学浅，虽然做过不少的web项目，看了网上很多深奥的资料和教程，还是对他们深奥的理论一知半解，前段时间看了点书，总算有了自己的理解，今天也出来装一回，如果觉得很深奥，请直接鄙视我，如果觉得不对，请直接拍砖。<br/>先通俗了解下面一些东西。<br/>在JS代码中写入function fn(){}或者var fn=function(){}等等，你都可以将其理解为对象，当然还有数组等等。<br/>在理解面向对象之前，先了解下面几个东西吧。<br/><strong>1.对象方法的调用</strong><br/>在js最外层写的function可以还可以理解为window对象的一个方法。定义的变量也可以称之为window对象的一个属性。例如：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code44359);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code44359><br/>var test=function(){<br/>alert(&#34;123&#34;)<br/>}<br/>当然上面的你也可以这样定义<br/>function test(){<br/>alert(&#34;123&#34;)<br/>}<br/>作为window对象的方法我们可以这样调用<br/><span style="color:LimeGreen">test()//弹出警告框123(因为window对象是顶级对象我们可以将其省略)<br/>window.test()//弹出警告框123<br/>window[&#39;test&#39;]()//弹出警告框123，可以将test理解为window数组对象下面的一个方法值。</span></div></div><br/>通过以上的例子大致了解了对象的方法怎使用和调用。<br/><br/><strong>2,私有方法</strong><br/>私有方法就是只有在对象内部作用域内部才能使用的方法。可以用变量作用域的方式来理解这个东西。<br/>上面例子的function都可以理解为window对象的私有方法。继续看下面的例子。<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code81339);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code81339><br/> var pet=function(){<br/>&nbsp;&nbsp;&nbsp;&nbsp;function showpet(){<br/>&#160;&#160;&#160;&#160;alert(&#34;123&#34;)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;showpet();//私有方法可以在函数作用域范围内使用。<br/>&nbsp;&nbsp; var temp=&#34;私有变量只有在函数或者对象作用域范围内能访问&#34;<br/> }<br/>showpet();//会出错<br/>pet.showpet()//还是不能这样调用<br/><br/> var Penguin=new pet() //实例化一个pet对象<br/>Penguin.showpet()//不好意思这样子还是不能让你调用。<br/></div></div><br/>如果我想定义的方法可以对象的作用域外面调用该怎么办呢？我该怎么使用私有方法呢？我们来看下一点内容吧。<br/><strong>3.静态方法</strong><br/>带着上面的问题我们继续上面的例子。<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code96957);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code96957><br/> var pet=function(){<br/>&nbsp;&nbsp;&nbsp;&nbsp;function showpet(){//私有方法<br/>&#160;&#160;&#160;&#160;alert(&#34;123&#34;)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;showpet();//私有方法可以在函数作用域范围内使用。<br/> }<br/>pet.show=function(){//给pet对象添加一个静态方法。<br/>alert(&#34;456&#34;)<br/>}<br/>pet.name=&#34;Penguin&#34;//给pet对象添加一个静态属性。<br/><br/>pet.show()//弹出警告框456<br/>alert(pet.name)//弹出警告框Penguin<br/><br/><span style="color:Blue">//继续思维碰撞</span><br/>=====================<br/>var Penguin=new pet() //实例化一个pet对象<br/>Penguin.show()//不好意思,这个静态方法好像没有被实例继承。有这种思路值得表扬啊，加油！<br/><br/></div></div><br/>上面的实例向你展示了什么叫静态方法，当然你可能会不明白，其实我也不懂，因为我也是菜鸟，但是只要你看了以后知道怎样为对象写一个静态方法，怎么调用该静态方法就可以了，也许某一天，你突然明白了就会回来教我了。带着上面的问题我们来看看实例化的对象能调用的方法。<br/><strong>4.公有方法</strong><br/>公有方法通常是通过修改构造函数的原型来实现的，修改一个对象的原型以后，所有该对象实例都会继承原型的修改（这句话极为装B，如果你感觉模糊就请忽略）。<br/>修改对象原型的方法，继续上面的例子。<br/>pet.prototype.setname=function(str){//<span style="color:LimeGreen">通过修改原型添加一个公有方法，用于添加修改实例对象的name</span><br/>name=str;<br/>}<br/>看例子：<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code76662);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code76662><br/> var pet=function(){<br/>&nbsp;&nbsp;&nbsp;&nbsp;function showname(){//私有方法<br/>&#160;&#160;&#160;&#160;alert(this.name)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;this.show=function(){ <span style="color:LimeGreen">//如果这里不理解，请注意这个方法下面就要介绍了。</span><br/>&nbsp;&nbsp; showname();<br/>&nbsp;&nbsp;}<br/> }<br/>pet.prototype.setname=function(str){<br/> name=str;<br/>}<br/> var Penguin=new pet()<br/>&nbsp;&nbsp;Penguin.setname(&#34;Penguin&#34;);//添加实例的name值为Penguin<br/>&nbsp;&nbsp;Penguin.show();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//弹出Penguin<br/>&nbsp;&nbsp;Penguin.setname(&#34;wind&#34;);//添加实例的name值为wind<br/>&nbsp;&nbsp;Penguin.show();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //弹出wind<br/></div></div><br/>运行代码玩玩。<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.htmlwind.com/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp58245">
<script>
var pet=function(){
    name:&#34;123&#34;,
    function showname(){//私有方法
	alert(this.name)
      }
  this.show=function(){
   showname();
  }
 }
pet.prototype.setname=function(str){
 name=str;
}
 var Penguin=new pet()
  Penguin.setname(&#34;Penguin&#34;);
Penguin.show();
Penguin.setname(&#34;wind&#34;);
Penguin.show();
</script>
</TEXTAREA><br/><INPUT onclick="runEx('temp58245')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp58245')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp58245')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><strong>5.特权方法</strong>(对象或者函数对外的接口)<br/>其实在上面的例子中我们已经用到了这种方法。这种方法可以被实例化的对象继承所调用。通过在构造函数内部通过thsi关键字定义的的方法。特权方法能够在构造函数外面公开访问（仅限于实例化的对象），而且还能够访问私有成员和方法，因此用来做为对象或者构造函数的接口最合适不过了，通过特权函数我们可以控制公有方法对私有方法的访问，这个在JS框架的扩展中有很多应用。<br/><br/>各位看官可以当上面的是一段P话，我们具体来看看怎么样定义一个特权方法，怎样引用一个特权方法，继续调用上面得实例来看。<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code37546);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code37546><br/> var pet=function(){<br/>&nbsp;&nbsp;&nbsp;&nbsp;function showname(){//私有方法<br/>&#160;&#160;&#160;&#160;alert(this.name)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;this.show=function(){//通过使用this关键字定义一个特权方法。<br/>&nbsp;&nbsp; showname();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //在特权方法中访问私有方法；<br/>&nbsp;&nbsp;}<br/> }<br/>pet.prototype.setname=function(str){<br/> name=str;<br/>}<br/> var Penguin=new pet();//实例化一个pet对象<br/>&nbsp;&nbsp;Penguin.setname(&#34;Penguin&#34;);//调用公有方法修改<br/>&nbsp;&nbsp;Penguin.show();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//调用特权方法访问私有方法，弹出name<br/><br/></div></div><br/>首先通过在构造函数中用this.fn=function(){}建立一个特权方法。在特权函数中访问私有方法；<br/>实例化的对象可以通过访问特权函数来使用部分私有方法，访问特权函数的方法同访问公有函数。<br/>第一部分就暂时理解到这里了，下一部分会通过一个实例来诠释下面向对象是怎么装B的。<br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=51" /> 
	  <id>http://www.htmlwind.com/default.asp?id=51</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[JavaScript通用Alert美化类]]></title>
	  <author>
		 <name>李军</name>
		 <uri>http://www.htmlwind.com/</uri>
		 <email>315014425@qq.com</email>
	  </author>
	  <category term="" scheme="http://www.htmlwind.com/default.asp?cateID=7" label="前端交互" /> 
	  <updated>2009-04-28T16:06:17+08:00</updated>
	  <published>2009-04-28T16:06:17+08:00</published>
		  <summary type="html"><![CDATA[function sAlert(msg,boxtype,func,msgtitle)<br/>sAlert(&#39;信息内容&#39;,1,&#39;&#39;,&#39;信息标题&#39;) <br/>@msg:提示信息内容 <br/>@boxtype：1为弹出框，2为确认框，3为提示框 <br/>@func:点确认时执行的函数 <br/>@title:信息框标题文字内容 <br/>只有msg是必须的，后面的参数可以省略。如果中间的参数为空则在对应位置上&#39;&#39;或者&#34;&#34;表示（根据实际情况选择单双引号） <br/>调用此方法须在每个使用的页面的head区域加入下面代码。<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><a onClick="copycode(code35873);" style="float:right;cursor: pointer;font-weight: normal; font-style: normal">复制内容到剪贴板</a><img src="http://www.htmlwind.com/images/code.gif" style="margin:0px 2px -3px 0px;" alt="程序代码"/> 程序代码</div><div class="UBBContent" id=code35873><br/>&lt;script type=&#34;text/<a href="http://www<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com" target="_blank">javascript</a>&#34; src=&#34;alert1/alert.js&#34;&gt;&lt;/script&gt;<br/>&lt;link href=&#34;alert1/alert.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34; /&gt;<br/></div></div><br/>运行效果如下：<br/> <div class="UBBPanel"><div class="UBBTitle"><img src="http://www.htmlwind.com/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp95340"> 
<!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>&#34;>
<html xmlns=&#34;<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>&#34; xml:lang=&#34;zh-CN&#34; lang=&#34;zh-CN&#34;>
	<head>
	<title>弹出框测试页面</title>
		<meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34; />
		<meta http-equiv=&#34;Content-Language&#34; content=&#34;gb2312&#34; />
	

	<style type=&#34;text/css&#34;>
	/*<![CDATA[*/
	    *{
		        margin:0;padding:0;
		    }
			ul li{list-style-type:none;}
		    html,body{height:100%;}
			#textid{padding:10px}
			#bgDiv{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;
			        filter:alpha(opacity:75);opacity:0.6;}
            #msgDiv{text-align:center;position:absolute;left:50%;top:50%;line-height:25px;z-index:101;
			              padding:1px 0 25px;font-size:12px;height:auto!important;height:142px;min-height:142px;
						  width:255px;background:url(attachments/month_0904/g200942816344.gif) left top repeat-y;} 
            #msgTxt{clear:both;padding:10px 10px;text-align:left;}
			#msgTxt li{border-bottom:1px dotted #69a;}
			#msgTitle{font-size:12px;margin:0;height:21px;width:100%;line-height:20px;text-indent:3em;
			       background:url(attachments/month_0904/n200942816339.gif) left top no-repeat;text-align:left;
			        filter:alpha(opacity:75);opacity:0.6;font-family:Verdana,Arial;}
			#msgTitle b{cursor:pointer;float:right;width:30px;height:20px;margin-right:10px;display:inline;}
			#msgButton input{border:1px solid #369;color:#000;background:#eef5ff;cursor:pointer;
			font-size:12px;height:20px;padding:0 5px;line-height:20px;margin:0 5px;}
			#msgButton{position:absolute;bottom:0px;left:0;width:255px;text-align:center;height:20px;padding:8px 0 6px;
			       background:url(attachments/month_0904/l200942816354.gif) left top repeat-y;}
	  #msgRun{width:600px;margin:0 auto;padding:10px;background:#fff5ee;border:1px solid #f80;}
	  #msgRun ul{margin:10px;padding:10px;background:#fff;border:1px solid #f85;font-size:12px;}
	  #msgRun ul li{border-bottom:1px dotted #ccc;line-height:25px;}
	  input {cursor:pointer;}
	  p{padding:5px;}
	  textarea{width:580px;overflow:hidden;height:60px;padding:5px;}
	/*]]>*/
	</style>
	<script type=&#34;text/<a href="http://www<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com" target="_blank">javascript</a>&#34;>
	function $t(s){
				return document.all?document.all[s]:document.getElementById(s);
            }
            //弹出框函数
			function sAlert(msg,boxtype,func,msgtitle){
	        
				    if($t('msgDiv')) return;
			if($t('bgDiv')){$t('bgDiv').style.display=&#34;block&#34;;
			}else{
			var bgObj=document.cr&#101;ateElement(&#34;div&#34;);
			bgObj.setAttribute('id','bgDiv');
			document.body.appendChild(bgObj);
			
          if (!window.XMLHttpRequest){
          var frm=document.cr&#101;ateElement(&#34;iframe&#34;);
           frm.setAttribute(&#34;name&#34;,&#34;completionFrame&#34;);
		   frm.setAttribute(&#34;id&#34;,&#34;completionFrame&#34;);
           bgObj.appendChild(frm);}
		   }
			
			var msgObj=document.cr&#101;ateElement(&#34;div&#34;)
			msgObj.setAttribute(&#34;id&#34;,&#34;msgDiv&#34;);
            msgObj.style.marginLeft = &#34;-127px&#34;;
            msgObj.style.marginTop =  -145+document.documentElement.scrollTop+&#34;px&#34;;;
     
		   var title=document.cr&#101;ateElement(&#34;h4&#34;);
		   title.setAttribute(&#34;id&#34;,&#34;msgTitle&#34;);
	       var closeMsg=document.cr&#101;ateElement(&#34;b&#34;);
		    var titleSpan=document.cr&#101;ateElement(&#34;span&#34;);
			 if(msgtitle) titleSpan.innerHTML=msgtitle;
	    
		   closeMsg.onclick=function(){
		      msg_close();
                }
		   var txt=document.cr&#101;ateElement(&#34;div&#34;);
		   txt.setAttribute(&#34;id&#34;,&#34;msgTxt&#34;);
		   var msgButton=document.cr&#101;ateElement(&#34;h5&#34;);
		   msgButton.setAttribute(&#34;id&#34;,&#34;msgButton&#34;);

		   document.body.appendChild(msgObj);
		   $t(&#34;msgDiv&#34;).appendChild(title);
		   $t(&#34;msgDiv&#34;).appendChild(txt);
		   $t(&#34;msgDiv&#34;).appendChild(msgButton);

		   $t(&#34;msgTitle&#34;).appendChild(closeMsg);
           $t(&#34;msgTitle&#34;).appendChild(titleSpan);
		   
		   var Confirm=document.cr&#101;ateElement(&#34;input&#34;);
           Confirm.setAttribute(&#34;id&#34;,&#34;msgConfirm&#34;);
		   Confirm.setAttribute(&#34;type&#34;,&#34;button&#34;);
		   Confirm.setAttribute(&#34;value&#34;,&#34;确认&#34;);
           Confirm.onclick=function(){
		    msg_close();
			eval(func);
                }
		   var Cancel=document.cr&#101;ateElement(&#34;input&#34;);
           Cancel.setAttribute(&#34;id&#34;,&#34;msgCancel&#34;);
		   Cancel.setAttribute(&#34;type&#34;,&#34;button&#34;);
		   Cancel.setAttribute(&#34;value&#34;,&#34;取消&#34;);
           Cancel.onclick=function(){
		    msg_close();
			
                }
	switch(boxtype * 1){
		case 1:
			txt.innerHTML = msg;
             $t(&#34;msgButton&#34;).appendChild(Confirm); 
			
		break;
		case 2:
		  txt.innerHTML = msg;
			$t(&#34;msgButton&#34;).appendChild(Confirm); 
			$t(&#34;msgButton&#34;).appendChild(Cancel); 
  
		break;
		case 3:
			txt.innerHTML =  msg;
			 $t(&#34;msgButton&#34;).appendChild(Confirm); 
		break;
		default:
			txt.innerHTML =  msg;
			 $t(&#34;msgButton&#34;).appendChild(Confirm); 
		break;
	}
		 
 
            }
	function msg_close(){
			$t(&#34;bgDiv&#34;).style.display=&#34;none&#34;;
			var msgObj=$t(&#34;msgDiv&#34;);
			var title=$t(&#34;msgTitle&#34;);
			if(msgObj)    
            $t(&#34;msgDiv&#34;).removeChild(title);
            document.body.removeChild(msgObj);
            }
	window.onload=function(){
	     $t(&#34;runcode&#34;).onclick=function(){
		   var code=$t(&#34;code&#34;).innerHTML;
		   eval(code);
		 }
	}

	</script>
	</head>

	<body>
	<br />
	<div id=&#34;msgRun&#34;>
	    
		<div>
		<h5 >宠物专用信息框实例：</h5>
         <input type=&#34;button&#34; value=&#34;弹出框&#34; onclick=&#34;sAlert('测试效果2',1);&#34; />
		 <input type=&#34;button&#34; value=&#34;确认框&#34; onclick=&#34;sAlert('确认框',2,'','宠我宝贝');&#34; />
		<input type=&#34;button&#34; value=&#34;提示框&#34; onclick=&#34;sAlert('提示框');&#34; />
		</div>
		<br />
	   <h4>function sAlert(msg,boxtype,func,title)</h4>
	  <ul>
	   <li >sAlert('信息内容',1,'','信息标题')</li>
	   <li >@msg:提示信息内容</li>
	   <li >@boxtype：1为弹出框，2为确认框，3为提示框</li>
	   <li >@func:点确认时执行的函数</li>
	   <li >@title:信息框标题文字内容</li>
	   <li >只有msg是必须的，后面的参数可以省略。如果中间的参数为空则在对应位置上''或者&#34;&#34;表示（根据实际情况选择单双引号）</li>
       <li >调用此方法须在每个使用的页面的head区域加入下面代码。</li>
	  </ul>
	 <textarea rows=&#34;5&#34; cols=&#34;60&#34;>
	<script type=&#34;text/<a href="http://www<a href="http://wwwhtmlwind.com" target="_blank">htmlwind</a>.com" target="_blank">javascript</a>&#34; src=&#34;alert1/alert.js&#34;></script>
<link href=&#34;alert1/alert.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34; />
	  <&#47textarea>

     <p><b>测试环境：可以在下面的文本框里按上面要求的格式函数进行测试：</b></p>
    <p ><textarea rows=&#34;5&#34; cols=&#34;60&#34; id=&#34;code&#34;>sAlert('信息内容',1,'location.href=&#34;<a href="http://pet.qq.com" target="_blank" rel="external">http://pet.qq.com</a>&#34;','信息标题')<&#47textarea></p>
	<p ><input type=&#34;button&#34; value=&#34;运行函数&#34; id=&#34;runcode&#34; /></p>
	</div>
	

	</body>
</html>
</TEXTAREA><br/><INPUT onclick="runEx('temp95340')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp95340')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp95340')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/>用到的图片<br/><br/><img src="http://www.htmlwind.com/attachments/month_0904/n200942816339.gif" border="0" alt=""/><br/><img src="http://www.htmlwind.com/attachments/month_0904/g200942816344.gif" border="0" alt=""/><br/><img src="http://www.htmlwind.com/attachments/month_0904/l200942816354.gif" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.htmlwind.com/article.asp?id=49" /> 
	  <id>http://www.htmlwind.com/default.asp?id=49</id>
  </entry>	
		
</feed>
