经常可以看到网站或者某些Web系统中有“悬浮按钮”的功能,点击后可以弹出悬浮菜单用于显示联系信息等等,比如下图中的“联系我”这个按钮的功能:
在免费开放的E6开发平台中,我们也提供了类似的功能组件,并且使用极其简单,下面我们介绍下怎么实现这样的功能。打开E6开发平台,在需要增加悬浮按钮的页面(我们这里在首页增加),在左侧工具箱中找到“悬浮按钮”控件并在所需要的位置拖拽出来,然后设置其外观属性。
设置悬浮按钮属性:比如设置背景色1,背景色2实现渐变,设置圆角大小,等等。
悬浮按钮本身也是一个容器控件,我们可以在上面放置图片控件,标签控件,形状控件等等,我们这里直接拷贝一个图标放上去(记得设置这个图片控件的“显示标签”属性为False),效果如下图:
悬浮按钮鼠标移动上去以后需要弹出一个悬浮层,显示详细内容。这需要用到“悬浮菜单面板”控件,从左侧工具箱中找到“悬浮菜单面板”控件并在页面空白处拖拽出来,如下图:
悬浮菜单面板同样也是一个容器控件,可以在上面放置其他控件,比如我们这里就放置了一个联系电话和一个图片。你也可以在面板上防止其他元素,设置其背景色,画线,画矩形,圆形,设置某个区域颜色等等。
还需要设置悬浮面板的“面板名”属性,这样才能把悬浮按钮和面板关联起来:
增加好悬浮按钮和悬浮面板后,怎么知道鼠标移动到按钮的时候显示哪个悬浮菜单面板呢?这就需要设置悬浮按钮的属性了:
子菜单类型:设置为“MenuPanel”;
子菜单面板:选择ContactMe(上面增加的悬浮菜单面板的面板名设置为ContactMe,所以这里就可以选择ContactMe了);
子菜单方向:选择Left,因为我们的悬浮按钮在有,所以这里选择Left才能保证显示的时候悬浮面板显示在左侧;
这样我们就设置好了所需要的悬浮按钮,发布看看效果:登录客户端后,在系统首页就会出现一个悬浮按钮,鼠标移动上去后会显示一个弹出层,就是我们设置的弹出层。
小小的功能,就是这么易用,就是这么有用!