使用YUI在页面生成Widget时,我们可以使用markup的模式,在这种模式下,生成的widget是从已有的HTML Element中读取一定的信息,并适当的复用一些已有的HTML Element,例如,你可以用以下的HTML元素来生成一个Panel:
[code]<div id="panel1">
<div class="hd">Panel #1 from Markup</div>
<div class="bd">This is a Panel that was marked up in the document.</div>
<div class="ft">End of Panel #1</div>
</div> [/code]
使用如下的JS:
[code]var panel = new YAHOO.widget.Panel("panel1", {
/* other properies */
});[/code]
那么,这种特点的好处是什么?有一种WEB开发的理论叫做Progressive Enhancement,意在在保证WEB程序对用户提供基本的体验后,再逐步加强应用的用户体验,这样,即使用户的浏览器不支持JS,你的页面他也可以查看的到基本的信息,并且,对于SEO非常有效。并且,YUI使用的markup是完全符合w3c标准的。(想到DOJO的dojoType了嘛?),YUI中的这种例子很多,例如Menu可以从ul li标签生成,DataTable可以从页面的Table元素读取数据……
嗯,因为之前用EXT,整个页面就几个空空的DIV,所以才想找一种有利于在浏览器不支持JS的情况下也能给用户呈现基本视图的方法,于是重新拾起了YUI。
[code]<div id="panel1">
<div class="hd">Panel #1 from Markup</div>
<div class="bd">This is a Panel that was marked up in the document.</div>
<div class="ft">End of Panel #1</div>
</div> [/code]
使用如下的JS:
[code]var panel = new YAHOO.widget.Panel("panel1", {
/* other properies */
});[/code]
那么,这种特点的好处是什么?有一种WEB开发的理论叫做Progressive Enhancement,意在在保证WEB程序对用户提供基本的体验后,再逐步加强应用的用户体验,这样,即使用户的浏览器不支持JS,你的页面他也可以查看的到基本的信息,并且,对于SEO非常有效。并且,YUI使用的markup是完全符合w3c标准的。(想到DOJO的dojoType了嘛?),YUI中的这种例子很多,例如Menu可以从ul li标签生成,DataTable可以从页面的Table元素读取数据……
嗯,因为之前用EXT,整个页面就几个空空的DIV,所以才想找一种有利于在浏览器不支持JS的情况下也能给用户呈现基本视图的方法,于是重新拾起了YUI。