前端

img Adub

pfw组件效果简单示例

发表于2004/10/18 16:28:00  1492人阅读

分类: pfw

气坏了,写了很多竟然丢了。

  1. Page
    它是一个最外层的容器,所有的组件都要放在Page中。下面的这个page里放了两个组件,一个Fom,一个List:
     
    下面这个Page中放了两个没有title的树:
     
  2. Button Container
    用来放button,并且只有要把Button直接放在Page中的时候才需要这个容器。
     
  3. Form
    Form可以设置每行显示列数,下面这个显示一列:


    显示两列:
     
    一个比较复杂的Form:


    不光是Form中的字段,所有的组件中的每一个字段都可以设置不同的显示风格,具体请察看组件接口文档。
    viewOnly的Form,用来显示详情:
     
  4. List
    List组件用来显示一组对象,是否支持翻页,只需要设置一个参数就可以完成:


    List组件通常和Form组件配合使用,上面写查询条件,下面根据查询条件列出结果,如下:
     

    多选List:
     
  5. Grid
    Grid和List不同的地方在于,Grid的每个字段都可以编辑,并且是全部提交。
     
  6. Tree
    通常用来做菜单的单选树:


    多选树:
     

    Tree的每一个节点都可以设置不同的图片,以达到美观的效果:
     
  7. Tab
    Tab是一个容器,里面可以放置Form、List、Grid、Tree等一系列组件,也可以嵌套Tab。

  8. 支持样式切换,定义你自己喜欢的界面风格,如下所示:

    左边的两棵树都去掉了边框,而右边Tab的边框也换成不同的风格


    不同风格的List


    不同风格的Form

    所有的显示风格都通过css控制,通过更换不同的css再加上对组件的属性设置就可以得到你满意的界面。
    pfw之后也会提供附带的风格库。


    这里只是一些简单的描述,以便初步了解pfw所能提供的页面组件。更详细内容,请参考接口文档以及结构文档。

阅读全文
0 0

相关文章推荐

img
取 消
img