码迷,mamicode.com
首页 > 其他好文 > 详细

ZK整合BootStrap

时间:2014-12-15 19:11:51      阅读:461      评论:0      收藏:0      [点我收藏+]

标签:zk   js   bootstrap   

关于ZK、BootStrap这里不做介绍了,如果不了解的,可能也不需要看这篇文章了。


目前ZKBootstrap的支持,完全可以插件化,也就是说页面可以完全不用改,而实现换样式。

这里简单介绍一下原理。

一、ZK插件的原理

首先需要在resources目录下进行下配置:

 bubuko.com,布布扣

如上图,这两个文件时最主要的。Config文件定义了该插件的基本信息,比如名称和版本;

Lang-addon文件定义了插件的详细信息,如下图,定义了js的目录(以web.js为默认前缀),以及要加载的css文件,当然还要定义所扩展的控件,比如这里的button

 bubuko.com,布布扣

相应的js目录下,需要有zk.wpd文件,该文件具体定义了,要加载哪些js文件

 bubuko.com,布布扣

如上图,我们这里重写了buttontextboxmenu等控件。

lang-addon文件所示,我们扩展的控件,为了不影响原有控件的属性,或者说和原有控件一起存在,我们定义了自己的mold属性,这里是bs。那在哪里定义哪些控件具体用哪个mold呢,就是zk.xml中,如下图:

 bubuko.com,布布扣

这里,具体定义了哪些控件需要用我们自定义的mold

 

二、简单介绍一下,我们如何来支持bootstrap的。

通过插件的方式,我们其实已经把bootstrap.min.css加载进来,这样就不需要在page页面上单独定义了,我们以扩展textbox支持bootstrap为例,

 bubuko.com,布布扣

 

看上图,zk在js端提供了一种机制,让我们可以在原有zk js控件的基础上,任意的修改,这个机制就是通过zk.afterLoad function实现的。

 

afterLoad的第一个参数是zk js的package name,这里我们需要查看zk自身的js实现,来确定某个控件到底属于哪个package,zk自身的实现在他的jar包中:

 bubuko.com,布布扣

比如Textbox是在zul.inp下。

 bubuko.com,布布扣

 

知道在哪个package后,我们就可以用afterLoad方法,在这个package加载完成后,执行我们自己的操作,用来对zk原生的js进行修改。

 bubuko.com,布布扣

比如这里的input.zul,我们仅仅实现了,当这个控件是bs mold的时候,他的sclass是form-control,最终我们在page zul文件中不用做任何修改,就可以支持bootstrap了,比如:

<textbox placeholder="test" />

 

 

三、示例代码简介

ui-examples.zip是示例代码,这个代码是在原有zk示例代码基础上做了一些调整,去掉了不需要的东西。

首先,先说一下java代码,如下图,只有两个类,Version类用于我们bootstrap插件的版本号,Runtime类是为了破解ZK

 bubuko.com,布布扣

最重要的是我们的插件实现:全部在resources目录下

 bubuko.com,布布扣

 

最后是页面代码:如果要看某个例子的实现,就可以访问/zk/xx.zul即可。

bubuko.com,布布扣


示例代码详见附件中。

ZK整合BootStrap

标签:zk   js   bootstrap   

原文地址:http://blog.csdn.net/shunlongjin/article/details/41945759

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!