为了达到多种风格切换的效果,已经不可以再象以前那样,进行无约束的html编码了。浏览器端的代码质量也不得不关心起来。
对浏览器端代码,有3个部分,html,js,css。
html- model
css - view
js - controller
如:
对于一个日期控件
html中定义
在css定义此date的样式
在js中的onDomReady中对所有定义为date的textinput,增加onclick的事件,达到弹出日期选择面板的效果。
按照这种方式开发,可以形成一套可重用性非常高的js/css库,并且大大的简化了页面的开发。
对于导航栏。
在html中定义
在css中定义其风格,在js中的onDomReady中,动态为tree中最上层的<a>增加onclick事件,达到展开/收起子节点的功能,可以做成树状或panel状。这样可以使树,菜单这些功能不再需要重复编码。
对于这样一种编码的方式,确定html的结构,是非常重要的。对于上面导航栏的html,只定义了两层结构。如果要做成树的话,经常会出现3层甚至更多层。现在我迟迟没有确定一种确定的html结构,可以达到最简化的html,可以表达出一棵树的。
如果可以这样,那该多好,可是这样不行,就算行也没有了链接的功能。哎,xml本身就是树状的结构,结果想表达一棵树还挺麻烦,谁可以提供一个html表达的最简单的树的格式?
对浏览器端代码,有3个部分,html,js,css。
html- model
css - view
js - controller
如:
对于一个日期控件
html中定义
<input type="text" class="date"/>
在css定义此date的样式
在js中的onDomReady中对所有定义为date的textinput,增加onclick的事件,达到弹出日期选择面板的效果。
按照这种方式开发,可以形成一套可重用性非常高的js/css库,并且大大的简化了页面的开发。
对于导航栏。
在html中定义
<div class="tree">
<a>group a</a>
<ul>
<li><a>a1</a></li>
<li><a>a2</a></li>
<li><a>a3</a></li>
</ul>
<a>group b</a>
<ul>
<li><a>b1</a></li>
<li><a>b2</a></li>
<li><a>b3</a></li>
</ul>
<a>group c</a>
<ul>
<li><a>c1</a></li>
<li><a>c2</a></li>
<li><a>c3</a></li>
</ul>
</div>
在css中定义其风格,在js中的onDomReady中,动态为tree中最上层的<a>增加onclick事件,达到展开/收起子节点的功能,可以做成树状或panel状。这样可以使树,菜单这些功能不再需要重复编码。
对于这样一种编码的方式,确定html的结构,是非常重要的。对于上面导航栏的html,只定义了两层结构。如果要做成树的话,经常会出现3层甚至更多层。现在我迟迟没有确定一种确定的html结构,可以达到最简化的html,可以表达出一棵树的。
<node value="group a">
<node value="a1"/>
<node value="a2"/>
<node value="sub node">
<node value="sub1"/>
<node value="sub2"/>
<node value="sub sub">
<node value="subsub1"/>
<node value="subsub2"/>
</node>
</node>
</node>
如果可以这样,那该多好,可是这样不行,就算行也没有了链接的功能。哎,xml本身就是树状的结构,结果想表达一棵树还挺麻烦,谁可以提供一个html表达的最简单的树的格式?