CN115857779A - 一种拖拉式管理页面按钮和消息的组件系统 - Google Patents

一种拖拉式管理页面按钮和消息的组件系统 Download PDF

Info

Publication number
CN115857779A
CN115857779A CN202211682538.6A CN202211682538A CN115857779A CN 115857779 A CN115857779 A CN 115857779A CN 202211682538 A CN202211682538 A CN 202211682538A CN 115857779 A CN115857779 A CN 115857779A
Authority
CN
China
Prior art keywords
component
mouse
module
button
buttons
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211682538.6A
Other languages
English (en)
Inventor
翟曙春
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing New Technology Co ltd
Original Assignee
Beijing New Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing New Technology Co ltd filed Critical Beijing New Technology Co ltd
Priority to CN202211682538.6A priority Critical patent/CN115857779A/zh
Publication of CN115857779A publication Critical patent/CN115857779A/zh
Pending legal-status Critical Current

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种拖拉式管理页面按钮和消息的组件系统,Web软件页面打开时弹出中心图像并监听鼠标按下(左右键)、抬起(左右键)事件,当鼠标在中心图像上按下时,按钮集合跟随鼠标移动,抬起时静止;监听鼠标在中心图像上的悬浮和双击事件,当鼠标悬浮到按钮集合时按钮向周围分散展开,鼠标移开时集中收起,鼠标双击时按钮散开,再次双击时收起;监听系统提示信息及鼠标在中心图像上悬浮事件,监听到系统发出提示信息时将信息展示在中心图像上方,鼠标悬浮到中心图像上时提醒信息消失。本组件方便用户对按钮位置进行设定,管理按钮的展示与隐藏形态,管理消息提醒的位置和显示、隐藏形态,提高页面利用率和智能化效果。

Description

一种拖拉式管理页面按钮和消息的组件系统
技术领域
本发明涉及计算机领域,尤其涉及一种拖拉式管理页面按钮和消息的组件系统。
背景技术
在Web软件项目中,按钮是必不可少的控件。现有的Web软件中按钮都是处于固定位置,如图1所示。用户无法根据自己的喜好进行按钮位置的调整,也无法根据自己的性格习惯便捷地操作按钮。同时,按钮的展现形式单调,不具有科技感,按钮无法根据用户习惯进行展现、隐藏,并且一直占用页面的一部分空间无法释放。
在Web软件项目中,用户与系统进行交互,系统经常需要发出一些消息提醒用户操作,例如“用户名或密码错误”等,此类消息提醒一般分为固定区域提醒和页面上层提醒,固定区域提醒占用页面空间,页面上层提醒友好程度较低,有时会阻挡页面下方的信息或按钮,这会导致被遮挡的按钮功能无法使用,同样依据现有技术很难实现提示信息与移动组件两者之间建立绑定关系。
IOS、安卓、鸿蒙操作系统的悬浮球(或悬浮窗)对按钮进行了集中,但悬浮球主要集中了系统功能,并且悬浮球打开时,每个页面上的悬浮球的内容不变。下面以手机操作系统的微信视频通话为例介绍悬浮球的工作原理。在视频通话时,打开其他应用或点击Home键退出时或点击缩放图标,悬浮窗会显示在其他应用之上,给人的假象是通话页面变小了,点击悬浮窗回到通话页面,悬浮窗消失。退出通话页面悬浮窗消失。悬浮球采用的技术实现方案是:
(1)悬浮窗显示在其他应用或launchers之上,悬浮窗的显示需要悬浮窗权限,而悬浮窗权限属于特殊权限,所以只能通过引导用户去打开,无法像危险权限那样直接申请。可以做到后台显示则说明悬浮窗是一个服务。
(2)通话页面隐藏时悬浮窗显示,通话页面显示时悬浮窗隐藏,可以看出悬浮窗和安卓的Activity组件的生命周期相关联,所以悬浮窗的服务和通话页面的Activity是通过bind去绑定的。
3.既然服务和Activity组件是通过bind去绑定的,说明当悬浮窗显示的时候,通话Activity组件虽然不可见但仍在运行。
在现有技术中已有悬浮球操作的实现方案中,应用于移动端的技术较为成熟。在移动终端上,悬浮球操作可以在屏幕上单独形成一个操作菜单系列,以便把一些快捷的操作功能设置在其中。但悬浮球技术方案是针对于整个操作系统统一配置一套快捷图标,而不是针对于单页功能页面去逐个配置个性化功能菜单按钮。
发明内容
本发明提供基于Web应用技术实现Web按钮、消息提醒管理,按钮可拖动可收缩,不固定在Web应用的某一处,操作便捷,交互友好性高,消息提醒位置可变,解决了传统消息占用页面空间或遮挡下层信息的问题。
本发明提供的拖拉式管理页面按钮和消息的组件系统,包括:监听模块、组件页面样式模块、组件动态拖动模块、组件按钮展开收缩模块和消息提醒模块,其中,
监听模块,用于监听鼠标点击、悬浮和移动信息、系统提示信息和/或页面提示信息,并将所述信息传递给组件页面样式模块、组件动态拖动模块、组件按钮展开收缩模块和/或消息提醒模块;
组件页面样式模块,用于设置中心图像和按钮的图标、样式、布局、画面效果、坐标相对量以及按钮的功能实现;
组件动态拖动模块,用于接收监听模块传送的鼠标点击和移动信息,在鼠标点击组件后页面移动时组件跟随鼠标进行移动;
组件按钮展开收缩模块,用于接收监听模块发送的鼠标的悬停、离开和双击信息,以显示组件的重叠或展开状态;
消息提醒模块,用于接收系统或应用程序发出的提醒消息和监听模块发送的鼠标悬停或离开信息,以显示和隐藏所述系统提醒消息。
进一步地,所述监听模块,通过HTML、JQuery、CSS实现监听功能。
进一步地,组件页面样式模块包括组件框架单元、颜色效果渲染单元、动作效果单元,其中,
组件框架单元,用于定义每个页面组件的中心图像和按钮,包括中心图像的图标、图标的大小、按钮的名称、按钮的图标、坐标相对量以及按钮的功能实现;
颜色效果渲染单元,用于实现组件图形的大小、颜色样式和布局;
动作效果单元,用于接收所述组件按钮展开收缩模块发送的按钮展开、收起信息,以在按钮展开、收起时播放动画。
进一步地,组件内按钮的数量为0~6个。
进一步地,所述坐标相对量为按钮坐标相对于中心图像的角度和长度。
进一步地,在组件按钮展开收起模块中,当接收到CSS组件发送的鼠标悬浮组件上信息时,呈现组件的展开状态,方法包括:获取中心图像的坐标,根据中心图像的坐标和坐标相对量修改各个按钮的展开坐标,根据坐标显示中心图像和各个按钮。
进一步地,在组件按钮展开收起模块中,当接收到CSS组件发送的鼠标离开组件上信息时,呈现组件的重叠状态,方法包括:将按钮的展开坐标设定为中心图像的坐标,并只显示中心图像。
进一步地,在组件按钮展开收起模块中,如果接收到监听模块发送的鼠标双击事件信息,对按钮的坐标进行修改显示组件的展开或重叠状态。
进一步地,在消息提醒模块中,如果接收到监听模块发送的提示消息和鼠标悬浮事件信息,则将提示消息显示在中心图像上方;如果接收到监听模块发送的鼠标悬浮中心图像事件,则隐藏提醒消息;如果接收到监听模块发送的鼠标移动到中心图像区域并被按下和移动时,提示消息会随中心图像按照鼠标的移动轨迹同步移动。
进一步地,在消息提醒模块中,在需要提示消息时,将所述组件设定为JQueryEasuUI的tooltips载体,从而实现提示信息随所述组件的移动而移动。
本发明的有益效果包括:
(1)实现对页面按钮的自定义,既简化了页面,又提高了用户使用满意度;
(2)管理按钮的展示与隐藏形态,管理消息提醒的位置和显示、隐藏形态,提高页面利用率和智能化效果。
(3)消息显示随着组件的移动而移动,避免了被遮挡的按钮功能无法使用的问题。
附图说明
图1为现有界面按钮示意图;
图2为本发明一个实施例的组件结构示意图;
图3为本发明一个实施例的组件初始状态示意图;
图4为本发明一个实施例的组件展开状态示意图;
图5为本发明一个实施例的系统信息提示示意图;
图6为本发明一个实施例的设置按钮的代码示意图。
具体实施方式
为使本发明实施案例的目的、技术方案和优点更加清楚,下面将结合本发明实施案例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明提供了一种拖拉式管理页面按钮和消息的组件系统,如图2所示,包括监听模块、组件页面样式模块、组件动态拖动模块、组件按钮展开收缩模块、消息提醒模块。
监听模块,用于监听鼠标点击、悬浮和移动信息、系统提示信息以及页面提示信息,鼠标信息包括鼠标的动作和位置信息,并将信息传递给组件页面样式模块、组件动态拖动模块、组件按钮展开收缩模块和/或消息提醒模块。提示信息为系统提示信息或当前页面的应用程序给出的信息,比如用户名、密码不正确。因为每个页面都会定义一个组件,因此可以根据页面信息,来明确当前页面所用的组件。
组件页面样式模块,利用HTML超文本标记语言实现对组件的定义,利用CSS3.0实现组件包括的中心图像和按钮等的图形的轮廓、颜色样式、布局和画面效果。
组件动态拖动模块,可以利用JavaScript定义一个可移动的范围,当收到监听模块发送的鼠标移动的位置,实时设置组件的位置与鼠标的位置相同,当收到鼠标抬起信息时显示组件。如果组件为展开状态,则显示展开状态的组件,如果组件为重叠状态,则显示重叠状态的组件。
组件按钮展开收缩模块,当接收到监听模块发送的鼠标悬停到组件区域内信息时,可以将组件由重叠状态更新为展开状态,当收到鼠标移开组件信息时,将组件由展开状态收缩恢复至重叠状态。这可以利用CSS3.0对组件按钮样式进行变更。
消息提醒模块,利用JqueryEasyUI的tooltips组件实现消息的提醒,将消息提醒内容的坐标设置为组件的中心图像的坐标,消息提醒的位置就会跟着中心图像的位置发生变动;利用JQuery监听鼠标的悬停事件,当鼠标悬停到组件中心图像位置时,操作JqueryEasyUI的tooltips隐藏提示信息。
在监听模块中,可以利用HTML、JQuery、CSS实现对鼠标和系统消息的监听,例如,可以利用HTML中<a>标签的onclick和ondblclick实现对鼠标单击事件和双击事件的监听;利用JQuery技术监听鼠标事件,分别对按下(左键或者右键)、抬起事件进行监听;利用CSS3.0的hover监听鼠标的悬停、离开事件。
组件页面样式模块包括组件框架单元、颜色效果渲染单元和动作效果单元。
其中,组件框架单元,用于设置每个页面组件的中心图像和按钮,包括中心图像的图标、图标的大小、按钮的名称、按钮的图标、坐标相对量以及按钮的功能。开发人员可对组件内的按钮可进行增减,优选的每个组件内按钮的数量为0~6个,如图6所示,一个<a>标签为一个按钮。中心图像即组件收缩后的图像,代表组件。初始化时,中心图像和各按钮的坐标相同,组件收缩时,只显示中心图像,也称为重叠状态(如图3所示),展开时,显示中心图像和各按钮,也称为展开状态(如图4所示)。
按钮的功能可以通过javaScript定义函数来实现,比如图1中的手工勾兑、拖入勾兑等。当组件框架单元接收到监听模块发送的鼠标对按钮单击事件信息时,调用既定好的函数即可实现相应的功能。
相对量可以根据页面的显示比例进行预先设定,以实现美观、小巧、并不影响用户观看页面其他位置的目的。例如,可以设定中心图像的X轴正向为零度,顺时针方向依次展开按钮的位置与中心图像的X轴夹角为:30度、90度、150度、210度、270度、330度,长度为2~4个单位长度等。
上述内容可以利用HTML超文本标记语言实现。
颜色效果渲染单元,用于实现组件图形的大小、颜色样式和布局,可以利用CSS3.0实现。颜色样式包括三部分,第一部分为组件的样式;第二部分为中心图像的样式;第三部分为按钮的样式;按钮的样式提供了四种颜色的定义,可进行增加或删减。
动作效果单元,用于实现按钮的展开、收起动作效果。具体来说,当动作效果单元接收到监听模块发送的鼠标悬浮事件后展示组件打开的动画(即组件由重叠状态变为展开状态);当接收到监听模块传来的页面初始化时展示组件出现的动画效果。动画效果的设置可以利用CSS3.0实现。
组件动态拖动模块,用于接收监听模块传送的鼠标按下、抬起和移动事件,并将组件的显示位置设定为鼠标的位置,以此来实现组件可拖动。优选的,在本模块中,可以定义组件的移动范围,鼠标坐标的值不能超过该设定的范围。本模块可以利用Jquery和JavaScript实现。
组件按钮展开收起模块,用于按钮的展开、收起。具体来说,本模块收到监听模块发送的鼠标悬浮到组件信息,根据中心图像的坐标和坐标相对量修改按钮的展开坐标并显示,以将按钮相对中心图像进行展开(即展开状态);本模块接收到监听模块传送的鼠标移开信息或页面转换信息时,按钮的展开坐标设定为中心图像的坐标,并只显示中心图像,从而实现按钮的收缩,即组件变为初始化状态(即重叠状态);在本模块中,还可以接收监听模块发送的鼠标双击事件信息,对按钮的坐标进行修改实现展开或收缩,即按钮展开时,设置按钮为中心图像坐标,只显示中心图像;按钮收缩时,即按钮坐标和中心图像坐标相同,则根据预先设定的相对量设置按钮坐标并在相应坐标位置显示按钮和中心图像。
在组件按钮展开收起模块中,当接收到CSS组件发送的鼠标悬浮组件上的信息时,呈现组件的展开状态,方法包括:获取中心图像的坐标,根据中心图像的坐标和坐标相对量修改各个按钮的展开坐标,根据坐标显示中心图像和各个按钮。
在组件按钮展开收起模块中,当接收到CSS组件发送的鼠标离开组件上的信息时,呈现组件的重叠状态,方法包括:将按钮的展开坐标设定为中心图像的坐标,并只显示中心图像。
在一个实施例中,可以使用CSS的hover事件监听鼠标的悬浮时间,当鼠标悬浮到组件区域时,触发hover事件,通过对hover事件自定义,修改按钮的坐标并显示,当hover监听到鼠标移开组件时修改按钮的坐标并隐藏。
组件按钮展开收起模块,可以利用Jquery和CSS3.0实现,利用jquery监听鼠标的双击事件,当鼠标对组件进行双击时,自定义双击触发事件,修改按钮的坐标并显示/隐藏。
消息提醒模块,用于接收监听模块发送的系统提示消息和鼠标悬浮事件,然后将系统提示消息显示在中心图像上方(如图5所示);当接收到监听模块发送的鼠标悬浮中心图像事件时,提醒消息隐藏;如果接收到监听模块发送的鼠标移动到中心图像区域并被按下和移动组件时,系统提示消息会随中心图像按照鼠标的移动轨迹同步移动。
在一个实施例中,可以利用JqueryEasyUI的tooltips实现消息提醒,在需要提示消息时,将本组件设定为JQueryEasuUI的tooltips载体,设定消息的显示层级、颜色等样式,由于本组件可以在页面范围内移动,所以提示信息也可以随组件的位置而移动,从而实现消息提醒可移动化。
最后应说明的是,以上实施例仅用以描述本发明的技术方案而不是对本技术方法进行限制,本发明在应用上可以延伸为其他的修改、变化、应用和实施例,并且因此认为所有这样的修改、变化、应用、实施例都在本发明的精神和教导范围内。

Claims (10)

1.一种拖拉式管理页面按钮和消息的组件系统,其特征在于,所述组件系统包括:监听模块、组件页面样式模块、组件动态拖动模块、组件按钮展开收缩模块和消息提醒模块,其中,
监听模块,用于监听鼠标点击、悬浮和移动信息、系统提示信息和/或页面提示信息,并将所述信息传递给组件页面样式模块、组件动态拖动模块、组件按钮展开收缩模块和/或消息提醒模块;
组件页面样式模块,用于设置中心图像和按钮的图标、样式、布局、画面效果、坐标相对量以及按钮的功能实现;
组件动态拖动模块,用于接收监听模块传送的鼠标点击和移动信息,在鼠标点击组件后页面移动时组件跟随鼠标进行移动;
组件按钮展开收缩模块,用于接收监听模块发送的鼠标的悬停、离开和双击信息,以显示组件的重叠或展开状态;
消息提醒模块,用于接收系统或应用程序发出的提醒消息和监听模块发送的鼠标悬停或离开信息,以显示和隐藏所述系统提醒消息。
2.根据权利要求1所述的组件系统,其特征在于,所述监听模块,通过HTML、JQuery、CSS实现监听功能。
3.根据权利要求1所述的组件系统,其特征在于,组件页面样式模块包括组件框架单元、颜色效果渲染单元、动作效果单元,其中,
组件框架单元,用于定义每个页面组件的中心图像和按钮,包括中心图像的图标、图标的大小、按钮的名称、按钮的图标、坐标相对量以及按钮的功能实现;
颜色效果渲染单元,用于实现组件图形的大小、颜色样式和布局;
动作效果单元,用于接收所述组件按钮展开收缩模块发送的按钮展开、收起信息,以在按钮展开、收起时播放动画。
4.根据权利要求1所述的组件系统,其特征在于,组件内按钮的数量为0~6个。
5.根据权利要求1所述的组件系统,其特征在于,所述坐标相对量为按钮坐标相对于中心图像的角度和长度。
6.根据权利要求1所述的组件系统,其特征在于,在组件按钮展开收起模块中,当接收到CSS组件发送的鼠标悬浮组件上的信息时,呈现组件的展开状态,方法包括:获取中心图像的坐标,根据中心图像的坐标和坐标相对量修改各个按钮的展开坐标,根据坐标显示中心图像和各个按钮。
7.根据权利要求1所述的组件系统,其特征在于,在组件按钮展开收起模块中,当接收到CSS组件发送的鼠标离开组件上的信息时,呈现组件的重叠状态,方法包括:将按钮的展开坐标设定为中心图像的坐标,并只显示中心图像。
8.根据权利要求1所述的组件系统,其特征在于,在组件按钮展开收起模块中,如果接收到监听模块发送的鼠标双击事件信息,对按钮的坐标进行修改显示组件的展开或重叠状态。
9.根据权利要求1所述的组件系统,其特征在于,在消息提醒模块中,如果接收到监听模块发送的提示消息和鼠标悬浮事件信息,则将提示消息显示在中心图像上方;如果接收到监听模块发送的鼠标悬浮中心图像事件,则隐藏提醒消息;如果接收到监听模块发送的鼠标移动到中心图像区域并被按下和移动时,提示消息会随中心图像按照鼠标的移动轨迹同步移动。
10.根据权利要求9所述的组件系统,其特征在于,在消息提醒模块中,在需要提示消息时,将所述组件设定为JQueryEasuUI的tooltips载体,从而实现提示信息随所述组件的移动而移动。
CN202211682538.6A 2022-12-27 2022-12-27 一种拖拉式管理页面按钮和消息的组件系统 Pending CN115857779A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211682538.6A CN115857779A (zh) 2022-12-27 2022-12-27 一种拖拉式管理页面按钮和消息的组件系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211682538.6A CN115857779A (zh) 2022-12-27 2022-12-27 一种拖拉式管理页面按钮和消息的组件系统

Publications (1)

Publication Number Publication Date
CN115857779A true CN115857779A (zh) 2023-03-28

Family

ID=85653415

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211682538.6A Pending CN115857779A (zh) 2022-12-27 2022-12-27 一种拖拉式管理页面按钮和消息的组件系统

Country Status (1)

Country Link
CN (1) CN115857779A (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108509133A (zh) * 2017-02-27 2018-09-07 腾讯科技(深圳)有限公司 搜索组件展示方法和装置
CN109144385A (zh) * 2018-07-27 2019-01-04 北京小米移动软件有限公司 悬浮球的移动方法及装置
CN110825277A (zh) * 2018-08-07 2020-02-21 阿里巴巴集团控股有限公司 控制方法、装置及电子设备
CN110837406A (zh) * 2019-11-11 2020-02-25 青岛海信移动通信技术股份有限公司 一种悬浮球视图的显示方法以及终端
CN113805747A (zh) * 2021-08-12 2021-12-17 荣耀终端有限公司 信息提醒方法、电子设备及计算机可读存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108509133A (zh) * 2017-02-27 2018-09-07 腾讯科技(深圳)有限公司 搜索组件展示方法和装置
CN109144385A (zh) * 2018-07-27 2019-01-04 北京小米移动软件有限公司 悬浮球的移动方法及装置
CN110825277A (zh) * 2018-08-07 2020-02-21 阿里巴巴集团控股有限公司 控制方法、装置及电子设备
CN110837406A (zh) * 2019-11-11 2020-02-25 青岛海信移动通信技术股份有限公司 一种悬浮球视图的显示方法以及终端
CN113805747A (zh) * 2021-08-12 2021-12-17 荣耀终端有限公司 信息提醒方法、电子设备及计算机可读存储介质

Similar Documents

Publication Publication Date Title
CN109101157B (zh) 侧边栏图标设置方法、装置、终端及存储介质
US7861180B2 (en) Modeless interaction with GUI widget applications
CN103150095B (zh) 终端和终端操控方法
EP3680764B1 (en) Icon moving method and device
WO2020038169A1 (zh) 图标显示方法、装置、终端及存储介质
JP6273354B2 (ja) 複数のディスプレイ用のユーザインタフェース要素
CN104360798B (zh) 一种桌面布局的方法和终端
TWI522889B (zh) 管理使用者介面中之工作空間
US7536645B2 (en) System and method for customizing layer based themes
CN103729107A (zh) 一种悬浮对象的实现方法与装置
US20130093764A1 (en) Method of animating a rearrangement of ui elements on a display screen of an electronic device
CN108845854B (zh) 用户界面显示方法、装置、终端及存储介质
JP6313395B1 (ja) 描画処理方法、描画処理プログラム及び描画処理装置
CN111443863A (zh) 页面操控方法、装置、存储介质及终端
CN102662664A (zh) 界面动画实现方法及系统
WO2005109176A1 (ja) ウィンドウ表示システム、ウィンドウ表示方法、プログラム開発支援装置及びサーバ装置
CN105867754B (zh) 应用界面处理方法及装置
CN112445564B (zh) 界面显示方法及电子设备、计算机可读存储介质
CN113886110A (zh) 外挂式视频插件窗口嵌入到浏览器的方法
CN111324398A (zh) 最近内容的处理方法、装置、终端及存储介质
CN112445501A (zh) 数据烧录方法及设备、计算机可读存储介质
CN115857779A (zh) 一种拖拉式管理页面按钮和消息的组件系统
CN103164142A (zh) 一种画中画界面下屏幕触点位置的调整方法及电子设备
CN110543370B (zh) 一种重写ue4渲染引擎底层及其通信机制的方法
CN114296623A (zh) 一种显示设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20230328