使用ivx实现菜单导航的经验总结

前面已经说过了标签导航和页面导航的实现方式,今天再补充一种菜单导航的实现方法。它多见于网站的顶部或侧面的主导航条。一个导航条可能是多个导航菜单的组合。


1.首先,我们是用一个横幅作为导航条,在里面添加好各个菜单,再添加三个横幅分别作为三个标签的弹出菜单。这三个横幅的可见属性分别绑定了一个布尔值变量,其对应的布尔值变量为true则横幅可见,若为false则横幅隐藏。



2.给三个作为标签的文本组价添加事件,当鼠标移入它们的区域内时将与标签对应的那个横幅组件里的布尔值变量置true,则其对应横幅显示,当鼠标移出区域时,再将布尔值变量置false,横幅重新隐藏。


3.同时,作为菜单导航器我们还需要把鼠标移到菜单横幅上对菜单选项进行选择,所以还要给三个菜单横幅添加事件,当鼠标移动到横幅内时让横幅对应的布尔值变量为true,使横幅继续显示,当鼠标移出横幅区域再将布尔值变量置false。要注意的是从文本组件到菜单的横幅之间不要有空白区域,不然的话用户鼠标放到标签上时菜单显示了,结果用户想把鼠标移到菜单上,移到中间空白的区域,横幅就重新隐藏了,这样他就永远没办法把鼠标移到菜单上了。


4.最后是菜单的设置,demo中各个地方的行列比较华丽,其实根本上就是循环创建菜单选项,或者直接一个一个搭建好也是可以的。然后给每个选项设置不同的事件,比较常见的就是跳转页面。同时也可以添加鼠标移入移出改变选项背景颜色等显示效果的事件来优化用户体验。



5.嗯,你应该也猜到了。没错,ivx的拓展组件中也封装好了实现此功能的导航菜单容器。


在导航菜单容器中我们可以设置菜单的标题,选项和图标的相关属性。每个菜单选项也可以设置图标,还有鼠标移入移出改变颜色的效果。



总结

拓展组件里的导航菜单容器其实已经能满足绝大多数情况下的使用需求,当然了,对自由度要求比较高的话还是推荐自己亲手做一个出来啦。最后也统一说一下标签导航、页面导航和菜单导航的逻辑吧,虽然显示效果有一些差异,但是其实他们都是划分为两部分,标签部分和页面展示部分,而且我们要做的都是要建立一种标签到页面的一对一的映射关系,毕竟标签本质上就是实现一个页面选择器的功能。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容