使用ivx实现栈面板的经验总结

之前有一片帖子已经详细说明了如何实现折叠面板,今天再来说说另一种面板形式——栈面板。栈面板也是纵向排列子部件,但是它的特点是任意时刻只显示某一部件的内容,其它部件则只显示标题。用户可以通过点击标题进行切换,是一种十分有用的垂直菜单系统。比如当我展开购物中心后,我再点击浏览历史则浏览历史展开的同时,购物中心也会完全合起。

1.变量
通用变量“导航栏数据”的格式如下图,与折叠面板相似他也是三层结构,first、second和third分别对应三级菜单,name是菜单名称,status是菜单的展开状态,0是合起,1是开启。

相比折叠面板多添加了一个文本变量“当前选中页面”,它的作用是存放我们当前选中的菜单的name。因为在折叠面板中我们任意时刻只有一个菜单是展开的,从数据上讲只有一个子菜单的status和它的父菜单的status等于1,并将最低层级菜单的name赋值给“当前选中页面”。

2.第一级循环
第一级循环对应first数组,当前数据1即first的数组元素。菜单行就是用来显示一级菜单的,其中的文本组件绑定了first数组元素的子元素name,即菜单名称。

if容器则是做一个状态判断,如果当前菜单展开,显示指向上的图标,如果当前菜单合起,显示指向右的图标。同时图标本身的可见属性也进行了数据绑定,只有当前菜单含有子菜单,图标才是可见的。

点击菜单时首先判断菜单的状态,然后执行不同的条件分支。前面说过,栈面板任意时刻只有一个菜单是展开的,所以为了实现这一功能,我们在展开选中面板前要进行一个操作,即将所有的菜单都先合起,对应下图事件中的两层循环,第一层将一级菜单全部合起,第二层将全部二级菜单合起。(第三层菜单没有子菜单,所以third数组元素的子元素status修不修改是没有意义的)


3.第二级循环
第二级循环对应second数组,当前数据2即second的数组元素。与一级菜单行不同,二级菜单行的可见属性进行了数据绑定,含义是只有当前二级菜单所从属的一级菜单状态为展开时,当前二级菜单才是可见的。其它地方都十分类似了。


二级菜单的点击事件与一级菜单中也是类似的,不同的地方在于二次菜单的切换只会是在同一个一级菜单下,所以我们不再需要关心第一层级的菜单状态,只需要将当前一级菜单下的二级菜单都合起,因此只有一层循环。另外如果二级菜单下是空的,则直接将二级菜单的name赋给“当前选中页面”。

4.第三级循环
第三级循环对应third数组,当前数据3即third的数组元素,数据绑定也与前面类似。

三级菜单的点击事件就很简单了,点击行组件时直接将当前数据3的name子元素赋值给文本变量“当前选中页面”即可。

原文地址:https://blog.51cto.com/14556317/2482507

时间: 2024-10-30 07:14:19

使用ivx实现栈面板的经验总结的相关文章

使用ivx中表格组件的经验总结

之前讲过了使用ivx在案例中如何使用图表组件更直观的展示数据,不过还有另一种展示数据也常用到的手段--表格.ivx中也对这一功能制作了对应的表格组件,今天就来说说这个表格组件是如何使用的.1.表格的数据来源表格和for循环创建一样需要有数据来源,而且多是对象数组(嗯,反正我就是喜欢对象数组).可以看到第一行除了第一列后面几个的元素都是 "left "(注意前后都是各两个下划线),这个是用于合并两个相邻表格的,而且把left换成right,up,down也都是可以的.2.内部框和选中框表

使用ivx步骤条容器的经验总结

步骤条是一种常见的导航形式,在各种流程处理中随处可见,例如重置密码,网购流程等等.ivx中已经将其封装成一个拓展组件,今天就说一说它是如何使用的吧.1.demo结构demo中主要内容放在一个横幅之中,正好三个行容器划分3部分.行1是放置步骤条容器,行2则是放置两个对步骤条容器进行操作的按钮组件.steps行可以看做一个文本标注行,主要就是让步骤名称对应好下面的步骤条组件,其内部的行1,行2几个行组件都是作为文本之间的填充.2.步骤条步骤条是拓展组件的一种,添加位置如下图所示.选中步骤条容器再点开

使用ivx中富文本组件的经验总结

富文本相比普通文本可以显示复杂的字体样式和排版方式,所以更适用于网页图文内容的排版,在很多案例中都会经常使用.ivx中也封装好了富文本组件和富文本编辑器组件,今天就说一下这两个组件该如何使用吧. 一.富文本和富文本编辑器富文本编辑器是一种可内嵌于浏览器,用于编辑富文本内容和格式的文本编辑器.它与富文本的区别是,前者仅容许在案例编辑状态下进行内容编辑,在非编辑状态下隐藏文本工具条,通常仅做展示,不与用户发生交互.后者则在案例非编辑状态下开放富文本编辑界面,容许用户进行富文本的排版和编辑.富文本组件

使用ivx实现批量上传图片的经验总结

通常我们使用上传图片都是上传单张,在ivx中其实也提供了批量上传图片的功能,今天就讲一下批量上传图片的具体操作.1.图片列表首先需要用一个对象数组存储批量上传的图片,然后用for容器循环创建一个图片列表.每个图片后面都有一个圆框关闭的图标,可以将当前数据从对象数组中删除,当然这里的删除只是从前台的对象数组中删除.2批量上传图片然后就是图片上传的部分,这里使用的是文件接口组件读取多张本地图片的动作,我们可以在该动作的回调中获取到参数"读取结果",它包含图片列表和读取失败原因两个部分,如果

关于ivx监听键盘按键的经验总结

之前的帖子里讲了ivx中很多组件都可以监听到鼠标的移入移出事件,还包括最常用的点击事件,其实我们也可以在案例中监听到键盘的按键操作,例如这个demo中我们可以在输入框内输入一些文本信息,然后点击send按钮或者直接敲击键盘Enter回车键就会在上方添加我们刚刚输入的内容.下面来说一下具体的实现方法.1.很显然上面的输入信息的展示用到了循环创建,我们需要一个数组来存放全部输入的信息,这个demo比较简单添加一个一位数组即可.2.接下来我们要做的就是在点击send按钮或者敲击Enter回车时将输入框

使用ivx实现简易计算器的经验总结

今天要讲的是利用ivx制作一个能够进行简单加减乘除运算的计算器,设计思路是将整个输入的运算式保存到一个文本变量中,通过eval()直接方法计算文本变量中表达式的值,下面说一下具体步骤.1.计数器界面的上面用于显示输入的计算式和计算结果,下面使用文本组件展示16个按键,这16个键可以分为四类,数字键,运算符键,等于键,清零键.其中按钮键和运算符键它们同类按键的操作都是类似的,我们可以写成一个动作组,点击按键时调用动作组并将按键的文本组件内容传给动作组即可.2.数字键点击数字键时,只需使用拼接字符串

使用ivx制作模拟时钟的经验总结

之前的帖子里已经使用时间轴和轨迹实现了很多的效果,今天我们来做一个模拟时钟.主要思路是用一个作为表盘,三个矩形分别作为时针,分针和秒针,通过各自轨迹设置他们在同一时间轴下的转动圈数成一定比例关系. 1.表盘首先是添加椭圆组件,这里我们需要设置它的原点横纵坐标都是50%,这样椭圆组件的XY坐标就是它的中心店坐标,这个XY坐标在我们设置指针的时候也要用到.2.添加指针指针使用矩形来展示的,由于指针要绕着表盘的中心点旋转,所以我们要将矩形的坐标原点与椭圆的坐标原点设置在同一个位置.因此先设置矩形的原点

WPF布局的6种面板

WPF用于布局的面板主要有6个,StackPanel(栈面板).WrapPanel(环绕面板).DockPanel(停靠面板).Canvas(画布).Grid(网格面板)和 UniformGrid(均布网格).一下详细介绍几种面板各自的特点: 1.StackPanel 栈面板,可以将元素排列成一行或者一列.其特点是:每个元素各占一行或者一列.Orientation属性指定排列方式:Vertical(垂直)[默认].Horizontal(水平).默认情况下,水平排列时,每个元素都与面板一样高:垂直

如何学习(1):构建全栈式知识结构

有次下班到家楼下等电梯,碰巧一位妈妈抱到两岁的小女孩在看旁边的宣传画.这时电梯还没到,这位妈妈就指着海报上的字读给小女孩,"这是太阳,那是月亮"--,想借这个机会教小孩认字. 这是中国式的.传统的教学方法,其实我对这种死记硬背的方法不怀好意,于是在电梯上开起了小差,为什么这种方法效果不好,不招受教者的讨好呢. 如果我是教自己的小女儿认字,我会怎么教呢? "牛牛,你看,上面画的是太阳.你知道吗?太阳公公每天很早就起床了,大地才开始暖起来,小朋友们才可以出来玩耍.到了晚上,太阳公