??xml version="1.0" encoding="utf-8" standalone="yes"?>av在线播放不卡,91在线不卡,亚洲高清国产精品http://www.aygfsteel.com/RongHao/category/20774.html勤学、勤?/description>zh-cnSun, 02 Mar 2008 08:44:07 GMTSun, 02 Mar 2008 08:44:07 GMT60理解DOM事g?/title><link>http://www.aygfsteel.com/RongHao/archive/2008/03/02/183259.html</link><dc:creator>ronghao</dc:creator><author>ronghao</author><pubDate>Sun, 02 Mar 2008 06:54:00 GMT</pubDate><guid>http://www.aygfsteel.com/RongHao/archive/2008/03/02/183259.html</guid><wfw:comment>http://www.aygfsteel.com/RongHao/comments/183259.html</wfw:comment><comments>http://www.aygfsteel.com/RongHao/archive/2008/03/02/183259.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/RongHao/comments/commentRss/183259.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/RongHao/services/trackbacks/183259.html</trackback:ping><description><![CDATA[<br /> DOM事g标准定义?jin)两U事件流Q这两种事g有着显著的不同ƈ且可能对你的应用有着相当大的影响。这两种事g分别是捕获和冒泡。和许多Web技术一P在它们成为标准之前，Netscape和微软各自不同地实现?jin)它们。Netscape选择实现?jin)捕获事件流Q微软则实现?jin)冒泡事件流。幸q的是，W(xu)3C军_l合使用q两U方?q且大多数新览器都遵@q两U事件流方式?br /> <br /> 默认情况下，事g使用冒(chng)事g，不用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事g，Ҏ(gu)是在注册事g时传入useCapture参数Q将q个参数设ؓ(f)true。下面用个例子分别来试q两U事件流?br /> <br /> <strong>1、冒泡事件流</strong><br /> 当事件在某一DOM元素被触发时Q例如用户在客户名字节点上点击鼠标，事g跟随着该节点承自的各个父节点冒(chng)I过整个的DOM节点层次Q直到它遇到依附有该事gcd处理器的节点Q此Ӟ该事件是onclick事g。在冒(chng)q程中的M时候都可以l止事g的冒泡，在遵从W3C标准的浏览器里可以通过调用事g对象上的stopPropagation()Ҏ(gu)Q在Internet Explorer里可以通过讄事g对象的cancelBubble属性ؓ(f)true。如果不停止事g的传播，事g一直通过DOM冒(chng)直至到达文档栏V?br /> <br /> 试的HTML文gQ其中用C(jin)mootools-release-1.11.jsQ对mootools的代码进行了(jin)改动Q?br /> <div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><span style="color: #000000;">addListener: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(type, fn,setCapture){<br />             </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.addEventListener) </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.addEventListener(type, fn, setCapture);<br />             </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {<br />                 </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.attachEvent('on' </span><span style="color: #000000;">+</span><span style="color: #000000;"> type, fn);<br />                 </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (setCapture) </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.setCapture(</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);<br />             }<br />             </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> </span><span style="color: #0000ff;">this</span><span style="color: #000000;">;<br />         } <br /> </span></div>       <br /> laddListenerҎ(gu)里增加了(jin)setCapture参数Q用于测试捕获事件流?br /> <div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><span style="color: #000000;"><</span><span style="color: #000000;">body</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">div  id</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">dd1-ct</span><span style="color: #000000;">"</span><span style="color: #000000;"> style</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">width:400px;height:400px;border:1px solid #999;padding:2px</span><span style="color: #000000;">"</span><span style="color: #000000;">></span><span style="color: #000000;">Container<br />     </span><span style="color: #000000;"><</span><span style="color: #000000;">div id</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">dd1-item1</span><span style="color: #000000;">"</span><span style="color: #000000;"> style</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">width:200px;height:200px;border:1px solid #999;padding:2px</span><span style="color: #000000;">"</span><span style="color: #000000;">></span><span style="color: #000000;">Item1<br />         </span><span style="color: #000000;"><</span><span style="color: #000000;">div  id</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">dd1-item2</span><span style="color: #000000;">"</span><span style="color: #000000;"> style</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">width:100px;height:100px;border:1px solid #999;padding:2px</span><span style="color: #000000;">"</span><span style="color: #000000;">></span><span style="color: #000000;">Item2</span><span style="color: #000000;"></</span><span style="color: #000000;">div</span><span style="color: #000000;">></span><span style="color: #000000;"><br />     </span><span style="color: #000000;"></</span><span style="color: #000000;">div</span><span style="color: #000000;">></span><span style="color: #000000;">  <br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">div</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"><</span><span style="color: #000000;">div id</span><span style="color: #000000;">=</span><span style="color: #000000;">'rh'</span><span style="color: #000000;">></</span><span style="color: #000000;">div</span><span style="color: #000000;">></span><span style="color: #000000;"><br /> </span><span style="color: #000000;"></</span><span style="color: #000000;">body</span><span style="color: #000000;">></span></div> <br /> 效果Q?br /> <img src="http://www.aygfsteel.com/images/blogjava_net/ronghao/flow.jpg" alt="" border="0" /><br /> js:<br /> <div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><span style="color: #000000;">fn1</span><span style="color: #000000;">=</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e){<br /> </span><span style="color: #008000;">//</span><span style="color: #008000;">    e.stopPropagation();</span><span style="color: #008000;"><br /> </span><span style="color: #000000;">    $('rh').innerHTML</span><span style="color: #000000;">+=</span><span style="color: #000000;">'Item1 clicked</span><span style="color: #000000;">!******</span><span style="color: #000000;">';<br /> };<br /> <br /> fn2</span><span style="color: #000000;">=</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e){<br /> </span><span style="color: #008000;">//</span><span style="color: #008000;">    e.stopPropagation();</span><span style="color: #008000;"><br /> </span><span style="color: #000000;">    $('rh').innerHTML</span><span style="color: #000000;">+=</span><span style="color: #000000;">'Item2 clicked</span><span style="color: #000000;">!-------</span><span style="color: #000000;">';<br /> };<br /> <br /> fn</span><span style="color: #000000;">=</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e){<br /> </span><span style="color: #008000;">//</span><span style="color: #008000;">    e.stopPropagation();</span><span style="color: #008000;"><br /> </span><span style="color: #000000;">    $('rh').innerHTML</span><span style="color: #000000;">+=</span><span style="color: #000000;">'Container clicked</span><span style="color: #000000;">!&&&&&&&&</span><span style="color: #000000;">';<br /> };<br />    <br /> $('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">item2').addListener('click', fn2.bindWithEvent(),</span><span style="color: #0000ff;">false</span><span style="color: #000000;">);       <br /> $('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">item1').addListener('click', fn1.bindWithEvent(),</span><span style="color: #0000ff;">false</span><span style="color: #000000;">);<br /> $('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">ct').addListener('click', fn.bindWithEvent(),</span><span style="color: #0000ff;">false</span><span style="color: #000000;">);</span></div> <br /> <br /> 试l果ie和ff下效果一_(d)(x)单击item2,?x)依ơ触发fn2、fn1、fn;单击item1,?x)依ơ触发fn1、fn;单击Container,只会(x)触发fn;当在M一个事件处理器里调用e.stopPropagation();都会(x)L事g的冒泡?br /> <br /> <strong>2、捕获事件流</strong><br /> 事g的处理将从DOM层次的根开始，而不是从触发事g的目标元素开始，事g被从目标元素的所有祖先元素依ơ往下传递。在q个q程中，事g?x)被从文档根C件目标元素之间各个承派生的元素所捕获Q如果事件监听器在被注册时设|了(jin)useCapture属性ؓ(f)true,那么它们可以被分zq期间的M元素以对事g做出处理Q否则，事g?x)被接着传递给z元素路径上的下一元素Q直至目标元素。事件到辄标元素后Q它?x)接着通过DOM节点再进行冒泡?br /> <br /> q里ie与ff存在着很大的差异，甚至ie6与ie7的表C各不相同Q所以分开试?br /> <br /> <strong>a、ff</strong><br /> 事g从从DOM层次的根开始往下传递时Q会(x)被useCapture属性ؓ(f)true的事件监听器所捕获Q而到辄标元素再从目标元素冒泡时Q则?x)被useCapture属性ؓ(f)false的事件监听器所捕获。当在Q何一个事件处理器里调用e.stopPropagation();都会(x)L事g的传播?br /> <br /> <strong>b、ie6</strong><br /> 用事实说话：(x)<br /> <br /> W一U情况：(x)<br /> <div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><span style="color: #000000;">$('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">item2').addListener('click', fn2.bindWithEvent(),</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);       <br /> $('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">item1').addListener('click', fn1.bindWithEvent(),</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);<br /> $('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">ct').addListener('click', fn.bindWithEvent(),</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);</span></div> <br /> 单击览器的M位置Q都只是触发fnQ?br /> <br /> W二U情况：(x)<br /> <div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><span style="color: #000000;">$('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">item2').addListener('click', fn2.bindWithEvent(),</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);       <br /> $('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">item1').addListener('click', fn1.bindWithEvent(),</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);<br /> $('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">ct').addListener('click', fn.bindWithEvent(),</span><span style="color: #0000ff;">false</span><span style="color: #000000;">);</span></div> <br /> 单击览器的M位置Q会(x)依次触发fn1、fn;<br /> <br /> W三U情况：(x)<br /> <div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><span style="color: #000000;">$('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">item2').addListener('click', fn2.bindWithEvent(),</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);       <br /> $('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">item1').addListener('click', fn1.bindWithEvent(),</span><span style="color: #0000ff;">false</span><span style="color: #000000;">);<br /> $('dd1</span><span style="color: #000000;">-</span><span style="color: #000000;">ct').addListener('click', fn.bindWithEvent(),</span><span style="color: #0000ff;">false</span><span style="color: #000000;">);</span></div> <br /> 单击览器的M位置Q会(x)依次触发fn2、fn1、fn;<br /> <br /> l论Q如果HTML元素捕获?jin)通过该元素的setCapture()Ҏ(gu)对这个元素的讄Q依附于该元素的处理器将?x)被事g触发Q即使setCapture()Ҏ(gu)<br /> 被调用的q个元素不在目标元素的祖先\径中。事实上你甚臛_?yn)L览器的非面部分都会(x)触发事g处理器。ƈ且事件一旦被捕获׃?x)l再<br /> 往下传播（即该元素在目标元素的祖先\径中Q，而是立刻冒(chng)。e.stopPropagation();?x)阻止事件的冒?chng)?br />   <br /> <strong>c、ie7</strong><br /> 试效果与冒泡事件流一致。将Ҏ(gu)获事件流的支持干掉了(jin)Q?br />   <br /> <strong>l论Q正如mootools所做的Q避免捕获事件流?/strong><br /> <br /> <br /> <img src ="http://www.aygfsteel.com/RongHao/aggbug/183259.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/RongHao/" target="_blank">ronghao</a> 2008-03-02 14:54 <a href="http://www.aygfsteel.com/RongHao/archive/2008/03/02/183259.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>js的流E设计器Q我们需要什?/title><link>http://www.aygfsteel.com/RongHao/archive/2008/02/13/179837.html</link><dc:creator>ronghao</dc:creator><author>ronghao</author><pubDate>Wed, 13 Feb 2008 14:08:00 GMT</pubDate><guid>http://www.aygfsteel.com/RongHao/archive/2008/02/13/179837.html</guid><wfw:comment>http://www.aygfsteel.com/RongHao/comments/179837.html</wfw:comment><comments>http://www.aygfsteel.com/RongHao/archive/2008/02/13/179837.html#Feedback</comments><slash:comments>3</slash:comments><wfw:commentRss>http://www.aygfsteel.com/RongHao/comments/commentRss/179837.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/RongHao/services/trackbacks/179837.html</trackback:ping><description><![CDATA[q是一个完全基于js的应用程序，区别于一般的web应用Q它是oaop。大概需要一些什么样的工作呢Q?br /> <br /> <strong>大概的概念：(x)<br /> <br /> </strong>1、容?br />  是的Q需要容器。容器的两个目的Q布局和管理组件。组件之间的怺通信以及(qing)影响都需要容器来协调。管理组件之间的状态，lg需要向容器q行注册。对lg传播q来的事Ӟ容器需要做出处理，调用相关其他lg的方法或者忽略或者l向上一U容器传播?br /> <br /> 2、组?br />  lg的目的是完全屏蔽对dom~程的依赖，同时屏蔽底层的浏览器事gQ例如鼠标单凅R双ȝ{，对这些事件进行完全的装。组件有着自己的生命周期：(x)初始化、渲染、重甅R销毁等{。由lg完成面的渲染工作，例如节点、画ѝ连U等{?br /> <br /> 3、模?br />  在页面进行徏模是必要的，例如zd节点、流E等{，q些模型与组件衔接，它们之间的状态互相媄(jing)响，比如节点lg名称的改变实际媄(jing)响的是所对于节点模型的属性。画板节点的增加实际也会(x)l响应的程定义模型新增一个活动节炏V?br /> <br /> 4、与服务器交?br />  与服务器的交互完全基于xml。流E定义模型有着自己的xmlҎ(gu)Q由xml解析为模型，由模型解析ؓ(f)xmlQ双向的q程。本地存储。很自然的选择?br />  <br /> <strong>可能的难点：(x)</strong><br /> 最大的隄是lg的实玎ͼ事g的处理以?qing)传播机制?br /> <strong><br /> 开发的q程Q?br /> <br /> </strong>1、底层库的选择<br />  面向对象的开发方式，底层库需要完成的工作Qѝ接口实现、事件的l一处理接口、element DOM~程的封装?br /> <br /> 2、基本组件的开?br />  L、图形组件、连U组件、弹出面ѝ简单表格组件、树(wi){等。封装基本的事g。可以定制事件?br /> <br /> 3、容器的开发，理lg<br />  lg实际也是容器的实玎ͼ比如L的概c(din)画板中节点之间的互相媄(jing)响?br /> <br /> 4、加入模型的支持<br /> <br /> 5、xml与模型之间的js解析<br /> <br /> <strong>参考：(x)</strong><br /> ext是一个不错的参考，但是太笨重，功能多缓慢，轻量实现。主要参考其中容器以?qing)组件的概念?br /> draw2d 实现太简单，基本是一个图形库Q考虑其中对图形组件的实现?br /> <img src ="http://www.aygfsteel.com/RongHao/aggbug/179837.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/RongHao/" target="_blank">ronghao</a> 2008-02-13 22:08 <a href="http://www.aygfsteel.com/RongHao/archive/2008/02/13/179837.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>《Enterprise AJAX——高性能Web应用的构建策略》目?/title><link>http://www.aygfsteel.com/RongHao/archive/2008/01/24/177557.html</link><dc:creator>ronghao</dc:creator><author>ronghao</author><pubDate>Thu, 24 Jan 2008 10:21:00 GMT</pubDate><guid>http://www.aygfsteel.com/RongHao/archive/2008/01/24/177557.html</guid><wfw:comment>http://www.aygfsteel.com/RongHao/comments/177557.html</wfw:comment><comments>http://www.aygfsteel.com/RongHao/archive/2008/01/24/177557.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/RongHao/comments/commentRss/177557.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/RongHao/services/trackbacks/177557.html</trackback:ping><description><![CDATA[<h2>内容</h2> <br /> ?br /> 致谢<br /> 关于作?br /> <br /> <h3>W??AJAX和富互联|应?/h3>     转变?sh)的Web<br />        传统Web应用的痛?br />        AJAX止痛?br />     企业中的AJAX<br />     采用AJAX的驱动因?br />        可用?br />        |络利用?br />        以数据ؓ(f)中心(j)<br />        递增的技巧、工具和技术升U?br />        服务器不可知?br />     关于应用<br />        AJAX技?br />        ~程模式<br />     AJAX的替换技?br />        XUL<br />        XAML<br />        Java Applets 和W(xu)eb Start<br />        Adobe FlashQFlex和Apollo<br />        OpenLaszlo<br />     结<br />     资源<br /> <br /> <h3>W??AJAXl成技?AJAX Building block)<br /> </h3>     JavaScript<br />        JavaScriptcd<br />        闭包<br />        面向对象的JavaScript<br />        Prototype属?br />        面向对象~程(OOP)和?Inheritance)<br />        易变?Mutability)<br />        U程(Threading)<br />        错误处理(Error Handling)<br />        命名I间(Namespacing)<br />     文档对象模型(Document Object Model)<br />        基本原理<br />        操作DOM<br />     层叠样式?br />        l承和层?Inheritance and the Cascade)<br />        内联样式<br />        样式?br />        动态样?br />     事g<br />        事g?br />        事gl定<br />        跨浏览器事g<br />        事g对象<br />     客户端通信(Client-Side Messageing)<br />        XMLHttpRequest基础<br />        处理数据<br />     结<br />     资源<br /> <br /> <h2>W??Web览器中的AJAX</h2>         增量的AJAX<br />         Ҏ(gu)务器影响<br />     HTML标准<br />        文档cd定义(Document Type Definitions)<br />        盒子模型<br />     启动加蝲AJAXlg<br />        onload事g<br />        览?span style="background-color: #ffffff;">~码技?/span><br />     模型-视图-控制?br />        视图<br />        控制?br />        模型<br />     AJAX MVC<br />        AJAX模型<br />        AJAX视图<br />        AJAX控制?br />        面向斚w的JavaScript<br />     结<br />     资源<br /> <br /> <h2>W??AJAXlg</h2>     命o(h)式组?br />     声明式组?br />        服务器端声明式编E?br />        声明式Google地图<br />        替代Ҏ(gu)<br /> <br />     自定义声明式lg<br />        行ؓ(f)式组?br />        声明式组?br />        关于声明<br />     构徏lg<br />        基本功能<br />        q接到服务器<br />        最l版?br />     结<br />     资源<br /> <br /> <h2>W??从设计到部v</h2>     设计<br />         为AJAX建模<br />         应用模型-视图-控制器模?br />         优先考虑性能问题<br />     设计原型<br />        U框l制<br />        验证设计册<br />     试<br />        试驱动开?br />        调试<br />     部v<br />        JavaScript压羃<br />        囄<span style="background-color: #ffffff;">合ƈ</span><br />        保护知识产权<br />        文档<br />     结<br />     资源<br /> <h2>W?<span style="background-color: #ffffff;">?AJAX架构</span></h2>     多层架构Q从单层到多?br />     异步消息<br />     轮询<br />     服务器推?br />        Comet<br />     跟踪h<br />     ~存Q处理数?br />     基本~存<br />     在组件中~存<br />     在浏览器中缓?br />     在服务器中缓?br />     在数据库中缓?br />        MySQL<br />        MS SQL Server<br />        Oracle<br />     更新服务器端模型Qƈ?br />        (zhn)观锁定<br />        只读锁定<br />        乐观锁定<br />        冲突鉴定<br />        冲突解决<br />        自动化的冲突解决<br />     量控制(Throttling)<br />        客户?br />        服务?br />     可׾~?br />        负蝲q和群?br />        AJAX可׾~性问?br />     ȝAJAX<br />     Firefoxȝ存储<br />     Internet Explorer userDataȝ存储<br />     使用Flash客户端存?br />     ȝAJAX和ƈ?br />     结<br />     资源<br /> <br /> <h2>W??Web服务和安全?/h2>     Web服务<br />     Web服务协议<br />        表象状态传?br />        XMLq程q程调用<br />        Web服务<br />        选择合适的工具<br />     客户端的SOAP<br />        IBM Web服务JavaScript?br />        Firefox<br />        Internet Explorer<br />     跨域Web服务<br />        服务器代?br />        URL片段标识W?br />        Flash跨域XML<br />        脚本注入<br />     安全?br />     AJAX的安全性考虑<br />     跨域漏洞<br />        跨站脚本<br />        跨站伪造请?br />        JavaScipt劫持<br />    SQL注入<br />        预处理语?br />        存储q程<br />        XPath注入<br />     数据加密和隐U?br />     防火?br />     结<br />     资源<br /> <br /> <h2>W??AJAX可用?/h2> <br />     常见问题<br />        后退按钮和书{?br />        面大小<br />        自动提交<br />     可访问?br />        识别用户的可讉K性需?br />        JavaScript和W(xu)eb可访问?br />        <span style="background-color: #ffffff;">屏幕阅读?/span>和可讉K?br />        兼容JAWS的AJAX交互<br />        键盘可访问?br />     可用性测?br />     q速而又随性的试<br />        <span style="background-color: #ffffff;">招募参与?/span><br />        设计和运行测?br />     软g断言试<br />        用于试可用性的工具<br />        对Y件辅助测试的一般忠?br />     结<br />     资源<br /> <br /> <h2>W??用户界面模式</h2>     昄模式<br />        动画模式<br />     交互模式<br />        基本交互模式<br />     结<br />     资源<br />        拖拽资源<br />        q度栏资?br />        zd指示器资?br />        颜色淡出资源<br />        x(chng)~辑资源<br />        向下d资源<br />        x(chng)搜烦(ch)资源<br />        x(chng)表单资源<br /> <br /> <h2>W?0?风险和最?jng)_?/h2>        <br />        风险来源<br />           技术风?br />           文化和政治风?br />           ?jng)场风?br />        技术风?br />           <span style="background-color: #ffffff;">范围</span><br />           览器能?br />           可维护?br />           向前兼容<br />           W三工具支持和代码过?br />        文化和政治风?br />           l端用户的期?br />           可培训?br />           合法?br />        ?jng)场风?br />           搜烦(ch)引擎的可讉K?br />           <span style="background-color: #ffffff;">范围</span><br style="background-color: #ffffff;" /> <span style="background-color: #ffffff;">          货币?/span><br />        风险评估和最?jng)_?br />           采用特定的AJAX框架或者组?br />           渐进增强和不唐突的JavaScript<br />           Google |站地图<br />           可视化的提示<br />           避免镀金式设计<br />           采用一U收益模?br />           把培训作为应用的一部分<br />        结<br />        资源<br />           搜烦(ch)引擎优化<br />           l计<br />           |站地图<br />           屏幕截取工具<br /> <br /> <br /> <h2>W?1?案例研究</h2>     ZWeb2.0 重新武装国国防?br />        背景<br />        挑战<br />        解决Ҏ(gu)<br />        采用技?br />        成果<br />     Agrium公司整合AJAX技术到业务<br />        背景<br />        挑战<br />        解决Ҏ(gu)<br />        采用技?br />        成果<br />     AJAX助力国际q输和物公?br />        背景<br />        挑战<br />        解决Ҏ(gu)<br />        采用技?br />        成果<br />     结<br />     资源<br /> <h2>附录A OpenAjax Hub</h2>     主要Ҏ(gu)：(x)发布/注册理?br />        范例<br />        未来对OpernAjax Hub支持的工具包<br /> <br /> <h3>索引</h3> <img src ="http://www.aygfsteel.com/RongHao/aggbug/177557.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/RongHao/" target="_blank">ronghao</a> 2008-01-24 18:21 <a href="http://www.aygfsteel.com/RongHao/archive/2008/01/24/177557.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>析EXT的事?/title><link>http://www.aygfsteel.com/RongHao/archive/2008/01/17/175955.html</link><dc:creator>ronghao</dc:creator><author>ronghao</author><pubDate>Thu, 17 Jan 2008 07:17:00 GMT</pubDate><guid>http://www.aygfsteel.com/RongHao/archive/2008/01/17/175955.html</guid><wfw:comment>http://www.aygfsteel.com/RongHao/comments/175955.html</wfw:comment><comments>http://www.aygfsteel.com/RongHao/archive/2008/01/17/175955.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/RongHao/comments/commentRss/175955.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/RongHao/services/trackbacks/175955.html</trackback:ping><description><![CDATA[事g无疑是AJAX应用中最重要的部分，EXT事件分Z(jin)两种Q自定义事g与浏览器事g?br /> <br /> <strong>自定义事?/strong><br /> 按字面意思就是用戯己定义的事gQ这个事仉常与组件相兟뀂ƈ且需要用h据组件的状态自p发。相关的cExt.util.Observable 、Ext.util.EventQObservable.jsQ。Ext.util.Observable是所有组ӞcomponentQ的父类Q它使得所有的lg都可以Q意的d自定义事Ӟ它的events属性对事gq行l护Q这些事件实际都是Ext.util.Event对象QExt.util.Event对象里的listeners属性对与该事g相关的处理器q行l护。Observablel所有的子类提供?jin)一个统一的接口来发布事g以及(qing)理事gQ这一Ҏ(gu)对于组件来说是臛_重要的?br /> <br /> <strong>览器事?/strong><br /> 即传l意义上的鼠标单凅R移动等{事Ӟq些事g是由览器根据用L(fng)动作自己触发的，与页面元素紧密关联。相关的cExt.Element 、Ext.EventManager、Ext.EventObject、Ext.lib.Event 。Element包含?jin)常见的DOMҎ(gu)和属性，提供一个快L(fng)、统一的、跨览器的接口Q内|了(jin)常用的DOM节点的动作，q且是跨览器的定位的位|、大、动甅R拖攄{。对事g的处理，Element实际这一处理委托l了(jin)EventManagerQ由EventManager寚w面所有的览器事件进行管理，例如增加事g处理器、移除事件处理器{等Q另外EventManagerq定义了(jin)几个很重要的Ҏ(gu)QonDocumentReady、onWindowResize、onTextResize。其中onDocumentReadyؓ(f)重要Q通常在页面需要通过它来启动我们的AJAXE序Q它?x)在面document渲染完毕而图片等q未下蝲时调用我们的启动函数。至于EventObjectQ它则是对原始的览器事件进行了(jin)装Q提供给事g处理器一个统一一致的事g接口。Ext.lib.Event呢？EventManager的很多功能其实是调用它完成的Q它的listeners、unloadListenersl护着所有的事g处理器? <img src ="http://www.aygfsteel.com/RongHao/aggbug/175955.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/RongHao/" target="_blank">ronghao</a> 2008-01-17 15:17 <a href="http://www.aygfsteel.com/RongHao/archive/2008/01/17/175955.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>OPENAJAX HUB介绍http://www.aygfsteel.com/RongHao/archive/2008/01/01/171978.htmlronghaoronghaoTue, 01 Jan 2008 04:57:00 GMThttp://www.aygfsteel.com/RongHao/archive/2008/01/01/171978.htmlhttp://www.aygfsteel.com/RongHao/comments/171978.htmlhttp://www.aygfsteel.com/RongHao/archive/2008/01/01/171978.html#Feedback0http://www.aygfsteel.com/RongHao/comments/commentRss/171978.htmlhttp://www.aygfsteel.com/RongHao/services/trackbacks/171978.html

OpenAjax HubQ?#8220;Hub”Q主要用来处?span lang="EN-US">Web应用开发者需要在同一个应用中同时使用多个AJAXq行库的情况。它提供标准?span lang="EN-US">JavaScriptQ当被包含在AJAX驱动?span lang="EN-US">Web应用里时Q它使得多个AJAX工具包能够在同一个页面里一起协同工作?span lang="EN-US">

AJAX应用开发者在开发中的需求往往存在着巨大的差异，q导致了(jin)如今?jng)场上存在超q?span lang="EN-US">200个各U各L(fng)AJAX产品Q同时这些品的架构和特性也存在巨大的差异。对一些开发者来_(d)他们认ؓ(f)开发中最重要的因素是扑ֈ一个能提供与后端服务器强大集成能力?span lang="EN-US">AJAX工具包?span lang="EN-US">

而对其他一些开发者来_(d)最重要的因素则是能否应用特D的客户端组Ӟ例如Q富数据|格lg或交互式的图表组Ӟ(j)。结果，AJAX生态系l发展到现在Q开发者在大部分时间里都能扑ֈ满他们每个Ҏ(gu)需求的AJAX工具包，但是也存在问题，他们往往必须在同一?span lang="EN-US">Web应用里؜合和匚w使用多个AJAX工具包才能满x(chng)有的需求?span lang="EN-US"> 

Hub应用的一个重要场合是门户和内容糅合，q里Q应用开发者创Z个页面，面里松散组装预先包装好的应用组件?span lang="EN-US">Hub实际上是保证q些AJAX驱动的应用组件能够用多个不同的AJAX工具包创建?span lang="EN-US">

主要Ҏ(gu)：(x)Hub 的发?span lang="EN-US">/订阅理?span lang="EN-US">

Hub的主要特性是它的发布/订阅理器（“pub/sub理?#8221;Q?pub/sub理器允许内容糅合的一个部分能够传播其他应用组件所订阅的事件。例如，假设存在一个日历组Ӟ该组件允许用戯够选取一个特定的日期。内容糅合里可能存在多个UIlgQ这些组仉需要根据新选择的日历日期而更新它们的视觉外观。在q种情况下，日历lg发布一?#8220;新日历日?#8221;的事Ӟ而其他可视化lg订阅这个事件。因此，pub/sub理器的通用消息的优Ҏ(gu)l由不同AJAX工具包所构徏的组件之间提供了(jin)一个关键的集成机制?span lang="EN-US">

Hub?span lang="EN-US">pub/sub理器提供各U各L(fng)先进Ҏ(gu)，例如对事件名U通配W的强大支持Q在下面的例子里q没有展C个特性?span lang="EN-US">

范例

让我们假讄在有q样一个商务智能应用，该应用用下面的AJAXq行库：(x)

?UTILS.js, Ҏ(gu)览器?span lang="EN-US">JavaScript环境提供非常有用的扩展，例如XMLHttpRequest?span lang="EN-US">APIs?span lang="EN-US">

?CALENDAR.js,提供一个日历组?span lang="EN-US">

?CHARTS.js, 提供一个图表组?span lang="EN-US">

?span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;">     DATAGRID.js,提供一个交互式的数据网格组?span lang="EN-US">

该应用有一个唯一的日历组Ӟ用户可以以图表组件的形式Q例如，每日情Ş、每周情形、每月情形和每年情Ş的柱状图Q和数据|格lg的Ş式（例如Q地Ҏ(gu)据与全国数据Q两U数据都以用户选择的感兴趣的列展示Q选择其中的一些数据视?span lang="EN-US">当一个新的日期在日历lg里被选择Ӟ各个用户指定的可视化lgQ例如，图表?span lang="EN-US">/或数据网格组Ӟ(j)都需要被更新?span lang="EN-US">

实现该应用的一个方法是在加载其?span lang="EN-US">AJAX库之前加?span lang="EN-US">OpenAjax Hub?span lang="EN-US">JavaScript。例如：(x)

<html>

<head>



<script type=”text/javascript” src=”OpenAjax.js”/>

<script type=”text/javascript” src=”UTILS.js”/>

<script type=”text/javascript” src=”CALENDAR.js”/>

<script type=”text/javascript” src=”CHARTS.js”/>

<script type=”text/javascript” src=”DATAGRID.js”/>



</head>


 

一?span lang="EN-US">AJAXq行库包?span lang="EN-US">OpenAjax HubQ将Hub作ؓ(f)它们标准发布的一部分Q在q种情况下，只要特定?span lang="EN-US">AJAXq行期的JavaScriptQ译注：(x)q里特定?span lang="EN-US">JavaScript指的是包含OpenAjax Hub?/span>AJAXq行库的代码Q在其他兼容OpenAjax的运行库之前被加载，那么则没有必要ؓ(f)OpenAjax.js使用一个单独的<script>元素?span lang="EN-US">

要应用工作Q开发者需要注册一个回调函敎ͼ当用户在日历lg里选择一个新的日期时调用该函数。这个回调函数接着使用OpenAjax Hub?span lang="EN-US">publish()函数传播q个新日期事Ӟ(x)

<script type=”text/javascript”>



function MyCalendarCallback() {

OpenAjax.hub.publish(“myapp.newdate”, newdate);

}



</script>
 

接着开发者需要开发这样一些代码：(x)所有的图表lg和数据网格组仉要订阅这个新日期事gQƈ要提供一个回调函数。各个回调函数将相应地更新特定的可视化组Ӟ(x)


<script type=”text/javascript”>



function NewDateCallback(eventname, publisherData,

subscriberData) {

更新特定的可视化lg

}

OpenAjax.hub.subscribe(“myapp.newdate”, NewDateCallback);



</script>

未来支持OpenAjax Hub的工具包

OpenAjax联盟正与工业界一起合作，辑ֈ?span lang="EN-US">OpenAjax Hub的广泛支持。一个特D的AJAX工具包可以像下面q样支持OpenAjax HubQ?span lang="EN-US">

?AJAX工具包可以包?span lang="EN-US">HubQ最好的方式Q?span lang="EN-US">Hub可以被小?span lang="EN-US">3K?span lang="EN-US">JavaScript实现Q所以一?span lang="EN-US">AJAX工具包简单地捆绑HubQ将它作为它们工具包的一个标准组件?span lang="EN-US">

?如果Hub在运行环境里可用则用它。其他一?span lang="EN-US">AJAX工具包可能决定在它们的发布中q不包含HubQ它们会(x)(g)?span lang="EN-US">Hub是否早先已经被加载了(jin)Q如果已l加载，它们则直接?span lang="EN-US">Hub的服务?span lang="EN-US"> 

?/span>W三方的开发者可以开发适配器。对大多数工具包来说Q它们可能允许第三方的开发者编写少量的JavaScript使得自己能够支持Hub?span lang="EN-US">

?span lang="EN-US">AJAX工具包包含内|对Hub的支持时Q应用开发者的工作更加容易，但是通过查找或编写适配器的方式Q?span lang="EN-US">Hub依然可以被那些ƈ未实现支?span lang="EN-US">Hub的工具包所使用?span lang="EN-US">





ronghao 2008-01-01 12:57 发表评论
]]>自己firefox下jsE序向ie兼容遇到的几个问?2)http://www.aygfsteel.com/RongHao/archive/2007/02/28/101228.htmlronghaoronghaoWed, 28 Feb 2007 13:53:00 GMThttp://www.aygfsteel.com/RongHao/archive/2007/02/28/101228.htmlhttp://www.aygfsteel.com/RongHao/comments/101228.htmlhttp://www.aygfsteel.com/RongHao/archive/2007/02/28/101228.html#Feedback0http://www.aygfsteel.com/RongHao/comments/commentRss/101228.htmlhttp://www.aygfsteel.com/RongHao/services/trackbacks/101228.html
var (tng)url (tng)= (tng)'http://localhost:8080/app/get_data';
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng)var (tng)pars (tng)= (tng)'';
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng)
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng)var (tng)myAjax (tng)= (tng)new (tng)Ajax.Request(
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng)url, (tng)
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng){
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng)method: (tng)'get', (tng)
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng)parameters: (tng)pars, (tng)
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng)onComplete: (tng)showResponse
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng)});
很简单的一D늨序，在firefox里始l不能工作，但在ie下一切正常。打开debugger,跟踪调试到这一?br />
this.transport.open(this.options.method, (tng)this.url, (tng)
 (tng) (tng) (tng) (tng) (tng) (tng) (tng) (tng)this.options.asynchronous);

在这一行执行出现问题，q掉prototype,自己写XMLHttpRequestQ问题同样出现在同一个地?br />
req.open("GET", (tng)url, (tng)true);
ie下正常。于是开始怀疑是firefox自己的问题，firefox可能更多的从安全斚w做了(jin)考虑Q拒l?span style="color: rgb(0, 0, 0);">http://localhost:8080q种带域名的讉K方式。把jsE序Ud应用E序里，url改ؓ(f)
var (tng)url (tng)= (tng)'/app/get_data';
问题解决Q访问正常?br />2.点击日历单元格需要弹Z个窗口用于新增工作安排，在firfox里ؓ(f)?jin)方便这h?br />
var (tng)TR=document.createElement("tr");
TR.innnerHTML="<td><input (tng)></td>";
firfox下正常，ie昄不出Q改Z面方式则问题解决
var (tng)TR=document.createElement("tr");
var (tng)TD=document.createElement("td");
TD.innnerHTML="<input (tng)>";
TR.appendChild(TD);



ronghao 2007-02-28 21:53 发表评论
]]>自己firefox下jsE序向ie兼容遇到的几个问?/title><link>http://www.aygfsteel.com/RongHao/archive/2007/02/13/99744.html</link><dc:creator>ronghao</dc:creator><author>ronghao</author><pubDate>Tue, 13 Feb 2007 11:07:00 GMT</pubDate><guid>http://www.aygfsteel.com/RongHao/archive/2007/02/13/99744.html</guid><wfw:comment>http://www.aygfsteel.com/RongHao/comments/99744.html</wfw:comment><comments>http://www.aygfsteel.com/RongHao/archive/2007/02/13/99744.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/RongHao/comments/commentRss/99744.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/RongHao/services/trackbacks/99744.html</trackback:ping><description><![CDATA[把firefox下jsE序向ie兼容Q一直用firefox调试Q今天在ie下跑跑遇C(jin)很多问题?br />1.E序中用到prototype.jsQ对于事件监听，我一直这样处?br /><div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); font-size: 13px; width: 98%;"><!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><span style="color: rgb(0, 0, 0);">Event.observe(job.jobDiv.timeDiv, "mousedown", eway.TimeTableDiv.selectMoveJobDiv);<br /></span><span style="color: rgb(0, 0, 0);"></span></div>在firefox下完全正常，但在ie下就找不到视图所附加的对象了(jin)Q改回来<br /><div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); font-size: 13px; width: 98%;"><!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><span style="color: rgb(0, 0, 0);">job.jobDiv.timeDiv.onmousedown</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> (tng)eway.TimeTableDiv.selectMoveJobDiv</span></div>q样两个览器都可以跑。附一个简单的试<br /><div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); font-size: 13px; width: 98%;"><!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><span style="color: rgb(0, 0, 255);"><!</span><span style="color: rgb(255, 0, 255);">DOCTYPE (tng)HTML (tng)PUBLIC (tng)"-//W3C//DTD (tng)HTML (tng)3.2 (tng)Final//EN"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">html</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">head</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"> (tng) (tng) (tng) (tng)<br /></span><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">title</span><span style="color: rgb(0, 0, 255);">></</span><span style="color: rgb(128, 0, 0);">title</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">script (tng)</span><span style="color: rgb(255, 0, 0);">src</span><span style="color: rgb(0, 0, 255);">="lib/prototype/prototype.js"</span><span style="color: rgb(255, 0, 0);"> (tng)type</span><span style="color: rgb(0, 0, 255);">="text/javascript"</span><span style="color: rgb(0, 0, 255);">></</span><span style="color: rgb(128, 0, 0);">script</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">script</span><span style="color: rgb(0, 0, 255);">></span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);"><br />window.onload</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">=</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">function</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">(){<br /> (tng) (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">var</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);"> (tng)b</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">=</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">new</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);"> (tng)Button(</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">"</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">wokao</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">"</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">,$('simple'));<br /> (tng) (tng)} (tng) (tng)<br /></span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">function</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);"> (tng)Button(value,domEl){<br /> (tng) (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">this</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">.domEl</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">=</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">domEl;<br /> (tng) (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">this</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">.value</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">=</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">value;<br /> (tng) (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">this</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">.domEl.buttonObj</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">=</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">this</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">;<br /></span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 128, 0);">//</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 128, 0);"> (tng) (tng)this.domEl.onclick=this.clickHandler;</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 128, 0);"><br /></span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);"> (tng) (tng)Event.observe(</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">this</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">.domEl, (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">"</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">mousedown</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">"</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">, (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">this</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">.clickHandler);<br />}<br /><br />Button.prototype.clickHandler</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">=</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">function</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">(){<br /> (tng) (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">var</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);"> (tng)buttonObj</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">=</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">this</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">.buttonObj;<br /> (tng) (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 255);">var</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);"> (tng)value</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">=</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">(buttonObj (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">&&</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);"> (tng)buttonObj.value) (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">?</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);"><br /> (tng) (tng) (tng) (tng)buttonObj.value (tng): (tng)</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">"</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">unknown (tng)value</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">"</span><span style="background-color: rgb(245, 245, 245); color: rgb(0, 0, 0);">;<br /> (tng) (tng)alert(value);<br />}<br /></span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">script</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div (tng)</span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="resizeMe"</span><span style="color: rgb(255, 0, 0);"> (tng)id</span><span style="color: rgb(0, 0, 255);">="simple"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /> (tng) (tng) (tng) (tng)</span><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">p</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);">This (tng)is (tng)just (tng)a (tng)clean (tng)DIV</span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">p</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">body</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /></span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">html</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"><br /></span></div>2.处理td的跨行和跨列Q都必须q样?br /><div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); font-size: 13px; width: 98%;"><!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><span style="color: rgb(0, 0, 0);">td.setAttribute(</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">rowSpan</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">,</span><span style="color: rgb(0, 0, 0);">2</span><span style="color: rgb(0, 0, 0);">);<br />td.setAttribute(</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">colSpan</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">,</span><span style="color: rgb(0, 0, 0);">2</span><span style="color: rgb(0, 0, 0);">);</span></div>注意<span style="color: rgb(0, 0, 0);">rowSpan</span><span style="color: rgb(0, 0, 0);">Q?/span><span style="color: rgb(0, 0, 0);"></span><span style="color: rgb(0, 0, 0);">colSpan中间字母都是大写的，而写成rowspan,colspan在firefox下是没有M问题的?br />3.在拖拽层的时候会(x)出现鼠标l过的文字被选中的现象，解决q个问题非常单，当你开始拖拽前即你用鼠标点中你惌拖拽的层Q这时候对事gq行处理<br /><div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); font-size: 13px; width: 98%;"><!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><span style="color: rgb(0, 0, 0);">e</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);">e</span><span style="color: rgb(0, 0, 0);">||</span><span style="color: rgb(0, 0, 0);">window.event;<br /></span><span style="color: rgb(0, 0, 255);">if</span><span style="color: rgb(0, 0, 0);">(e.stopProgation){<br />e.stopPropagation();<br />}<br /></span><span style="color: rgb(0, 0, 255);">else</span><span style="color: rgb(0, 0, 0);">{<br />e.cancelBubble (tng)</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> (tng)</span><span style="color: rgb(0, 0, 255);">true</span><span style="color: rgb(0, 0, 0);">;<br />}<br /></span><span style="color: rgb(0, 0, 255);">if</span><span style="color: rgb(0, 0, 0);">(e.preventDefault){<br />e.preventDefault();<br />}<br /></span><span style="color: rgb(0, 0, 255);">else</span><span style="color: rgb(0, 0, 0);">{<br />e.returnValue (tng)</span><span style="color: rgb(0, 0, 0);">=</span><span style="color: rgb(0, 0, 0);"> (tng)</span><span style="color: rgb(0, 0, 255);">false</span><span style="color: rgb(0, 0, 0);">;<br />} (tng)</span></div><br />如果使用</span>prototype.jsQ可以简单ؓ(f)一行代?br /><div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); font-size: 13px; width: 98%;"><!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--><span style="color: rgb(0, 0, 0);">Event.stop(e);</span></div><br /><img src ="http://www.aygfsteel.com/RongHao/aggbug/99744.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/RongHao/" target="_blank">ronghao</a> 2007-02-13 19:07 <a href="http://www.aygfsteel.com/RongHao/archive/2007/02/13/99744.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss> <footer> <div class="friendship-link"> <a href="http://www.aygfsteel.com/" title="狠狠久久亚洲欧美专区_中文字幕亚洲综合久久202_国产精品亚洲第五区在线_日本免费网站视频">狠狠久久亚洲欧美专区_中文字幕亚洲综合久久202_国产精品亚洲第五区在线_日本免费网站视频</a> </div> </footer> վ֩ģ壺 <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ɳ</a>| <a href="http://" target="_blank">质</a>| <a href="http://" target="_blank">ɳ</a>| <a href="http://" target="_blank">ɽ</a>| <a href="http://" target="_blank">̨</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">̨ɽ</a>| <a href="http://" target="_blank">Ϫ</a>| <a href="http://" target="_blank">¹</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ɽ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">Ͽ</a>| <a href="http://" target="_blank">κ</a>| <a href="http://" target="_blank">ǭ</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"> </a>| <a href="http://" target="_blank">޽</a>| <a href="http://" target="_blank">˫</a>| <a href="http://" target="_blank">ɽ</a>| <a href="http://" target="_blank">Ͷ</a>| <a href="http://" target="_blank">괨</a>| <a href="http://" target="_blank">ʵ</a>| <a href="http://" target="_blank">ӽ</a>| <a href="http://" target="_blank">˫</a>| <a href="http://" target="_blank">Ϻӿ</a>| <a href="http://" target="_blank">˳</a>| <a href="http://" target="_blank">½</a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank"></a>| <a href="http://" target="_blank">ϳ</a>| <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body>