北屋教程网

专注编程知识分享,从入门到精通的编程学习平台

推荐一个免费开放的E6开发平台中非常炫酷有用的“悬浮按钮”功能

经常可以看到网站或者某些Web系统中有“悬浮按钮”的功能,点击后可以弹出悬浮菜单用于显示联系信息等等,比如下图中的“联系我”这个按钮的功能:

在免费开放的E6开发平台中,我们也提供了类似的功能组件,并且使用极其简单,下面我们介绍下怎么实现这样的功能。打开E6开发平台,在需要增加悬浮按钮的页面(我们这里在首页增加),在左侧工具箱中找到“悬浮按钮”控件并在所需要的位置拖拽出来,然后设置其外观属性。

设置悬浮按钮属性:比如设置背景色1,背景色2实现渐变,设置圆角大小,等等。

悬浮按钮本身也是一个容器控件,我们可以在上面放置图片控件,标签控件,形状控件等等,我们这里直接拷贝一个图标放上去(记得设置这个图片控件的“显示标签”属性为False),效果如下图:

悬浮按钮鼠标移动上去以后需要弹出一个悬浮层,显示详细内容。这需要用到“悬浮菜单面板”控件,从左侧工具箱中找到“悬浮菜单面板”控件并在页面空白处拖拽出来,如下图:

悬浮菜单面板同样也是一个容器控件,可以在上面放置其他控件,比如我们这里就放置了一个联系电话和一个图片。你也可以在面板上防止其他元素,设置其背景色,画线,画矩形,圆形,设置某个区域颜色等等。

还需要设置悬浮面板的“面板名”属性,这样才能把悬浮按钮和面板关联起来:


增加好悬浮按钮和悬浮面板后,怎么知道鼠标移动到按钮的时候显示哪个悬浮菜单面板呢?这就需要设置悬浮按钮的属性了:

子菜单类型:设置为“MenuPanel”;

子菜单面板:选择ContactMe(上面增加的悬浮菜单面板的面板名设置为ContactMe,所以这里就可以选择ContactMe了);

子菜单方向:选择Left,因为我们的悬浮按钮在有,所以这里选择Left才能保证显示的时候悬浮面板显示在左侧;


这样我们就设置好了所需要的悬浮按钮,发布看看效果:登录客户端后,在系统首页就会出现一个悬浮按钮,鼠标移动上去后会显示一个弹出层,就是我们设置的弹出层。

小小的功能,就是这么易用,就是这么有用!

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言