一种web页面模块的显示处理方法、系统、介质及设备

技术领域

本发明涉及web应用开发领域，具体涉及一种web页面模块的显示处理方法、系统、介质及设备。

背景技术

在web应用开发领域，我们经常会遇到这种需求，一个web页面有多个模块和一个包含对应菜单项的菜单列表，在页面滚动到相应模块以后，对应的菜单项高亮，当点击某一个菜单项时，需要将对应模块展示在可视区域，同时菜单项高亮。

目前web页面模块对应菜单高亮的处理主要有以下两种方式：

方案一：利用锚点技术

在菜单项中使用a标签，href＝对应模块的Id，点击a标签首先高亮对应菜单项，然后页面就可以直接滚动到对应模块位置。

方案二：利用Javascript计算滚动页面到对应位置

在菜单项点击的时候，高亮对应菜单项，通过Javascript计算将对应模块滚动到可视区域，需要有一个计算模块位置的过程。

方案一存在的问题是，在点击以后页面Url链接会添加hash值‘#模块Id’，会对页面Url造成污染，如果后续需要对Url进行操作，就会有影响；

方案二存在的问题是，需要有一个计算的过程，不是很简练，实现相对较复杂

此外，这两种方案虽然均能够实现在主动点击菜单项的时候，可以使对应模块展示在页面可视区域，同时高亮对应菜单项，但这种处理一般都会禁止页面滚动交互，用户体验上面很不好。

发明内容

针对上述技术问题，本发明提供一种web页面模块的显示处理方法、系统、介质及设备。

本发明解决上述技术问题的技术方案如下：

根据本发明实施例的第一方面，提供一种web页面模块的显示处理方法，包括：

响应于用户选中web页面中的菜单项，通过所述菜单项的自定义属性确定对应的模块的标签；

通过所述标签确定需要显示的模块，将所述模块滚动到可视区域。

进一步，将所述模块滚动到可视区域，具体包括：

通过scrollIntoView()方法将所述模块滚动到可视区域。

进一步，该方法还包括：

响应于用户选中web页面中的菜单项，高亮所述菜单项。

进一步，该方法还包括：

响应于所述web页面发生滚动，通过Javascript计算所述web页面中所有模块与页面顶部的距离，获取滚动条的滚动距离；

当一个模块与页面顶部的距离与滚动条的滚动距离之差在设定范围内时，高亮此模块对应的菜单项，并清除其它菜单项高亮。

根据本发明实施例的第二方面，提供一种web页面模块的显示处理系统，包括：

标签确认模块，用于响应于用户选中web页面中的菜单项，通过所述菜单项的自定义属性确定对应的模块的标签；

区域滚动模块，用于通过所述标签确定需要显示的模块，将所述模块滚动到可视区域。

进一步，所述区域滚动模块，具体用于：

通过scrollIntoView()方法将所述模块滚动到可视区域。

进一步，所述系统还包括：

菜单项高亮模块，用于响应于用户选中web页面中的菜单项，高亮所述菜单项。

进一步，所述系统还包括：

距离获取模块，用于响应于所述web页面发生滚动，通过Javascript计算所述web页面中所有模块与页面顶部的距离，获取滚动条的滚动距离；

所述菜单项高亮模块，还用于当一个模块与页面顶部的距离与滚动条的滚动距离之差在设定范围内时，高亮此模块对应的菜单项，并清除其它菜单项高亮。

根据本发明实施例的第三方面，提供一种终端设备，包括：

处理器；以及

存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如上所述的方法。

根据本发明实施例的第四方面，提供一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如上所述的方法。

本发明的有益效果是：

可以实现用户在主动点击菜单项的时候，菜单项高亮，将对应模块展示在页面可视区域，不需要计算，也不会给页面Url添加hash值，不会污染页面url，并且，不需要禁止页面滚动，在页面滚动的时候，只要模块出现在页面可视区域，则模块对应的菜单项也会自动高亮，达到点击菜单项和页面滚动时联动的效果。

附图说明

图1为本发明实施例提供的一种web页面模块的显示处理方法的流程图；

图2为本发明实施例提供的另一种web页面模块的显示处理方法的流程图；

图3为本发明实施例提供的另一种web页面模块的显示处理方法的流程图；

图4为一个web页面的具体操作效果示意图；

图5是本发明实施例提供的一种web页面模块的显示处理系统的结构框图；

图6是本发明实施例提供的另一种web页面模块的显示处理系统的结构框图；

图7是本发明实施例提供的另一种web页面模块的显示处理系统的结构框图；

图8是根据本发明一示例性实施例示出的一种计算设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本发明的优选实施方式。虽然附图中显示了本发明的优选实施方式，然而应该理解，可以以各种形式实现本发明而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本发明更加透彻和完整，并且能够将本发明的范围完整地传达给本领域的技术人员。

在本发明使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本发明可能采用术语“第一”、“第二”、“第三”等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本发明范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。

图1为本发明实施例提供的一种web页面模块的显示处理方法的流程图，如图1所示，该方法包括：

110、响应于用户选中web页面中的菜单项，通过所述菜单项的自定义属性确定对应的模块的标签；

具体的，用户在进行后台代码维护时，通过给web页面上的菜单项所对应的模块添加唯一的Id标签，使菜单项与模块一一对应，并给每一个菜单项添加自定义属性，并将每一个属性的值定义为该属性所对应的模块的Id，这样，在用户在web页面上的菜单栏点击菜单项的时候，即可通过被点击的菜单项的自定义属性确定web页面上需要展示的模块Id。

120、通过所述标签确定需要显示的模块，将所述模块滚动到可视区域。

具体的，通过步骤110确定的模块Id即可获取模块，进一步，可通过scrollIntoView()方法将模块滚动到可视区域。

scrollIntoView()方法是一种现有的语法，可实现让当前的元素滚动到浏览器窗口的可视区域内，受Internet Explorer和Firefox等浏览器支持，其语法结构如下：

element.scrollIntoView(topalign)

其中，topalign是一个布尔值并且是可选的，如果将其设置为值“true”，则将元素与滚动区域的顶部对齐，如果为“false”，则将元素与滚动区域的底部对齐。默认情况下，如果未提供任何值，则通过假设topalign值为true，它会自动将元素与滚动区域的顶部对齐。

本发明实施例提供的一种web页面模块的显示处理方法，在点击菜单项显示对应模块的交互时，不需要计算，也不会给页面Url添加hash值，不会污染页面url就可以实现。

可选地，作为本发明的一个实施例中，为了便于用户在点击菜单项的时候，能够更加直观地看到选择结果，如图2所示，该方法包括

210、响应于用户选中web页面中的菜单项，高亮所述菜单项，并通过所述菜单项的自定义属性确定对应的模块的标签；

具体的，用户在进行后台代码维护时，通过给web页面上的菜单项所对应的模块添加唯一的Id标签，使菜单项与模块一一对应，并给每一个菜单项添加自定义属性，并将每一个属性的值定义为该属性所对应的模块的Id，这样，在用户在web页面上的菜单栏点击菜单项的时候，即可通过被点击的菜单项的自定义属性确定web页面上需要展示的模块Id。

并且，在用户点击菜单项的时候，可首先高亮当前用户点击的菜单项，以便用户直管地看到选择结果，改善用户体验。

220、通过所述标签确定需要显示的模块，将所述模块滚动到可视区域。

具体的，通过步骤210确定的模块Id即可获取模块，进一步，可通过scrollIntoView()方法将模块滚动到可视区域。

可选地，作为本发明的一个实施例中，为了实现web页面模块滚动交互时菜单项联动的功能，如图3所示，该方法包括：

310、响应于用户选中web页面中的菜单项，高亮所述菜单项，并通过所述菜单项的自定义属性确定对应的模块的标签；

具体的，用户在进行后台代码维护时，通过给web页面上的菜单项所对应的模块添加唯一的Id标签，使菜单项与模块一一对应，并给每一个菜单项添加自定义属性，并将每一个属性的值定义为该属性所对应的模块的Id，这样，在用户在web页面上的菜单栏点击菜单项的时候，即可通过被点击的菜单项的自定义属性确定web页面上需要展示的模块Id。

320、通过所述标签确定需要显示的模块，将所述模块滚动到可视区域。

具体的，通过步骤310确定的模块Id即可获取模块，进一步，可通过scrollIntoView()方法将模块滚动到可视区域。

330、响应于所述web页面发生滚动，通过Javascript计算所述web页面中所有模块与页面顶部的距离，获取滚动条的滚动距离；

340、当一个模块与页面顶部的距离与滚动条的滚动距离之差在设定范围内时，高亮此模块对应的菜单项，并清除其它菜单项高亮。

本发明实施例提供的一种web页面模块的显示处理方法，不用禁止页面滚动，页面滚动相应模块展示在可视区域，对应菜单项也会自动高亮，从而实现了两种交互形式联动的效果，对于用户的体验能够起到很好的提升作用。

图4为一个web页面的具体操作效果示意图，如图4所示，当用户点击web页面右侧的“产品团队”菜单项时，“产品团队”菜单项会高亮显示，并且左侧的显示区域即会滚动到“产品团队”对应的模块，显示模块的具体内容。

而当用户将左侧的显示区域滚动到“产品团队”模块时，右侧的“产品团队”菜单项也会高亮显示，并清除其他菜单项的高亮显示，实现联动效果。

与前述应用功能实现方法实施例相对应，本发明还提供了一种web页面模块的显示处理系统、终端设备及相应的实施例。

图5是本发明实施例提供的一种web页面模块的显示处理系统的结构框图，如图5所示，该系统包括：

标签确认模块，用于响应于用户选中web页面中的菜单项，通过所述菜单项的自定义属性确定对应的模块的标签；

具体的，给web页面菜单项对应模块添加唯一Id，并给菜单项添加自定义属性，属性的值为每一个对应模块的Id，这样，在用户点击菜单项的时候，即可通过菜单项的自定义属性确定需要展示的模块Id。

区域滚动模块，用于通过所述标签确定需要显示的模块，将所述模块滚动到可视区域。

可选地，在该实施例中，所述区域滚动模块，具体用于：

通过scrollIntoView()方法将所述模块滚动到可视区域。

具体的，通过标签确认模块确定的模块Id即可获取模块，进一步，可通过scrollIntoView()方法将模块滚动到可视区域。

scrollIntoView()方法是一种现有的语法，可实现让当前的元素滚动到浏览器窗口的可视区域内，受Internet Explorer和Firefox等浏览器支持，其语法结构如下：

element.scrollIntoView(topalign)

其中，topalign是一个布尔值并且是可选的，如果将其设置为值“true”，则将元素与滚动区域的顶部对齐，如果为“false”，则将元素与滚动区域的底部对齐。默认情况下，如果未提供任何值，则通过假设topalign值为true，它会自动将元素与滚动区域的顶部对齐。

本发明实施例提供的一种web页面模块的显示处理系统，在点击菜单项显示对应模块的交互时，不需要计算，也不会给页面Url添加hash值，不会污染页面url就可以实现。

可选地，作为本发明的一个实施例中，如图6所示，该系统包括：

菜单项高亮模块，用于响应于用户选中web页面中的菜单项，高亮所述菜单项。

具体的，在用户点击菜单项的时候，可首先高亮当前用户点击的菜单项，以便用户直管地看到选择结果，改善用户体验。

标签确认模块，用于响应于用户选中web页面中的菜单项，通过所述菜单项的自定义属性确定对应的模块的标签；

区域滚动模块，用于通过所述标签确定需要显示的模块，将所述模块滚动到可视区域。

本发明实施例提供的一种web页面模块的显示处理系统，在用户点击菜单项的时候，首先高亮当前菜单项，以便用户直管地看到选择结果。

可选地，作为本发明的一个实施例中，所如图7所示，该系统包括：

菜单项高亮模块，用于响应于用户选中web页面中的菜单项，高亮所述菜单项。

标签确认模块，用于响应于用户选中web页面中的菜单项，通过所述菜单项的自定义属性确定对应的模块的标签；

区域滚动模块，用于通过所述标签确定需要显示的模块，将所述模块滚动到可视区域。

距离获取模块，用于响应于所述web页面发生滚动，通过Javascript计算所述web页面中所有模块与页面顶部的距离，获取滚动条的滚动距离；

所述菜单项高亮模块，还用于当一个模块与页面顶部的距离与滚动条的滚动距离之差在设定范围内时，高亮此模块对应的菜单项，并清除其它菜单项高亮。

本发明实施例提供的一种web页面模块的显示处理系统，不用禁止页面滚动，页面滚动相应模块展示在可视区域，对应菜单项也会自动高亮，从而实现了两种交互形式联动的效果，对于用户的体验能够起到很好的提升作用。

关于上述实施例中的系统，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不再做详细阐述说明。

图8是根据本发明一示例性实施例示出的一种计算设备的结构示意图。

参见图8，计算设备800包括存储器810和处理器820。

处理器820可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器810可以包括各种类型的存储单元，例如系统内存、只读存储器(ROM)，和永久存储装置。其中，ROM可以存储处理器820或者计算机的其他模块需要的静态数据或者指令。永久存储装置可以是可读写的存储装置。永久存储装置可以是即使计算机断电后也不会失去存储的指令和数据的非易失性存储设备。在一些实施方式中，永久性存储装置采用大容量存储装置(例如磁或光盘、闪存)作为永久存储装置。另外一些实施方式中，永久性存储装置可以是可移除的存储设备(例如软盘、光驱)。系统内存可以是可读写存储设备或者易失性可读写存储设备，例如动态随机访问内存。系统内存可以存储一些或者所有处理器在运行时需要的指令和数据。此外，存储器810可以包括任意计算机可读存储媒介的组合，包括各种类型的半导体存储芯片(DRAM，SRAM，SDRAM，闪存，可编程只读存储器)，磁盘和/或光盘也可以采用。在一些实施方式中，存储器810可以包括可读和/或写的可移除的存储设备，例如激光唱片(CD)、只读数字多功能光盘(例如DVD-ROM，双层DVD-ROM)、只读蓝光光盘、超密度光盘、闪存卡(例如SD卡、min SD卡、Micro-SD卡等等)、磁性软盘等等。计算机可读存储媒介不包含载波和通过无线或有线传输的瞬间电子信号。

存储器810上存储有可执行代码，当可执行代码被处理器820处理时，可以使处理器820执行上文述及的方法中的部分或全部。

上文中已经参考附图详细描述了本发明的方案。在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述的部分，可以参见其他实施例的相关描述。本领域技术人员也应该知悉，说明书中所涉及的动作和模块并不一定是本发明所必须的。另外，可以理解，本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减，本发明实施例装置中的模块可以根据实际需要进行合并、划分和删减。

此外，根据本发明的方法还可以实现为一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括用于执行本发明的上述方法中部分或全部步骤的计算机程序代码指令。

或者，本发明还可以实施为一种非暂时性机器可读存储介质(或计算机可读存储介质、或机器可读存储介质)，其上存储有可执行代码(或计算机程序、或计算机指令代码)，当所述可执行代码(或计算机程序、或计算机指令代码)被电子设备(或计算设备、服务器等)的处理器执行时，使所述处理器执行根据本发明的上述方法的各个步骤的部分或全部。

本领域技术人员还将明白的是，结合这里的发明所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。