《一种页面分割显示方法.pdf》由会员分享，可在线阅读，更多相关《一种页面分割显示方法.pdf（10页珍藏版）》请在专利查询网上搜索。
1、(10)申请公布号 CN 102662958 A(43)申请公布日 2012.09.12CN102662958A*CN102662958A*(21)申请号 201210056361.9(22)申请日 2012.03.06G06F 17/30(2006.01)(71)申请人苏州阔地网络科技有限公司地址 215121 江苏省苏州市苏州工业园区葑亭大道666号唯亭智能产业园8楼(72)发明人胡加明(54) 发明名称一种页面分割显示方法(57) 摘要本发明提供一种页面分割显示方法。上述方法包括以下步骤：用户打开页面，页面加载完成后，调用javascript程序创建遮罩层，所述遮罩层覆盖整个页面，所述j。
2、avascript程序将所述遮罩层的位置信息保存至数组maskArray；所述javascript程序获取所述页面上待显示的功能区块页面元素，并将所述功能区块页面元素的位置信息保存至数组boxes；所述javascript程序根据数组maskArray及数组boxes保存的位置信息依次比较遮罩层与待显示的功能区块页面元素的位置关系，若所述待显示的功能区块页面元素与所述遮罩层存在交叠，则以所述待显示的功能区块页面元素分割所述遮罩层，并将分割后遮罩层的位置信息更新至数组maskArray；所述javascript程序根据更新的所述数组maskArray中的位置信息输出待显示的功能区块页面元素。(5。
3、1)Int.Cl.权利要求书1页 说明书5页 附图3页(19)中华人民共和国国家知识产权局(12)发明专利申请权利要求书 1 页 说明书 5 页 附图 3 页1/1页21.一种页面分割显示方法，其特征在于，包括以下步骤：用户打开页面，页面加载完成后，调用javascript程序创建遮罩层，所述遮罩层覆盖整个页面，所述javascript程序将所述遮罩层的位置信息保存至数组maskArray；所述javascript程序获取所述页面上待显示的功能区块页面元素，并将所述功能区块页面元素的位置信息保存至数组boxes；所述javascript程序根据数组maskArray及数组boxes保存的位置信。
4、息依次比较遮罩层与待显示的功能区块页面元素的位置关系，若所述待显示的功能区块页面元素与所述遮罩层存在交叠，则以所述待显示的功能区块页面元素分割所述遮罩层，并将分割后遮罩层的位置信息更新至数组maskArray；所述javascript程序根据更新的所述数组maskArray中的位置信息输出待显示的功能区块页面元素。2.根据权利要求1所述的页面分割显示方法，其特征在于，初始时创建的遮罩层用元素elm表示，且所述数组maskArray存储所述元素elm的上下左右的位置信息。3.根据权利要求1所述的页面分割显示方法，其特征在于，当所述遮罩层被分割后，所述数组maskArray保存多个页面元素，且每个。
5、页面元素及待显示的功能区块页面元素呈矩形。4.根据权利要求3所述的页面分割显示方法，其特征在于，所述javascript程序依次比较所述数组maskArray中每个页面元素与待显示的功能区块页面元素的位置关系，所述javascript程序分别获取所述数组maskArray中保存的页面元素及待显示的功能区块页面元素的右边线位置信息并进行比较及左边线位置信息并进行比较，比较后获得所述数组maskArray中保存的页面元素及待显示的功能区块页面元素的右边线位置的较小值及左边线位置的较大值，若所述右边线位置的较小值小于或等于所述左边线位置的较大值，则所述页面元素及待显示的功能区块页面元素不交叠。5.根。
6、据权利要求3所述的页面分割显示方法，其特征在于，所述javascript程序依次比较所述数组maskArray中每个页面元素与待显示的功能区块页面元素的位置关系，所述javascript程序分别获取所述数组maskArray中保存的页面元素及待显示的功能区块页面元素的上边线位置信息并进行比较及下边线位置信息并进行比较，比较后获得所述数组maskArray中保存的页面元素及待显示的功能区块页面元素的上边线位置的较小值及下边线位置的较大值，若所述上边线位置的较小值小于或等于下边线位置的较大值，则所述页面元素及待显示的功能区块页面元素不交叠。6.根据权利要求1所述的页面分割显示方法，其特征在于，于待。
7、显示的功能区块页面元素显示后执行前，服务器判断后续操作的功能区块页面元素并显示所述后续操作的功能区块页面元素。7.根据权利要求1所述的页面分割显示方法，其特征在于，于待显示的功能区块页面元素显示且执行后，服务器判断后续操作的功能区块页面元素并显示所述后续操作的功能区块页面元素。8.根据权利要求1所述的页面分割显示方法，其特征在于，于待显示的功能区块页面元素显示后执行时，服务器判断后续操作的功能区块页面元素并显示所述后续操作的功能区块页面元素。权 利 要 求 书CN 102662958 A1/5页3一种页面分割显示方法技术领域0001 本发明属于网页处理领域，尤其涉及一种页面分割显示方法。背景技。
8、术0002 目前，当网站增加新式功能时，如果不给用户必要的提示，用户很容易忽视新式功能的使用或者不知道如何使用新式功能。针对上述问题，于现有技术中，通过单纯地覆盖图片指示进行提示。然而，上述方式虽然可以达到提示目的，但是用户可能会完全忽略而进行其他操作。因此，如果上述新式功能是用户必然需要的流程，则用户可能无法完成某些操作。另外，于现有技术中，还会使用遮罩层完全覆盖网页，将待引导的功能以截图的方式覆盖在遮罩层上。然而，上述方式中，待引导的功能无法直接操作，只起到了提示作用。此外，还会使用遮罩层完全覆盖网页，将待引导的功能以重输出代码的形式覆盖在遮罩层上。然而，上述方式亦存在以下问题。首先，重输。
9、出的代码需要包含原功能区的所有功能，从而造成冗余；其次，输出的结构是独立存在的，需要动态定位，十分不便。发明内容0003 本发明提供一种页面分割显示方法，以解决上述问题。0004 本发明提供一种页面分割显示方法。上述方法包括以下步骤：用户打开页面，页面加载完成后，调用javascript程序创建遮罩层，所述遮罩层覆盖整个页面，所述javascript程序将所述遮罩层的位置信息保存至数组maskArray；所述javascript程序获取所述页面上待显示的功能区块页面元素，并将所述功能区块页面元素的位置信息保存至数组boxes；所述javascript程序根据数组maskArray及数组boxe。
10、s保存的位置信息依次比较遮罩层与待显示的功能区块页面元素的位置关系，若所述待显示的功能区块页面元素与所述遮罩层存在交叠，则以所述待显示的功能区块页面元素分割所述遮罩层，并将分割后遮罩层的位置信息更新至数组maskArray；所述javascript程序根据更新的所述数组maskArray中的位置信息输出待显示的功能区块页面元素。0005 相较于先前技术，根据本发明提供的页面分割显示方法，所述javascript程序根据数组maskArray及数组boxes保存的位置信息依次比较遮罩层与待显示的功能区块页面元素的位置关系，若所述待显示的功能区块页面元素与所述遮罩层存在交叠，则以所述待显示的功能区。
11、块页面元素分割所述遮罩层，并将分割后遮罩层的位置信息更新至数组maskArray，并根据更新的数组maskArray中的位置信息输出待显示的功能区块页面元素。如此，可以将不必要的内容进行遮蔽，仅为用户提供相关功能所需的页面显示，使得用户不会跳过引导操作。同时，将待显示的功能区块页面元素显示后，可保持上述功能区块的可操作性，从而达到理想的引导操作目的，另外，整个流程给予用户明确的操作步骤提示，提高用户体验。附图说明说 明 书CN 102662958 A2/5页40006 此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明。
12、的不当限定。在附图中：0007 图1所示为根据本发明的较佳实施例提供的页面分割显示方法的流程图；0008 图2及图3所示为根据本发明的较佳实施例提供的页面分割示意图。具体实施方式0009 下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。0010 图1所示为根据本发明的较佳实施例提供的页面分割显示方法的流程图。图2及图3所示为根据本发明的较佳实施例提供的页面分割示意图。如图1所示，本发明的较佳实施例提供的页面分割显示方法包括步骤101104。请一并参考图2及图3。0011 于步骤101，用户打开页面，页面加载完成后，调用。
13、javascript程序创建遮罩层，所述遮罩层覆盖整个页面，所述javascript程序将所述遮罩层的位置信息保存至数组maskArray。其中，初始时创建的遮罩层用元素elm表示，且所述数组maskArray存储元素elm的上下左右的位置信息。其中，所述元素elm的上下左右的位置信息例如表示为elm.top、elm.bottom、elm.left、elm.right。0012 于步骤102，所述javascript程序获取所述页面上待显示的功能区块页面元素，并将所述功能区块页面元素的位置信息保存至数组boxes。具体而言，所述javascript程序通过函数getBoundingClient。
14、Rect()获取待显示的功能区块页面元素的位置信息，并将所有待显示的功能区块页面元素的位置信息保存至数组boxes。例如，若有三个待显示的功能区块页面元素ac，则数组boxes中，boxes0可表示功能区块页面元素a的位置信息，boxes1可表示功能区块页面元素b的位置信息，boxes2可表示功能区块页面元素c的位置信息。于实际应用中，也可以遍历所有功能区块页面元素并将所有功能区块页面元素的位置信息均保存至数组boxes，之后，再根据需要从数组boxes选择待显示的功能区块页面元素的位置信息。于本实施例中，页面元素的位置信息在统一的坐标系内确定。所述坐标系例如图3所示的xy直角坐标系。然而，本。
15、发明对此并不限定。于实际应用中，坐标系的选择可根据用户的需要进行确定。0013 于步骤103，所述javascript程序根据数组maskArray及数组boxes保存的位置信息依次比较遮罩层与待显示的功能区块页面元素的位置关系，若所述待显示的功能区块页面元素与所述遮罩层存在交叠，则以所述待显示的功能区块页面元素分割所述遮罩层，并将分割后遮罩层的位置信息更新至数组maskArray。其中，当遮罩层被分割后，所述数组maskArray保存多个页面元素，且每个页面元素及待显示的功能区块页面元素呈矩形。0014 于本实施例中，所述javascript程序首先比较数组maskArray及数组boxes。
16、中第一个待显示功能区块页面元素的位置关系，之后所述javascript程序依次比较所述数组maskArray中每个页面元素与后续待显示的功能区块页面元素的位置关系。0015 具体而言，比较遮罩层及数组boxes中第一个待显示功能区块页面元素的位置关系时，由于数组maskArray中只有一个元素elm，且元素elm在页面上覆盖整个页面结构，因此，遮罩层包含第一个待显示功能区块页面元素，且第一个待显示功能区块页面元素将遮罩层分割成至少两个元素。之后，若有第二个待显示的功能区块页面元素，则所述说 明 书CN 102662958 A3/5页5javascript程序依次比较第二个待显示的功能区块页面元。
17、素与上述分割后的遮罩层的位置关系。0016 具体以显示两个待显示的功能区块页面元素ab为例进行说明，同时请参照图2及图3。如图2所示，若第一个待显示的功能区块页面元素a位于遮罩层(即，元素elm)的中间，则功能区块页面元素a将遮罩层分割成四个部分(例如可用元素elm1、元素elm2、元素elm3及元素elm4表示)。此时，数组maskArray中元素elm的上下左右位置信息会被分割后的四个部分的位置信息取代(例如可表示为elm1.top、elm1.bottom、elm1.left、elm1.right；elm2.top、elm2.bottom、elm2.left、elm2.right；elm3。
18、.top、elm3.bottom、elm3.left、elm3.right；elm4.top、elm4.bottom、elm4.left、elm4.right)。0017 接着，比较功能区块页面元素b及元素elm1elm4的位置关系。如图3所示，功能区块页面元素b将元素elm4又分割成了三部分(例如可用元素elm5、元素elm6及元素elm7表示)。此时，数组maskArray中elm4的位置信息会被分割后的三个部分的位置信息取代(例如可表示为elm5.top、elm5.bottom、elm5.left、elm5.right；elm6.top、elm6.bottom、elm6.left、elm。
19、6.right；elm7.top、elm7.bottom、elm7.left、elm7.right)。其中，图3仅标示部分页面元素的位置信息。0018 于本实施例中，所述数组maskArray中每个页面元素与待显示的功能区块页面元素的位置关系的比较方法为：所述javascript程序分别获取所述数组maskArray中保存的页面元素及待显示的功能区块页面元素的右边线位置信息并进行比较及左边线位置信息并进行比较，比较后获得所述页面元素及待显示的功能区块页面元素的右边线位置的较小值及左边线位置的较大值，若所述右边线位置的较小值小于或等于所述左边线位置的较大值，则所述页面元素及待显示的功能区块页面元。
20、素不交叠。例如由图3可知，所述javascript程序分别获取页面元素elm2的右边线位置信息(即，elm2.right)及待显示的功能区块页面元素b的右边线位置信息(即，b.right)并进行比较得到两者的较小值(即，elm2.right)，同时所述javascript程序获取页面元素elm2的左边线位置信息(即，elm2.left)及功能区块页面元素b的左边线位置信息(即，b.left)并进行比较得到两者的较大值(即，b.left)。如图3所示，页面元素elm2与功能区块页面元素b的右边线位置的较小值(即，elm2.right)小于左边线位置的较大值(即，b.left)。因此，页面元素el。
21、m2与功能区块页面元素b不交叠。同理，页面元素elm3与功能区块页面元素b的右边线位置的较小值(即，b.right)小于左边线位置的较大值(即，elm3.left)，因此，页面元素elm3与功能区块页面元素b不交叠。0019 于本实施例中，所述数组maskArray中每个页面元素与待显示的功能区块页面元素的位置关系的比较方法亦可为：所述javascript程序分别获取所述数组maskArray中保存的页面元素及待显示的功能区块页面元素的上边线位置信息并进行比较及下边线位置信息并进行比较，比较后获得所述页面元素及待显示的功能区块页面元素的上边线位置的较小值及下边线位置的较大值，若所述上边线位置的。
22、较小值小于或等于下边线位置的较大值，则所述页面元素及待显示的功能区块页面元素不交叠。例如由图3所示，所述javascript程序分别获取页面元素elm1的上边线位置信息(即，elm1.top)及待显示的功能区块页面元素b的上边线位置信息(即，b.top)并进行比较得到两者的较小值(即，b.top)，同时所述javascript程序分别获取页面元素elm1的下边线位置信息(即，elm1.说 明 书CN 102662958 A4/5页6bottom)及功能区块页面元素b的下边线位置信息(即，b.bottom)并进行比较得到两者的较大值(即，elm1.bottom)。如图3所示，页面元素elm1与功。
23、能区块页面元素b的上边线位置的较小值(即，b.top)小于下边线位置的较大值(即，elm1.bottom)。因此，页面元素elm1与功能区块页面元素b不交叠。0020 于本实施例中，需注意的是，只要满足上述两种比较条件的任意一种，则可确定页面元素与功能区块页面元素不交叠。0021 于步骤104，根据更新的所述数组maskArray中的位置信息输出待显示的功能区块页面元素。如图3所示，当功能区块页面元素a及b将遮罩层进行分割后，数组maskArray中最后保存的位置信息例如可表示为elm1.top、elm1.bottom、elm1.left、elm1.right；elm2.top、elm2.bo。
24、ttom、elm2.left、elm2.right；elm3.top、elm3.bottom、elm3.left、elm3.right；elm5.top、elm5.bottom、elm5.left、elm5.right；elm6.top、elm6.bottom、elm6.left、elm6.right；elm7.top、elm7.bottom、elm7.left、elm7.right。此时，根据数组maskArray中保存的上述信息可仅显示功能区块页面元素a及b，同时遮蔽不需要的功能区块页面元素。此外，于实际应用中，还可输出提示块用于输出用户提示信息，从而给用户操作指导。0022 此外，于本实。
25、施例中，于待显示的功能区块页面元素显示后执行前，服务器判断后续操作的功能区块页面元素并显示所述后续操作的功能区块页面元素。功能区块页面元素对应的后续操作例如下表所示。0023 当前显示的功能区块页面元素 后续必然操作的功能区块页面元素功能区块页面元素a 功能区块页面元素1功能区块页面元素b 功能区块页面元素2功能区块页面元素c 功能区块页面元素1功能区块页面元素d 功能区块页面元素10024 如上表所示，在功能区块页面元素a显示后执行前，服务器根据上表判断得到功能区块页面元素a的后续操作为功能区块页面元素1，则自动显示功能区块页面元素1。0025 此外，于其他实施例中，于待显示的功能区块页面元。
26、素显示且执行后，服务器判断后续操作的功能区块页面元素并显示所述后续操作的功能区块页面元素。或者，于待显示的功能区块页面元素显示并执行时，服务器判断后续操作的功能区块页面元素并显示所述后续操作的功能区块页面元素。0026 此外，当引导用户完成相关操作之后，清除所有遮罩层，并清空遮罩层数组maskArray。0027 综上所述，根据本发明较佳实施例提供的页面分割显示方法，所述javascript程序根据数组maskArray及数组boxes保存的位置信息依次比较遮罩层与待显示的功能区块页面元素的位置关系，若所述待显示的功能区块页面元素与所述遮罩层存在交叠，则以所述待显示的功能区块页面元素分割所述遮。
27、罩层，并将分割后遮罩层的位置信息更新至数组说 明 书CN 102662958 A5/5页7maskArray，并根据更新的数组maskArray中的位置信息输出待显示的功能区块页面元素。如此，可以将不必要的内容进行遮蔽，仅为用户提供相关功能所需的页面显示，使得用户不会跳过引导操作。同时，将待显示的功能区块页面元素显示后，可保持上述功能区块的可操作性，从而达到理想的引导操作目的，另外，整个流程给予用户明确的操作步骤提示，提高用户体验。0028 以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。说 明 书CN 102662958 A1/3页8图1说 明 书 附 图CN 102662958 A2/3页9图2说 明 书 附 图CN 102662958 A3/3页10图3说 明 书 附 图CN 102662958 A10。