【7.0】如何实现这种工具栏效果的tab？

登录

本帖最后由 Chelsey.Wang 于 2021-12-2 17:36 编辑

我想做一个JS这种效果的tab，点击“开始”显示工具栏，点击“插入”显示插入工具栏（PS：不要推荐选项卡，样式太丑了）该怎么去做？

Chelsey.Wang · Chelsey.Wang

您好，可以考虑通过按钮+页面容器来实现：

实现的思路比较简单，主要是需要花心思调整一下按钮和页面容器的样式，
单元格样式 - 活字格V7帮助手册 - 葡萄城产品文档中心 (grapecity.com.cn)
我是这样做的，可以参考一下：

1.设置页面容器和按钮，以及给页面容器设置边框。
注意这里紧贴页面容器的按钮单元格底部不设置边框，可以先选中页面容器，设置外侧框线，然后选中所有按钮，在设置边框中设置为无框线：

2.调整按钮基本样式。
一般模式下，设置按钮背景色为页面背景色，

设置按钮仅有一个下边框，颜色需要与之前页面容器的边框色相同：

边框圆角，关闭链接功能，仅将上面的两个角设置为圆角，下面的两个角设置为直角（0像素）

鼠标悬停和按下模式继承一般模式的设置，仅修改背景色即可

3.调整按钮焦点样式
这里主要是调整边框的颜色，其余设置都可以继承基础设置；
上、左、右边框调整为与页面容器边框相同的颜色；
下边框调整为与页面容器中子页面背景色相同的颜色

4.在按钮上绑定设置单元格属性命令，设置页面容器单元格的值为需要打开的子页面的名称，即可在页面容器中打开对应的子页面

5.如果需要，可以在页面加载时命令中，通过设置焦点命令将焦点设置在某一按钮上，这样就可以实现页面初次加载后，默认打开某一“标签”的效果

最后，附上我的demo，可以参考一下~

alexyui · alexyui

一般情况下标签页其实就是一个html的ul li的无序列表啊，还要带一些样式，还有一些伪元素等，其实跟JS关系不大的

行男一定行 · 行男一定行

alexyui 发表于 2021-12-2 11:49
一般情况下标签页其实就是一个html的ul li的无序列表啊，还要带一些样式，还有一些伪元素等，其实跟 ...

我只是用JS举了个例子

sz_xd · sz_xd

Chelsey.Wang 发表于 2021-12-2 11:39
您好，可以考虑通过按钮+页面容器来实现：

实现的思路比较简单，主要是需要花心思调整一下按钮和页面容 ...

非常感谢王老师的用心指教，谢谢！

Chelsey.Wang · Chelsey.Wang

sz_xd 发表于 2021-12-7 01:49
非常感谢王老师的用心指教，谢谢！

不客气，大家可以找到适合自己的解决方案，掌握更多的活字格技能，问题解决了就好

~

swejet · swejet

Chelsey.Wang 发表于 2021-12-2 11:39
您好，可以考虑通过按钮+页面容器来实现：

实现的思路比较简单，主要是需要花心思调整一下按钮和页面容 ...

我没太明白，如果功能按钮放到页面容器里，怎么让功能按钮在页面上起作用呢？

Chelsey.Wang · Chelsey.Wang

swejet 发表于 2021-12-7 10:20
我没太明白，如果功能按钮放到页面容器里，怎么让功能按钮在页面上起作用呢？

您好，可能是对问题的理解方向不太一样，我理解楼主是想要实现一个类似这种样式的tab页，这个方案可以作为一个解决目前选项卡可调整样式不能满足时，可以自由调整选项卡样式的临时解决方案。
像工具栏本身就是一个偏向CS端的设计，BS端一般不会这么来实现，而且选项卡中的按钮本身也是不能在主页面上起作用的。

swejet · swejet

Chelsey.Wang 发表于 2021-12-7 15:07
您好，可能是对问题的理解方向不太一样，我理解楼主是想要实现一个类似这种样式的tab页，这个方案可以作 ...

就是说，把功能按钮放在页面容器里，按钮的功能就是不能作用到页面容器的父窗口上呗？

Chelsey.Wang · Chelsey.Wang

swejet 发表于 2021-12-7 16:29
就是说，把功能按钮放在页面容器里，按钮的功能就是不能作用到页面容器的父窗口上呗？

可以通过传值去影响父页面，但是具体还是要看是什么功能，如果您对此有一些疑问，建议您可以重新发一个帖子提问哦~我们尽量保证一个帖子解决一个问题，这样也能针对您的问题进行解答~

		自动登录	找回密码
密码			立即注册

[已处理] 【7.0】如何实现这种工具栏效果的tab？

最佳答案

11 个回复

本帖子中包含更多资源

评分

活字格认证

活字格高级认证

微信认证勋章

讲师达人

悬赏达人

圣诞拼拼乐

时代开发者征文活动