通用后台管理界面架构3

February 24th, 2010 Posted in Other
No Comments

后台提交数据的表单相对于前台来说，结构可以使用统一简单的HTML结构，且扩展性不需要那么的强。
主要需要实现以下的功能点就可以了：
1、表单标题
2、数据域，label 标记区域（这个最好有）
3、validate 信息显示区域

先看看form 的基本结构 ：

<form>
   <fieldset>
      <legend>form title</legend>
      <label>field one:</label> <input/>
   </fieldset>
</form>

下面需要对每一个输入块进行分行，因此引入DL 标记。虽然考虑过在这里语意上ul比dl更加适合，不过针对于界面标记使用来说，ul更加可能在form里面重复使用多次，为了避免使用太多的class，使用了不怎么常见的dl标记。且顺便还带有 dt, dd 标记可以划分左右 :D
这样一来结构就有：

<form>
   <fieldset>
      <legend>form title</legend>
      <dl>
            <dt><label>field one:</label></dt>
           <dd>
                  <input type="text" />
                  <span class="err-msg">error message</span>
           </dd>
      </dl>
      <dl>
            <dd><input type="submit" /></dd>
      </dl>
   </fieldset>
</form>

这样的结构基本上能够满足大部分的form的表现需求了

数据表格
数据表格就没有什么其他太多的结构了，把一般的table下属标记都弄上就OK了。

<table summary="">
  <caption>table tilte</caption>
   <colgroup>
   <col class="idx"></col>
 </colgroup>
<tfoot>
   <tr><td></td></tr>
</tfoot>
  <thead>
      <tr> <th></th></tr>
  </thead>
<tbody>
 <tr><td></td></tr>
 <tr class="odd"><td></td></tr>
</tbody>
</table>
, ,
Read More