CN105468344A - 一种浮动层设置方法、装置及电子设备 - Google Patents

Abstract

本申请发明实施例提供一种浮动层设置方法、装置及电子设备，其中方法包括：对浮动层的各结构区域进行信息配置，得到预定接口的输入参数，所述输入参数为浮动层的配置参数；调用预定接口；实现所述预定接口的功能，以对所述配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html元素进行事件注册，对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。本发明实施例提供的浮动层设置方法实现了浮动层内信息的规范设置，解决了解决现有浮动层内信息排布杂乱的问题；同时，可根据不同的浮动层配置参数，使得浮动层可展现不同的UI，定制不同的功能，适应不同应用场景。

Description

一种浮动层设置方法、装置及电子设备

技术领域

本发明涉及数据处理技术领域，更具体地说，涉及一种浮动层设置方法、装置及电子设备。

背景技术

浮动层为网页效果中的一种形式，其表现样式为始终显示在屏幕的特定位置上，不跟随鼠标的滚动而滚动以达到强调其内容或者衔接上下文解释说明的效果。hover浮动层为一种可在鼠标移动到浮动层位置，则显示，鼠标移出浮动层位置，则隐藏的浮动层；即hover浮动层可在mouseover事件触发时显示，在mouseout事件触发时隐藏。

hover是指：一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态，当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数，当鼠标移出这个元素时，会触发指定的第二个函数；而且，会伴随着对鼠标是否仍然处在特定元素中的检测(例如，处在div中的图像)，如果是，则会继续保持“悬停”状态，而不触发移出事件。

本发明的发明人在研究过程中发现：在hover浮动层的展示过程中，hover浮动层经常会出现浮动层内信息排布杂乱的情况，如mouseover事件触发后，hover浮动层常会出现浮动层内信息排布杂乱的情况；因此提供一种浮动层设置方法以解决现有浮动层内信息排布杂乱的问题，成为本领域技术人员亟需解决的问题。

发明内容

有鉴于此，本发明实施例提供一种浮动层设置方法、装置及电子设备，以解决现有技术存在的浮动层内信息排布杂乱的问题。

为实现上述目的，本发明实施例提供如下技术方案：

一种浮动层设置方法，包括：

对浮动层的各结构区域进行信息配置，得到预定接口的输入参数，所述输入参数为浮动层的配置参数；

调用预定接口；

实现所述预定接口的功能，以对所述配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html元素进行事件注册，对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。

本发明实施例还提供一种浮动层设置装置，包括：

配置模块，用于对浮动层的各结构区域进行信息配置，得到预定接口的输入参数，所述输入参数为浮动层的配置参数；

调用模块，用于调用预定接口；

实现模块，用于实现所述预定接口的功能，以对所述配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html元素进行事件注册，对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。

本发明实施例还提供一种电子设备，包括上述所述的浮动层设置装置。

基于上述技术方案，本发明实施例提供的浮动层设置方法，在对浮动层的各结构区域进行信息配置，得到浮动层的配置参数后，可通过重新梳理并设计的预定接口以所述配置参数作为输入参数实现预定接口的功能，从而完成浮动层的设置。本发明实施例提供的浮动层设置方法，将完成浮动层设置所需的解析处理、事件注册和渲染处理过程统一到一个预定接口中，将浮动层的配置参数作为预定接口的输入参数，通过实现预定接口的功能，完成对配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html元素进行事件注册，对进行事件注册后的浮动层进行渲染处理的过程，从而完成浮动层内信息的规范设置；并且本发明实施例可根据不同的浮动层配置参数，定制不同的浮动层结构，完成不同的浮动层的设置，使得浮动层可展现不同的UI，定制不同的功能，适应不同应用场景。本发明实施例提供的浮动层设置方法实现了浮动层内信息的规范设置，解决了解决现有浮动层内信息排布杂乱的问题；同时，可根据不同的浮动层配置参数，使得浮动层可展现不同的UI，定制不同的功能，适应不同应用场景。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本发明实施例提供的浮动层设置方法的流程图；

图2为对浮动层的各结构区域进行信息配置的示意图；

图3为本发明实施例提供的预定接口的功能实现流程图；

图4为本发明实施例提供的浮动层展示示意图；

图5为本发明实施例提供的浮动层设置方法的另一流程图；

图6为本发明实施例提供的浮动层设置装置的结构框图；

图7为本发明实施例提供的实现模块的结构框图；

图8为本发明实施例提供的解析单元的结构框图；

图9为本发明实施例提供的注册单元的结构框图；

图10为本发明实施例提供的电子设备的硬件结构框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1为本发明实施例提供的浮动层设置方法的流程图，该方法可应用于电子设备中，电子设备可以为智能终端设备(如笔记本电脑等)，服务器等，参照图1，该方法可以包括：

步骤S100、对浮动层的各结构区域进行信息配置，得到预定接口的输入参数，所述输入参数为浮动层的配置参数；

步骤S110、调用预定接口；

步骤S120、实现所述预定接口的功能，以对所述配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html(HyperTextMarkuplanguage，超文本标记语言)元素进行事件注册，对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。

可选的，进行渲染处理后的浮动层可以在网页中进行展示。

本发明实施例提供的浮动层设置方法，在对浮动层的各结构区域进行信息配置，得到浮动层的配置参数后，可通过重新梳理并设计的预定接口以所述配置参数作为输入参数实现预定接口的功能，从而完成浮动层的设置。本发明实施例提供的浮动层设置方法，将完成浮动层设置所需的解析处理、事件注册和渲染处理过程统一到一个预定接口中，将浮动层的配置参数作为预定接口的输入参数，通过实现预定接口的功能，完成对配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html元素进行事件注册，对进行事件注册后的浮动层进行渲染处理的过程，从而完成浮动层内信息的规范设置；并且本发明实施例可根据不同的浮动层配置参数，定制不同的浮动层结构，完成不同的浮动层的设置，使得浮动层可展现不同的UI(UserInterface，用户界面)，定制不同的功能，适应不同应用场景。本发明实施例提供的浮动层设置方法实现了浮动层内信息的规范设置，解决了解决现有浮动层内信息排布杂乱的问题；同时，可根据不同的浮动层配置参数，使得浮动层可展现不同的UI，定制不同的功能，适应不同应用场景。

可选的，对浮动层的各结构区域进行信息配置的过程可为，对浮动层的head区域(头部区域)进行信息配置，对body区域(身体区域)进行信息配置，对footer区域(尾部区域)进行信息配置。

可选的，对浮动层的head区域进行信息配置包括在head区域对浮动层所要展示的对象的主题名称进行配置；对body区域进行信息配置包括在body区域对浮动层所要展示对象的具体内容进行配置；对footer区域进行信息配置包括在footer区域对浮动层所要展示对象的业务处理内容进行配置。可选的，本发明实施例还可在ex区域对浮动层类名，偏移量等信息进行配置。对应的，图2示出了一种对衣服进行展示的浮动层的各结构区域进行信息配置的示意图，可进行参照。

可选的，对浮动层的各结构区域进行信息配置的过程在JS中可认为是一个对象，配置得到的浮动层的配置参数传递给预定接口作为输入参数

可选的，本发明实施例可定义预定接口为QS.item.detail接口；为便于描述，图3示出了预定接口的功能实现流程图，参照图3，该流程可以包括：

步骤S200、对浮动层的配置参数进行解析，得到与所述配置参数对应的浮动层html元素；

可选的，具体的解析方式可采用递归解析，本发明实施例可对浮动层的配置参数进行递归解析处理，得到与所述配置参数对应的浮动层html元素。

可选的，本发明实施例可根据浮动层数据和功能模板碎片对浮动层的配置参数进行递归解析处理；其中，浮动层数据定义了具体业务需要的数据，如：浮动层上的图片地址等；功能模板碎片可认为是一个html结构片段，html结构片段中的预置位置的数据为需要用浮动层数据替换的数据，如html结构片段中<％xxxx％>之间的数据为需要用浮动层数据替换的数据；可选的，功能模板碎片在必要时也会对数据做相应的逻辑处理。

步骤S210、对所述浮动层html元素进行事件注册；

可选的，本发明实施例可通过事件代理的方式对浮动层html元素进行事件注册，从而方便事件处理，不用每个按钮点击对象都绑定事件；具体的，本发明实施例可将事件通过event-type(事件类型)属性定义在html元素上，并通过冒泡方式对事件进行捕获，以执行事件对应的命令。

步骤S220、对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。

可选的，图4示出了图2所示配置所对应的浮动层展示示意图，可进行参照。值得注意的是，本发明实施例提供的浮动层设置方法还可应用于其他对象的展示，并不一定限于衣服的展示。

可选的，图5示出了本发明实施例提供的浮动层设置方法的另一流程图，参照图5，该方法可以包括：

步骤S300、对浮动层的head区域进行信息配置，对body区域进行信息配置，对footer区域进行信息配置，和对ex区域进行信息配置，得到预定接口的输入参数，所述输入参数为浮动层的配置参数；

步骤S310、调用预定接口；

步骤S320、通过预定接口，根据浮动层数据和功能模板碎片对浮动层的配置参数进行递归解析处理，得到与所述配置参数对应的浮动层html元素；

步骤S330、通过预定接口，将事件通过event-type属性定义在html元素上，并通过冒泡方式对事件进行捕获，以执行事件对应的命令；

步骤S340、通过预定接口，对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。

本发明实施例提供的浮动层设置方法实现了浮动层内信息的规范设置，解决了解决现有浮动层内信息排布杂乱的问题；同时，可根据不同的浮动层配置参数，使得浮动层可展现不同的UI，定制不同的功能，适应不同应用场景。

下面对本发明实施例提供的浮动层设置装置进行介绍，下文描述的浮动层设置装置与上文描述的浮动层设置方法可相互对应参照。

图6为本发明实施例提供的浮动层设置装置的结构框图，该装置可应用于电子设备，参照图6，该装置可以包括：

配置模块100，用于对浮动层的各结构区域进行信息配置，得到预定接口的输入参数，所述输入参数为浮动层的配置参数；

调用模块200，用于调用预定接口；

实现模块300，用于实现所述预定接口的功能，以对所述配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html元素进行事件注册，对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。

可选的，实现模块300实现浮动层设置的过程主要分三个部分：对浮动层的配置参数进行解析处理(可选为递归解析处理)，得到与所述配置参数对应的浮动层html元素；对浮动层html元素进行事件注册；对进行事件注册后的浮动层进行渲染处理。

可选的，图7示出了本发明实施例提供的实现模块300的一种可选结构框图，参照图7，实现模块300可以包括：

解析单元310，用于对浮动层的配置参数进行递归解析处理，得到与所述配置参数对应的浮动层html元素；

注册单元320，用于通过事件代理的方式对浮动层html元素进行事件注册；

渲染单元330，用于对进行事件注册后的浮动层进行渲染处理。

可选的，图8示出了解析单元310的一种可选结构，参照图8，解析单元310可以包括：

解析执行子单元3101，用于根据浮动层数据和功能模板碎片对浮动层的配置参数进行递归解析处理，其中，所述浮动层数据定义了业务需要的数据，所述功能模板碎片为一个html结构片段，所述html结构片段中的预置位置的数据为需要用浮动层数据替换的数据。

可选的，图9示出了本发明实施例提供的注册单元320的一种可选结构，参照图9，注册单元320可以包括：

注册执行子单元3201，用于将事件通过event-type属性定义在html元素上，并通过冒泡方式对事件进行捕获，以执行事件对应的命令。

本发明实施例提供的浮动层设置装置实现了浮动层内信息的规范设置，解决了解决现有浮动层内信息排布杂乱的问题；同时，可根据不同的浮动层配置参数，使得浮动层可展现不同的UI，定制不同的功能，适应不同应用场景。

本发明实施例还提供一种电子设备，该电子设备可包括上述所述的浮动层设置装置。

下面对本发明实施例提供的电子设备的硬件结构进行介绍，下文涉及浮动层设置方法的部分可与上文对应部分相参照。

图10为本发明实施例提供的电子设备的硬件结构框图，该电子设备可以为智能终端设备(如笔记本电脑等)，服务器等，参照图10，该电子设备可以包括：处理器1，通信接口2，存储器3和通信总线4；

其中处理器1、通信接口2、存储器3通过通信总线4完成相互间的通信；

可选的，通信接口2可以为通信模块的接口，如GSM模块的接口；

处理器1，用于执行程序；

存储器3，用于存放程序；

程序可以包括程序代码，所述程序代码包括计算机操作指令。

处理器1可能是一个中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecificIntegratedCircuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。

存储器3可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。

其中，程序可具体用于：

对浮动层的各结构区域进行信息配置，得到预定接口的输入参数，所述输入参数为浮动层的配置参数；

调用预定接口；

实现所述预定接口的功能，以对所述配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html元素进行事件注册，对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种浮动层设置方法，其特征在于，包括：

对浮动层的各结构区域进行信息配置，得到预定接口的输入参数，所述输入参数为浮动层的配置参数；

调用预定接口；

实现所述预定接口的功能，以对所述配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html元素进行事件注册，对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。

2.根据权利要求1所述的浮动层设置方法，其特征在于，所述对浮动层的各结构区域进行信息配置包括：

对浮动层的head区域进行信息配置，对body区域进行信息配置，和对footer区域进行信息配置。

3.根据权利要求1或2所述的浮动层设置方法，其特征在于，所述对所述配置参数进行解析处理包括：

对浮动层的配置参数进行递归解析处理，得到与所述配置参数对应的浮动层html元素。

4.根据权利要求3所述的浮动层设置方法，其特征在于，所述对浮动层的配置参数进行递归解析处理包括：

根据浮动层数据和功能模板碎片对浮动层的配置参数进行递归解析处理，其中，所述浮动层数据定义了业务需要的数据，所述功能模板碎片为一个html结构片段，所述html结构片段中的预置位置的数据为需要用浮动层数据替换的数据。

5.根据权利要求1或2所述的浮动层设置方法，其特征在于，所述对解析得到的与所述配置参数对应的浮动层html元素进行事件注册包括：

通过事件代理的方式对浮动层html元素进行事件注册。

6.根据权利要求5所述的浮动层设置方法，其特征在于，所述通过事件代理的方式对浮动层html元素进行事件注册包括：

将事件通过event-type属性定义在html元素上，并通过冒泡方式对事件进行捕获，以执行事件对应的命令。

7.一种浮动层设置装置，其特征在于，包括：

配置模块，用于对浮动层的各结构区域进行信息配置，得到预定接口的输入参数，所述输入参数为浮动层的配置参数；

调用模块，用于调用预定接口；

实现模块，用于实现所述预定接口的功能，以对所述配置参数进行解析处理，对解析得到的与所述配置参数对应的浮动层html元素进行事件注册，对进行事件注册后的浮动层进行渲染处理，完成浮动层的设置。

8.根据权利要求7所述的浮动层设置装置，其特征在于，所述实现模块包括：

解析单元，用于对浮动层的配置参数进行递归解析处理，得到与所述配置参数对应的浮动层html元素；

注册单元，用于通过事件代理的方式对浮动层html元素进行事件注册；

渲染单元，用于对进行事件注册后的浮动层进行渲染处理。

9.根据权利要求8所述的浮动层设置装置，其特征在于，所述解析单元包括：

解析执行子单元，用于根据浮动层数据和功能模板碎片对浮动层的配置参数进行递归解析处理，其中，所述浮动层数据定义了业务需要的数据，所述功能模板碎片为一个html结构片段，所述html结构片段中的预置位置的数据为需要用浮动层数据替换的数据；

所述注册单元包括：

注册执行子单元，用于将事件通过event-type属性定义在html元素上，并通过冒泡方式对事件进行捕获，以执行事件对应的命令。

10.一种电子设备，其特征在于，包括权利要求7-9任一项所述的浮动层设置装置。