New Timeline的Toolbar样式设计

2023-05-16

最近在做新版的Timeline,Toolbar【Menu】的功能基本完成,因此把截图拿出来与各位博友分享一下。

新版Timeline【HTML版本】主页面:

这次主要讲解一下Toolbar【Menu】的功能。

1、Toolbar的主要功能按钮:

这块是用Ext的Toolbar实现的,之前用jQuery.toolbar.js实现,但是在实现Check选择菜单和点击后悬停菜单方面,jQuery.toolbar.js实现起来比较困难,需要自己修改js。

2、EventList效果:

此模块主要应用的Ext的Tree来实现的,虽然暂时没有树状结构但是便于以后分类的扩展,此块的Tree的panel要关联到menu上,这块用了一点小技巧,具体方法是:正常添加Event list的menu,然后用menu的item的html属性添加一个treeGrid的div【设置固定的宽度和高度】,然后添加单击事件,在单击事件中获取业务数据,将业务数据构建成treeStore格式,然后添加到Tree.panel上,将tree.panel绑定到html中的div【renderTo】就可以了,另外提醒一下,就是不用每次点击都做这些操作,需要一个变量记录一下,如果第二次或者之后点击,不需要取数据再load了,只需要显示原有的Event list就可以了。

3、Time Scale:

此块重要是动态修改Timeline模式的时候需要动态修改icon_ok图标,这块难度不大。

4、Legend:

此块主要是menu实现了既包含图标还有checkbox属性,其实这是Ext的toolbar本身就支持的,只需要正确配置其属性就好了。

5、More Infomation

 

主要的功能就介绍这些了,如果有需要深入交流的请给我留言。

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

New Timeline的Toolbar样式设计 的相关文章

  • Cocoa:带有用于切换选项卡的工具栏图标的选项卡视图

    各种首选项对话框 Safari Mail Xcode4 和任何使用 NSPreferences 的对话框 和 Xcode4 的组织器使用让人想起选项卡视图的东西 只不过它使用工具栏按钮在选项卡之间切换 这些按钮被 按下 实现这种选项卡视图的
  • 如何在屏幕底部添加工具栏?

    我是新来的 我需要你的帮助 因为我不知道一些事情 例如 我为我的应用程序放置了一个工具栏 而不是在屏幕顶部放置操作栏 现在我想在底部放置一个工具栏 那么我该怎么做呢 工具栏是正确的方式 并且它兼容android 4 0 谢谢您的回答 编辑
  • 如何在没有嵌套滚动视图的情况下实现新材料 Gmail 工具栏?

    我想实现新的 gmail 之类的工具栏 没有嵌套滚动视图 它可以滚动 但向下滚动时背景应该可见 It will look like this 这不是一个嵌套的滚动视图 它回收者视图 如果你想要这样的搜索栏 你可以使用CardView和 Ed
  • 为什么 requestAnimationFrame() 在帧末尾运行我的代码,而不是在帧开头?

    var y 0 canvas height 5 ctx fillStyle green function update requestAnimationFrame update ctx clearRect 0 0 canvas width
  • 如何使用代码在Python中删除Mayavi工具栏

    我有几个 Mayavi 图 我将它们组合在一个窗口中 沿着文档 如果我能去掉所有工具栏就更好了 虽然可以右键单击每个工具栏以使它们消失 但我想对它们进行编码以使其消失 像这样的命令scene hide toolbar 将是理想的 我在 Tr
  • 如何更改工具栏主页图标颜色

    我正在使用 android support v7 widget Toolbar 并从中学习这个帖子如何将汉堡包图标的颜色更改为白色 但当我打电话时向上 后箭头仍然是深色 setDisplayHomeAsUpEnabled true 我怎样才
  • jQuery 滑块作为时间线

    我刚刚完成了 jQuery 手风琴与 jQuery 滑块的合并 IE 显示 3 张图片 用户可以使用PREV or NEXT按钮可查看下一张 上一张 3 张图像 他们还可以使用滑块浏览所有图像 下一步是使这个滑块看起来像时间线 左侧需要从
  • 如何将AppBarLayout的高度设置为0

    我的布局文件如下
  • 如何使 ImageView 在工具栏中居中?

    一直试图将徽标放在我的工具栏中居中 当我导航到下一个活动时 会出现 向上可供性 图标 它将我的徽标稍微向右推 如何将我的徽标保留在工具栏的中心 而不删除向上的可供性图标 这是我的工具栏标签
  • QtToolBar 按钮文本中带有下划线快捷键

    我有一个简单的 Qt 工具栏 带有纯文本按钮Action MainWindow MainWindow QWidget parent QMainWindow parent QToolBar toolBar new QToolBar this
  • SwiftUI - 如何将工具栏添加到 NavigationView 内的 TabView 选项卡?

    我正在尝试添加不同的toolbars 到我的每个选项卡 但它们没有显示 该应用程序主要在横向 iPad 上使用 我可以将工具栏添加到TabView本身并显示 但我不知道如何将按下导航堆栈的按钮传递到要在本地处理的各个视图 视图模型 我尝试过
  • MFC 将 CMFCToolBar 按钮更改为切换而不是按下/释放?

    我在网上找到一篇文章 说将工具栏按钮设置为保持按下的类型 只需设置一个样式TBBS CHECKBOX在按钮上 但它对我不起作用 它仍然像普通按钮一样工作 我确认样式已设置 在创建之后SetWindowText MFC 向导设置CMainFr
  • 为什么 Chrome 需要 12 秒来更新图层树?

    我有一个相对不复杂的 ASP Net 应用程序 它偶尔会在层中显示一条警报消息 带有阴影 并带有一个按钮来消除通知 这段代码多年来一直运行良好 最近 我收到用户抱怨响应速度非常慢 他们的体验是页面完全没有响应 并且当他们单击 确定 按钮时很
  • Extjs - 带有子菜单的工具栏按钮菜单下拉列表。这是可能的?

    我已经完成了一个带有带有下拉菜单的按钮的工具栏 但我需要更多的子菜单级别 可以这样做吗 例子 工具栏按钮 gt 菜单 1 级 1 菜单 2 LV 1 menu 3 lv 1 gt 子菜单 1 lv 2 子菜单 2 lv 2 菜单 4 LV
  • Leaflet Draw spritesheet 图标问题 - 缺失且未对齐

    我已将传单绘制纳入我的一个项目中 我的问题是图标没有显示在工具栏中 它看起来像这样 环顾四周我发现THIS https github com Leaflet Leaflet draw issues 617发布并按照其说明进行操作 我在 Le
  • 带有 Material UI 的工具栏内的中心头像

    有没有办法将 Avatar 组件与 MaterialUI 组件一起放在 Toolbar 中
  • 在多个编辑器之间共享 Quill 工具栏

    与伟大的Quill http quilljs com Javascript 的富文本编辑器 我试图让两个或更多编辑器共享同一个工具栏 我想 从文档 http quilljs com docs api 目前这是不可能的 所以我试图通过 API
  • 如何捕获片段中工具栏上的导航图标单击?

    我有一个对话框片段 其中布局中有工具栏 我想让后退按钮 导航图标 在工具栏中工作并在单击时退出片段 但我无法捕获 对话框 片段中工具栏导航图标上的单击事件 这是我获取工具栏的方式 toolbar Toolbar rootView findV
  • 如何将 ToolbarItem 放置在后缘?

    我试图将工具栏项目放置在工具栏 MacOS 的后缘上 我浏览了文档 发现以下内容 automatic 项目被放置在center bottomBar 对于 MacOS 不适用 cancellationAction 与工作表相关 confirm
  • 创建自定义工具栏?

    Please help me to create a toolbar like this home page design 工具栏顶部有 3 个按钮 3 个图像按钮 下面2个按钮 搜索框 imagebutton 和镜头 imagebutto

随机推荐