zk 布局_ZK实际应用:样式和布局
zk 布局
在本文中,我们将介绍如何在ZK小部件上附加新CSS样式规则,以及如何覆盖现有样式。 我们还将介绍ZK中UI布局的一些基础知识。
目的
- 使用ZK的布局和容器小部件来托管我们在先前文章中构建的清单CRUD功能。
- 设置ZK小部件的样式
ZK实战功能
- 边界布局
- 布置图
- 标签框
- 包括
- 同级
- zclass
使用布局和容器 Borderlayout和Hlayout
Borderlayout将窗口分为5个部分,如下所示:
事不宜迟,让我们剖析标记并查看其工作原理:
<window ...'><borderlayout width='100%' height='100%'><north size='15%'><hlayout width='100%' height='100%'><label hflex='9' value='Alpha Dental' /><label hflex='1' value='Sign Out' ></label></hlayout></north><east size='10%'></east><center><tabbox width='100%' height='100%' orient='vertical'><tabs width='15%'><tab label='Inventory' /><tab label='TBD' /><tab label='TBD'/></tabs><tabpanels><tabpanel><include src='inventory.zul'/></tabpanel><tabpanel></tabpanel><tabpanel></tabpanel></tabpanels></tabbox></center><west size='10%' ></west><south size='10%'></south></borderlayout>
- 第3和27行,可以调整北和南窗口小部件的高度,但不能调整宽度
- 第9和26行,可以调整东西的小部件的宽度,但不能调整高度
- 第10行,中心小部件的尺寸取决于为北,西,南和东小部件输入的尺寸
- 从第4行到第7行,我们用Hlayout包裹了这两个标签,因此它们将相对于我们指定的'hflex'属性按比例显示。 也就是说,分配给hflex ='9'的Label的宽度是分配给hflex ='1'的Label的9倍。
- 每个内部小部件(北,西等)只能接受单个子组件,因此,在放置到Borderlayout内部小部件(北,西等)中之前,多个小部件必须由单个容器小部件(如Hlayout)包装。
- 第11行,我们放置了一个Tabbox元素,并将其方向设置为垂直,以期望将库存CRUD功能嵌入其中
- 第12到16行,我们将每个标签的标题
- 第18行,Tabpanel是保存标签内容的容器
- 第19行,我们将广告资源CRUD功能嵌入了Include标签内。 库存.zul上的小部件将附加到此页面
覆盖现有的ZK样式规则
ZK默认字体属性和背景颜色已修改,因此标题将更加突出。 让我们快速解释一下这是如何完成的。
使用Chrome Developer Tool或Firebug扩展程序,我们可以轻松地检查Borderlayout的源代码,并为ZK小部件找到ZK样式类,如下所示:
从这里我们了解到,突出显示区域的命名模式是z-north-body。 同样,我们可以对所有感兴趣的标记执行相同的操作,然后继续覆盖其CSS样式规则:
<zk>
<style>.z-tab-ver .z-tab-ver-text { font-size: 18px; } .z-north-body, .z-south-body { background:#A3D1F0 }.z-east-body, .z-west-body { background:#F8F9FB }
</style>
<window border='none' width='100%' height='100%'><borderlayout width='100%' height='100%'><north size='15%'>...</north><east size='10%'></east><center>...</center><west size='10%'></west><south size='10%'></south></borderlayout>
</window>
</zk>
通过样式属性附加其他样式规则
在这里,我们正在修改North小部件中包含的Label的样式。 由于我们只希望这两个标签(而不是全部标签)受到我们新样式的影响,因此像我们以前那样覆盖原始样式是没有意义的。 对于这些孤立的修改,只需将样式规则分配给ZK小部件随附的'style'属性就足够了:
<north size='15%'><hlayout width='100%' height='100%'><label value='Alpha Dental' style='font-size: 32px; font-style: italic; font-weight:bold; color:white; margin-left:8px;'/><label value='Sign Out' style='font-size: 14px; font-weight:bold; color:grey; line-height:26px'></label></hlayout></north>...
通过Sclass附加其他样式规则
直接在标记中分配样式规则并污染代码的另一种方法是声明一个样式类,缩写为'sclass',然后将规则分配给'sclass'属性,如下所示:
<zk>
<style>.company-heading {font-size: 32px; font-style: italic; font-weight:bold; color:white; margin-left:8px;}
</style>
<window ...><borderlayout ...><north ...> <label value='Alpha Dental' sclass='company-heading'/></north>...</borderlayout>
</window>
</zk>
简而言之
- 这篇文章介绍了三种修改默认ZK样式的方法:覆盖现有的ZK样式类,将样式规则直接分配给小部件的style属性,或者在CSS文件或Style标记内定义CSS类,然后将该类分配给小部件的sclass属性
- 使用开发人员工具(例如Firebug)检查ZK小部件并找出要覆盖的ZK样式类
- hlex属性允许开发人员相对于彼此成比例地定义小部件的宽度
- 布局小部件可帮助开发人员将演示窗口划分为多个部分
相关链接:
ZK样式指南
边界布局
布置图 海福克斯
参考: ZK in Action [4]: JCG合作伙伴 Lance Lu在Tech Dojo博客上的样式和布局 。
翻译自: https://www.javacodegeeks.com/2012/08/zk-in-action-styling-and-layout.html
zk 布局
zk 布局_ZK实际应用:样式和布局相关推荐
- ZK实际应用:样式和布局
在之前的ZK in Action帖子中,我们使用ZK MVVM实现了CRUD功能 . 我们还快速浏览了一些样式代码,可能需要更多的解释. 在本文中,我们将讨论如何在ZK小部件上附加新CSS样式规则,以 ...
- flex 瀑布流 (多列样式column布局内容被截断)
<div class="recom_view"> <div class="recom"> 1 </div> <div ...
- [React Native Android 安利系列]样式与布局的书写
欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有: https://segmentfault.c ...
- python制作网页样式与布局_清华大学出版社-图书详情-《CSS3+DIV网页样式与布局案例课堂(第2版)》...
前 言 "网站开发案例课堂"系列图书是专门为网页设计初学者量身定制的一套学习用书.整套书具有以下特点. 前沿科技 无论是网站建设.数据库设计还是HTML5.CSS3,我们都精选较为 ...
- 渲染:重绘,重排/重新布局,重设样式
2010 update: Lo, the Web Performance Advent Calendar hath moved 2010年更新: Lo, Web Performance Advent ...
- 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式 表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
- qt布局嵌套_QDockWidget嵌套布局详解-实现Visual Studio布局
概述 许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...
- 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
- 常见的布局实现,以及响应式布局技巧。
布局实现 采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局.可切换的固定布局.弹性布局.混合布局. 固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器 ...
最新文章
- python 利用模板文件生成配置文件
- oracle 存储过程(分析理解)
- mysql语句:索引,游标,存储过程,视图,分区,分库分表,数据库集群,数据库负载均衡...
- 在VS2008中使用Qt编程
- SH760二自由度系统非周期激励解析法求解
- scrapy 图片url 转base64_一文快速掌握 scrapy 爬虫框架
- 深入理解深度学习中的激活函数
- 关于某系统的全面质量属性战术
- 提示illegal reference to data member'CPMAgentManageDlg::m_matrixMatrixSt'in a static member function
- 菜鸟对新技术的一点看法
- 准备 Kendo UI 开发环境
- 进击的雨燕------------错误处理
- kvm学习---制作win7虚拟机镜像,并配置网络
- Python:实现Gale-Shapley盖尔-沙普利算法(附完整源码)
- 深度互学习-Deep Mutual Learning:三人行必有我师
- 【虚幻4】UMG组件的简介与使用(Common 常用组件篇)
- 认识一下,JavaScript今年25岁啦
- LocalDateTime查找最近的五分钟点
- Java truelicense 实现License授权许可和验证
- 面渣逆袭:计算机网络六十二问,三万字图文详解