一种以翻转方式切换网页进阶内容的方法及装置

摘要

本发明公开了一种以翻转方式切换网页进阶内容的方法及装置。其中，该方法包括：接收用户基于登录页面提交的登录请求，登录请求包括用户名和密码；验证登录请求，在登录请求通过验证后，在登录页面的基础上拼接进阶内容页面，进阶内容页面为以翻转方式切换后的html页面；在登录页面的基础上以翻转方式切换进阶内容页面，指示用户根据进阶内容页面选择相应的进阶内容。该方法只需要一个登录界面即可实现用户登录到工作平台，只需要加载登录界面即可，不需要一个页面接另一个页面加载，从而提高了用户访问速度，并能使用户尽快登录工作平台，提高效率。

说明书

技术领域

本发明涉及网页登录技术领域，尤其涉及一种以翻转方式切换网页进阶内 容的方法及装置。

背景技术

随着互联网技术的发展，越来越多的用户使用互联网，人们可以通过网页 浏览器来访问网站，获取自己需要的资讯或者享受网络服务。基于安全性等考 虑，很多网站均需要用户注册用户账号才可以访问该网站中的内容。

传统的网页登陆过程中，用户在首页输入用户名和密码后，这个用户名可 能绑定多个企业账号，该企业账号具体可以为该用户服务的客户对象；此时需 要在用户登录首页之后，再向该用户提供一个绑定企业的网页页面，该网页页 面属于进阶内容，在用户选择进阶内容之后，才会跳转到工作页面。

依靠传统方法登录到工作页面时，需要最少两个网页页面，即一个网站首 页、一个进阶内容的网页。传统的一个页面接另一个页面加载的方式，加载速 度慢，特别是在网速异常时，增加了用户等待时间；同时，传统界面不够友好， 影响用户体验。

发明内容

本发明实施例提供一种以翻转方式切换网页进阶内容的方法及装置，用于 解决现有登录到工作页面加载速度慢的技术问题。

本发明实施例提供的一种以翻转方式切换网页进阶内容的方法，包括以下 步骤：

接收用户基于登录页面提交的登录请求，登录请求包括用户名和密码；

验证登录请求，在登录请求通过验证后，在登录页面的基础上拼接进阶内 容页面，进阶内容页面为以翻转方式切换后的html页面；

在登录页面的基础上以翻转方式切换进阶内容页面，指示用户根据进阶内 容页面选择相应的进阶内容。

在上述技术方案中，在登录页面的基础上拼接进阶内容页面，包括：

判断登录页面是否基于IE内核；

在登录页面不是基于IE内核时，为进阶内容界面中相应的div元素添加翻 转层叠样式表。

在上述技术方案中，为进阶内容界面中相应的div元素添加翻转层叠样式 表，包括：

引入animate动画库文件；

根据animate动画库文件为进阶内容界面中相应的div元素添加翻转动画 样式。

在上述技术方案中，还包括：

在接收到用户基于登录页面提交的登录请求之后，显示遮罩层并等待验证 结果；

在登录请求通过验证后，去除遮罩层。

在上述技术方案中，还包括：

在接收到用户基于进阶内容界面提交的进阶内容选择指令后，根据进阶内 容选择指令跳转至相应的工作页面。

基于同样的发明构思，本发明实施例提供一种以翻转方式切换网页进阶内 容的装置，包括：

第一接收模块，用于接收用户基于登录页面提交的登录请求，登录请求包 括用户名和密码；

拼接模块，用于验证登录请求，在登录请求通过验证后，在登录页面的基 础上拼接进阶内容页面，进阶内容页面为以翻转方式切换后的html页面；

翻转模块，用于在登录页面的基础上以翻转方式切换进阶内容页面，指示 用户根据进阶内容页面选择相应的进阶内容。

在上述技术方案中，拼接模块包括：

判断单元，用于判断登录页面是否基于IE内核；

添加单元，用于在登录页面不是基于IE内核时，为进阶内容界面中相应 的div元素添加翻转层叠样式表。

在上述技术方案中，添加单元包括：

引入子单元，用于引入animate动画库文件；

添加子单元，用于根据animate动画库文件为进阶内容界面中相应的div 元素添加翻转动画样式。

在上述技术方案中，还包括：

遮罩模块，用于在接收到用户基于登录页面提交的登录请求之后，显示遮 罩层并等待验证结果；

去除遮罩模块，用于在登录请求通过验证后，去除遮罩层。

在上述技术方案中，还包括：

第二接收模块，用于在接收到用户基于进阶内容界面提交的进阶内容选择 指令后，根据进阶内容选择指令跳转至相应的工作页面。

本发明实施例提供的一种以翻转方式切换网页进阶内容的方法及装置，在 登录页面的基础上拼接进阶内容页面，在用户通过验证后以翻转的方式切换至 进阶内容界面。该方法只需要一个登录界面即可实现用户登录到工作平台，只 需要加载登录界面即可，不需要一个页面接另一个页面加载，从而提高了用户 访问速度，并能使用户尽快登录工作平台，提高效率。同时采用animate动画 库实现动态翻转，比直接加载第二个网页要快，同时动态提醒用户需要选择进 阶内容，用户界面更加友好。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明 书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可 通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获 得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发 明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例中以翻转方式切换网页进阶内容的方法流程图；

图2为本发明实施例中登录页面示意图；

图3为本发明实施例中进阶内容页面翻转过程中的动画示意图；

图4为本发明实施例中翻转完毕后显示进阶内容的示意图；

图5为本发明实施例中应用遮罩层的方法流程图；

图6为本发明实施例中拼接进阶内容页面的方法流程图；

图7为本发明实施例中添加翻转层叠样式表的方法流程图；

图8为本发明实施例一中以翻转方式切换网页进阶内容的方法流程图；

图9为本发明实施例中以翻转方式切换网页进阶内容装置的第一结构图；

图10为本发明实施例中拼接模块的结构图；

图11为本发明实施例中添加单元的结构图；

图12为本发明实施例中以翻转方式切换网页进阶内容装置的第二结构图；

图13为本发明实施例中以翻转方式切换网页进阶内容装置的第三结构图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的 优选实施例仅用于说明和解释本发明，并不用于限定本发明。

参见图1，本发明实施例提供的一种以翻转方式切换网页进阶内容的方法 流程如下，具体包括步骤101-103：

步骤101：接收用户基于登录页面提交的登录请求，该登录请求包括用户 名和密码。

其中，该登录界面为一网页，用户根据该登录页面即可以输入用户名和密 码。具体的，登录界面的示意图参见图2所示，用户在右侧输入栏中可以相应 的输入账号和密码，执行登录操作。

步骤102：验证登录请求，在登录请求通过验证后，在登录页面的基础上 拼接进阶内容页面，进阶内容页面为以翻转方式切换后的html页面。

本发明实施例中，进阶内容为用户输入用户名和密码后还需要输入或选择 的信息，包含该进阶内容的页面即为上述的进阶内容页面。例如，用户在首页 输入用户名和密码后，这个用户名可能绑定多个企业账号，该企业账号具体可 以为该用户服务的客户对象；此时需要在用户登录首页之后，再向该用户提供 一个绑定企业的网页页面，该网页页面即属于进阶内容。

本发明实施例中，在登录页面的基础上拼接该进阶内容页面。具体的，以 图2中所示的登录界面为例，将该进阶内容拼接至登录页面中输入账号和密码 的区域，则在校验成功后即可以将图2中的该区域(输入账号和密码的区域) 以反转的方式切换为进阶内容页面，类似将一张图片从正面翻转至反面，详见 图3和图4。

优选的，在本发明实施例中，在步骤101之后，以遮罩层的方式显示该登 录页面。在应用中经常会用到遮罩层，比较常见的，比如系统在读取数据时， 等待时间很长的话，防止用户在等待响应的时候，点击别的请求，通常会做一 下限制，这里就用到了遮罩层。具体的，可以应用jQuery中的progressDialog。 参见图5所示，具体包括步骤501-502：

步骤501：在接收到用户基于登录页面提交的登录请求之后，显示遮罩层 并等待验证结果。

步骤502：在登录请求通过验证后，去除遮罩层。

步骤103：在登录页面的基础上以翻转方式切换进阶内容页面，指示用户 根据进阶内容页面选择相应的进阶内容。

具体的，以翻转方式切换进阶内容页面参见图3和图4所示，其中图3为 用户输入正确的账号和密码之后，翻转过程中的动画示意图，图4为翻转完毕， 指示用户选择进阶内容(如图4中的租户：请选择)的示意图。在步骤103之 后，在接收到用户基于进阶内容界面提交的进阶内容选择指令后，根据进阶内 容选择指令跳转至相应的工作页面。

本发明实施例提供的一种以翻转方式切换网页进阶内容的方法，在登录页 面的基础上拼接进阶内容页面，在用户通过验证后以翻转的方式切换至进阶内 容界面。该方法只需要一个登录界面即可实现用户登录到工作平台，只需要加 载登录界面即可，不需要一个页面接另一个页面加载，从而提高了用户访问速 度，并能使用户尽快登录工作平台，提高效率。

优选的，参见图6所示，步骤102中在登录页面的基础上拼接进阶内容页 面，具体包括步骤601-602：

步骤601：判断登录页面是否基于IE内核；

步骤602：在登录页面不是基于IE内核时，为进阶内容界面中相应的div 元素添加翻转层叠样式表。

浏览器最重要或者说核心的部分是“RenderingEngine”，译为“渲染引擎”， 一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语 言下的一个应用HTML、JavaScript)并渲染(显示)网页。所以，通常所谓的 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示 网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也 有不同，因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不 同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。 IE浏览器不同版本所支持的渲染效果不同，低版本的IE浏览器不支持添加翻 转CCS(即层叠样式表，CascadingStyleSheet)。

优选的，参见图7所示，步骤602中为进阶内容界面中相应的div元素添 加翻转层叠样式表，具体包括步骤701-702：

步骤701：引入animate动画库文件；

步骤702：根据animate动画库文件为进阶内容界面中相应的div元素添加 翻转动画样式。

其中，animate.css是一个css3动画库，里面预设了很多种常用的动画，它 是把不同的动画绑定到了不同的类里，用户想要使用哪种动画的时候，只需要 简单的把那个相应的类添加到元素上就可以了。

下面通过一个实施例详细介绍该方法的流程。

实施例一

在实施例一中，引入animate动画库文件实现反转动画效果，具体的参见 图8所示，包括步骤801-808：

步骤801：接收用户基于登录页面提交的登录请求，该登录请求包括用户 名和密码。

步骤802：显示遮罩层并等待验证结果。

步骤803：在登录请求通过验证后，去除遮罩层。

步骤804：同时，在登录请求通过验证后，判断登录页面是否基于IE内核。

其中，进阶内容页面为以翻转方式切换后的html页面。

步骤805：在登录页面不是基于IE内核时，引入animate动画库文件。

步骤806：根据animate动画库文件为进阶内容界面中相应的div元素添加 翻转动画样式。

步骤807：在登录页面的基础上以翻转方式切换进阶内容页面，指示用户 根据进阶内容页面选择相应的进阶内容。

步骤808：在接收到用户基于进阶内容界面提交的进阶内容选择指令后， 根据进阶内容选择指令跳转至相应的工作页面。

实施例一中实现方法的部分代码如下：

本发明实施例提供的一种以翻转方式切换网页进阶内容的方法，在登录页 面的基础上拼接进阶内容页面，在用户通过验证后以翻转的方式切换至进阶内 容界面。该方法只需要一个登录界面即可实现用户登录到工作平台，只需要加 载登录界面即可，不需要一个页面接另一个页面加载，从而提高了用户访问速 度，并能使用户尽快登录工作平台，提高效率。同时采用animate动画库实现 动态翻转，比直接加载第二个网页要快，同时动态提醒用户需要选择进阶内容， 用户界面更加友好。

以上详细介绍了本发明实施例中以翻转方式切换网页进阶内容的方法流 程，该方法也可以通过相应的装置实现，下面详细介绍该装置的结构和功能。

本发明实施例提供的一种以翻转方式切换网页进阶内容的装置，参见图9 所示，包括：

第一接收模块91，用于接收用户基于登录页面提交的登录请求，登录请求 包括用户名和密码；

拼接模块92，用于验证登录请求，在登录请求通过验证后，在登录页面的 基础上拼接进阶内容页面，进阶内容页面为以翻转方式切换后的html页面；

翻转模块93，用于在登录页面的基础上以翻转方式切换进阶内容页面，指 示用户根据进阶内容页面选择相应的进阶内容。

优选的，参见图10所示，拼接模块92包括：

判断单元921，用于判断登录页面是否基于IE内核；

添加单元922，用于在登录页面不是基于IE内核时，为进阶内容界面中相 应的div元素添加翻转层叠样式表。

优选的，参见图11所示，添加单元922包括：

引入子单元9221，用于引入animate动画库文件；

添加子单元9222，用于根据animate动画库文件为进阶内容界面中相应的 div元素添加翻转动画样式。

优选的，参见图12所示，该装置还包括：

遮罩模块94，用于在接收到用户基于登录页面提交的登录请求之后，显示 遮罩层并等待验证结果；

去除遮罩模块95，用于在登录请求通过验证后，去除遮罩层。

优选的，参见图13所示，该装置还包括：

第二接收模块96，用于在接收到用户基于进阶内容界面提交的进阶内容选 择指令后，根据进阶内容选择指令跳转至相应的工作页面。

本发明实施例提供的一种以翻转方式切换网页进阶内容的方法及装置，在 登录页面的基础上拼接进阶内容页面，在用户通过验证后以翻转的方式切换至 进阶内容界面。该方法只需要一个登录界面即可实现用户登录到工作平台，只 需要加载登录界面即可，不需要一个页面接另一个页面加载，从而提高了用户 访问速度，并能使用户尽快登录工作平台，提高效率。同时采用animate动画 库实现动态翻转，比直接加载第二个网页要快，同时动态提醒用户需要选择进 阶内容，用户界面更加友好。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计 算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结 合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包 含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和 光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产 品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和 /或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/ 或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入 式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算 机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一 个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设 备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中 的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个 流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使 得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处 理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个 流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发 明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及 其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。