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 ...
- python制作网页样式与布局_清华大学出版社-图书详情-《CSS3+DIV网页样式与布局案例课堂(第2版)》...
前 言 "网站开发案例课堂"系列图书是专门为网页设计初学者量身定制的一套学习用书.整套书具有以下特点. 前沿科技 无论是网站建设.数据库设计还是HTML5.CSS3,我们都精选较为 ...
- 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式 表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
- ASP.NET MVC – 样式和布局简介
MVC 是三种 ASP.NET 编程模式中的一种.MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式. 添加布局 文件 _La ...
- [React-Native]样式和布局
一.基本样式 (1)内联样式 在组件里面定义样式 <Text style={{color:'orange', fontSize:20}}> 小字号内联样式</Text> (2) ...
- html flex 表单样式,Flexbox 布局的最简单表单的实现
弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇 教程 ,才意识到一 ...
- [React Native Android 安利系列]样式与布局的书写
欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有: https://segmentfault.c ...
- 选择器高级、样式及布局
选择器高级 选择器高级 选择器高级主要是基础选择器的各种组合,分为以下三个: 1.群组选择器 <style>/* 群组选择器:可以同时控制多个标签 *//* 选择器位通过逗号隔开,每一个选 ...
最新文章
- 阿里云python服务器_Python服务器
- 重磅公开!阿里语音识别模型端核心技术,让你“听”见未来
- Stanford Parser的学习之开篇(一)
- react-native-router-flux 使用详解(三)
- linux下的scp命令大全
- C功底挑战Java菜鸟入门概念干货(三)
- 为什么要有红黑树?什么是红黑树?
- 红米手机开启---开发者选项方法
- 最新xmind2022版思维导图如何使用详解教程
- uniCloud云开发
- 四川高中计算机大赛官网,四川省教育厅关于公布2018年度四川省中小学电脑制作活动评选结果的通知...
- Solved: ERROR: Failed building wheel for hdbscan
- CTP For Python
- UGUI IPointerUpHandler事件失灵
- 千团大战再现社区团购 下一个“拼多多”会在这里诞生吗?
- Synology 搭建双机冗余High Availability服务
- Expedite Review(加速审核)
- php下memcache清理过期缓存内容,手动清除memcached缓存方法
- 胖虎都看得懂的CSS入门
- 高效记忆/形象记忆(08)英语单词记忆-字母熟词拆分
热门文章
- 做一个完整的Java Web项目需要掌握的技能
- 递归 反转字符串_使用递归反转字符串
- java mic波形识别_会议季Mic Drop:您不应该错过的13场Java演讲
- apache pdfbox_Apache PDFBox 2
- jax-rs jax-ws_如何以大数据的JAX-RS响应的形式将JPA结果流化/序列化
- junit测试类叫什么名字_使用Junit测试名称
- 使用JSON模式验证来映射稀疏JSON
- 如何使用Java创建AWS Lambda函数
- junit:junit_处理JUnit中异常的另一种方法:catch-exception
- java ee 7 新_Java EE 7:新功能???