ZK整合BootStrap

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

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

这里简单介绍一下原理。

一、ZK插件的原理

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

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

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

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

如上图,我们这里重写了button,textbox、menu等控件。

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

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

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

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

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

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

比如Textbox是在zul.inp下。

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

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

<textbox placeholder="test" />

三、示例代码简介

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

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

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

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

示例代码详见附件中。

时间: 2024-08-28 11:35:01

ZK整合BootStrap的相关文章

WordPress 整合Bootstrap制作分页代码

1.整合Bootstrap分页代码 * 因为wordpress默认仅仅提供简单分页, 所以要实现数字分页,需要自定义函数,wordpress可以结合bootstrap制作分页,bootstrap提供了分页的样式,可以减少对样式的书写. 1.复制下面的代码到functions.php函数中 /** * 数字分页函数 * @Param int $range 数字分页的宽度 * @Return string|empty 输出分页的HTML代码 */ function bootstrap_pagenav

springmvc+mybatis+spring 整合 bootstrap html5 mysql

获取[下载地址]   三大数据库 mysql  oracle  sqlsever   更专业.更强悍.适合不同用户群体[新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统] A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技术:313596790freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等完整模块C 集成阿里巴巴数据库连接池drui

SSM springmvc+mybatis+spring 整合 bootstrap

获取[下载地址]   [免费支持更新]三大数据库 mysql  oracle  sqlsever   更专业.更强悍.适合不同用户群体[新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统] A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单;freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等完整模块B 集成阿里巴巴数据库连接池druid;  数据库连接池  阿里巴巴的 druid.Drui

springmvc+mybatis+spring 整合 bootstrap

获取[下载地址]   [免费支持更新]三大数据库 mysql  oracle  sqlsever   更专业.更强悍.适合不同用户群体[新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统] A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单;freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等完整模块B 集成阿里巴巴数据库连接池druid;  数据库连接池  阿里巴巴的 druid.Drui

springmvc+mybatis+spring 整合 bootstrap html5 mysql oracle SSM框架源码 SSH maven

获取[下载地址]   QQ: 313596790   [免费支持更新]支持三大数据库 mysql  oracle  sqlsever   更专业.更强悍.适合不同用户群体[新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]A 代码生成器(开发利器);      增删改查的处理类,service层,mybatis的xml,SQL( mysql   和oracle)脚本,   jsp页面 都生成   就不用写搬砖的代码了,生成的放到项目里,可以直接运行B 阿里巴巴数据库连接池druid

springmvc mybatis 整合 bootstrap maven shiro

A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单;freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等完整模块B 集成阿里巴巴数据库连接池druid;  数据库连接池  阿里巴巴的 druid.Druid在监控.可扩展性.稳定性和性能方面都有明显的优势C 集成安全权限框架shiro ;  Shiro 是一个用 Java 语言实现的框架,通过一个简单易用的 API 提供身份验证和授权,更安全,更可靠D

vue+jQuery+bootstrap整合

前端技术栈整合 1.  vue-cli的安装 gitbash指令: npm install -g @vue/[email protected]版本号 注:npm view vue-cli versions --json 查看可用vue版本 2. 利用vue-cli创建项目 gitbash指令:vue init webpack 项目名 3. 安装jQuery gitbash指令:npm install [email protected]  --save 4. 安装bootstrap gitbash

第二百三十八节,Bootstrap输入框和导航组件

Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. 在左侧添加文字 input-group-addon样式class类,写在input同级的span里,给输入框添加一个左片段(Bootstrap)input-group样式class类,写在input外层div里,将

【Bootstrap】1.初识Bootstrap

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进行下载. 2.准备项目模板文件夹 接下来,我们为第一个项目创建一个文件夹以及一些基本的文件.谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去. 2.1 下载H5BP 访问网站链接地址:https://html5boiler