CN104899044A - 一种移动终端上的流程性操作实现方法及装置 - Google Patents

Abstract

本发明公开了一种移动终端上的流程性操作实现方法及装置，该方法将用户的流程根据流程步骤在页面上设置多个网页容器，每个网页容器对应至少一个流程步骤，接收用户的输入并进行识别，如果用户的输入是第一操作指令则通过修改当前流程步骤及当前流程步骤之后的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中；如果是第二操作指令则通过修改当前流程步骤及当前流程步骤之前的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中。本发明装置包括识别模块和切换模块，本发明的方法和装置，方便用户选择性操作流程，且网页容器都在一个页面上，不会造成数据丢失。

Description

一种移动终端上的流程性操作实现方法及装置

技术领域

本发明属于计算机技术领域，尤其涉及一种移动终端上的流程性操作实现方法及装置。

背景技术

如今，移动互联网急速发展，移动办公也越来越受到用户的青睐。以往在PC端实现的流程性操作也需要移植到移动终端。

现在在移动终端上进行申请、注册等流程性的操作已经非常常见。更为复杂的业务流程也逐渐开始移植，然而目前的移动终端网页切换多以网页之间的切换为主，主要是根据记录之前访问的页面点击页面生成的标签进行切换，在移动终端上使用十分不方便，需要通过指定标签的页面访问记录表来进行页面的跳转，比如淘宝网页版账户申请操作需要多页面处理，在网络条件较差的情况下加载页面消耗时间较长。对网络有一定的要求，在进行数据提交操作时，遇到网络不稳定情况，容易引起提交数据丢失，这也是很多数据交互网站常见的问题。另外现有技术也未涉及流程性操作页面之间的交互，对于存在交互的用户流程性操作还没有好的解决方案。

发明内容

本发明的目的是提供一种移动终端上的流程性操作实现方法及装置，以解决在移动终端上进行流程性操作的技术问题，操作简单。

为了实现上述目的，本发明技术方案如下：

一种移动终端上的流程性操作实现方法，将用户的流程根据流程步骤在页面上设置多个网页容器，每个网页容器对应至少一个流程步骤，所述方法包括：

接收用户的输入并进行识别，如果用户的输入是第一操作指令则通过修改当前流程步骤及当前流程步骤之后的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中；如果是第二操作指令则通过修改当前流程步骤及当前流程步骤之前的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中。

进一步地，所述在页面上设置多个网页容器，默认情况下仅显示首个流程步骤对应的网页容器，隐藏其他网页容器；所述方法还包括步骤：

用户在以切面的形式显示的当前页面中选择所要操作的流程步骤；

根据用户的选择，将用户选择的流程步骤对应的网页容器显示在页面中，隐藏其他流程步骤的网页容器。

本发明的一种实现方式，所述以切面的形式显示在当前页面中，是指相邻的网页容器的切面拼接显示形式为人字形屋顶形状。

本发明的另一种实现方式，所述以切面的形式显示在当前页面中，是指在页面中显示的网页容器的切面拼接为百叶窗形状。

进一步地，所述网页容器设置有对应的网页容器序号，所述的网页容器序号为流程步骤序号，所述网页容器的切面上显示有网页容器序号。

本发明还提出了一种移动终端上的流程性操作实现装置，应用于用户的移动终端，在用户的移动终端上实现用户的流程操作，所述用户的流程包括按照流程步骤在页面上设置的多个网页容器，每个网页容器对应至少一个流程步骤，所述装置包括：

识别模块，用于接收用户的输入并进行识别；

切换模块，用于根据识别模块识别出的操作指令执行切换动作，如果用户的输入是第一操作指令则通过修改当前流程步骤及当前流程步骤之后的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中；如果是第二操作指令则通过修改当前流程步骤及当前流程步骤之前的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中。

进一步地，所述页面上设置的多个网页容器，默认情况下仅显示首个流程步骤对应的网页容器，隐藏其他网页容器；当用户在以切面的形式显示的当前页面中选择所要操作的流程步骤后，所述切换模块根据用户的选择，将用户选择的流程步骤对应的网页容器显示在页面中，隐藏其他流程步骤的网页容器。

本发明提出了一种移动终端上的流程性操作实现方法及装置，通过一个页面来模拟多个页面进行页面之间的切换，可以提高页面之间的切换速率，对网络要求很低。由于是模拟多个页面，其实数据都在一个页面上，所以不会造成数据丢失。通过捕捉用户多点滑动手势来进行页面之间的切换，方便用户操作。同时为用户提供上下流程页面共存情况，方便用户选择性操作。

附图说明

图1为本发明方法流程示意图；

图2为本发明一种切面形状示意图；

图3为本发明另一中切面形状示意图。

具体实施方式

下面结合附图和实施例对本发明技术方案做进一步详细说明，以下实施例不构成对本发明的限定。

电子流程在企业里用的越来越广泛，本实施例将用户的流程根据流程步骤在页面上设置多个网页容器，多个网页容器在一个页面内，每个网页容器对应至少一个流程步骤。为了方便用户选择，对网页容器进行有序编号，一般可把网页容器序号设置成流程步骤序号。

网页容器是由HTML(HyperText Markup Language)标签组成，除文本标签外一般都可以做网页容器，本实施例中网页容器是指能够存放一个流程操作的盒子。比如：在申请流程操作中包括多个类别的信息填写，把多个类别看成多个流程操作，比方说分为个人信息类、保密设置类等，那么网页容器相当于装个人信息类的一个盒子，里面可以包括手机号、姓名等单个流程操作内容。本实施例根据流程步骤具体要实现的内容，编辑网页容器中的标签来表现该流程步骤中需要的用户操作，包括内容填写，文件上传等。

每个网页容器对应有各自的网页容器样式，网页容器样式是指通过css(Cascading Style Sheet)对一个HTML网页容器的形状和位置控制，本实施例中提到的网页容器样式主要是对网页容器形状、位置、以及排列方式的控制。

本实施例默认显示首个流程步骤的网页容器，其他流程步骤网页容器被隐藏在页面中，为方便后续的切换。

如图1所示，本实施例一种移动终端上的流程性操作实现方法，包括步骤：

S1、接收用户的输入并进行识别，如果用户的输入是第一操作指令则进入步骤S2，如果是第二操作指令则进入步骤S3。

本实施例以用户在移动终端触摸屏上的手势作为用户的输入，通过捕捉用户的手势来识别出具体的操作指令。当用户滑动触摸屏时，用JS(javascript)添加HTML(HyperText Markup Language)的touchstart滑动开始事件和touchend滑动结束事件监听获取滑动的起点和终点坐标。通过获取起点的X轴坐标值减去终点的X轴坐标值来判断用户滑动方向，当差值大于0时为向左滑动，当差值小于0时为向右滑动。另外还可以根据起点与终点的连线，及其与X轴的夹角来判断是向上滑动还是向下滑动。从而可以获取到的滑动手势操作包括“不滑动”、“向上”、“向下”、“向左”、“向右”，在本实施例中仅用到“向左”、“向右”滑动。

本实施例中将“向左”的手势看作准备进入下一个流程的第一操作指令，将“向右”的手势看作向前显示前面操作步骤的第二操作指令。

S2、通过修改当前流程步骤及当前流程步骤之后的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中。

当捕捉到用户的手势滑动是向左时，通过JS设置网页容器样式，使页面上只显示本流程步骤网页容器和下一个流程步骤网页容器，如图2所示。具体地，然后通过JS分别给本流程步骤和下一个流程步骤的2个网页容器设置css(Cascading Style Sheet)的“transform”和“border”属性来修改网页容器样式，使其以切面形式显示在当前页面中，两个网页容器的切面拼接显示形式类似人字形屋顶，用户可以通过凸线左侧和右侧来选择进行那个流程步骤。

S3、通过修改当前流程步骤及当前流程步骤之前的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中。

当捕捉到用户的手势滑动是向右时，通过JS来获取当前网页容器序号和控制网页容器的样式，使页面上当前流程和之前操作的流程以切面的形式显示，隐藏其他网页容器，显示形式类似横向百叶窗，如图3所示。并且各切面能够显示用户所填写的内容，同时切面上方显示流程的名称或者序号，用户可通过点击流程步骤名称(序号)进入该流程步骤，进行查看和修改操作。

进一步地，本实施例一种移动终端上的流程性操作实现方法，还包括步骤：

根据用户的选择，将用户选择的流程步骤对应的网页容器显示在页面中，隐藏其他流程步骤的网页容器。

在用户选择一个流程步骤来进行查看或修改操作时，本实施例默认只显示正在操作的流程步骤的网页容器，其他流程步骤网页容器被隐藏在页面中，为方便后续的切换。同时本实施例仅仅举例了两种切面的显示形式，如人字形屋顶拼接，或百叶窗式拼接，但是本发明不限于上述两种形式，例如还有平铺地左右排列方式。

在切换时，本实施例还可以通过JS动画来执行切面显示的过程，以增加用户使用的体验，这里不再赘述。

本发明由于是用网页容器实现多个流程步骤，虽然默认只显示一个网页容器，但是隐藏的网页容器的数据都在一个页面上，所以不会造成数据丢失。当用户完成所有流程步骤操作时，一次提交既可以完成，不需要在之前流程步骤进行数据临时保存。

本实施例还提出了基于上述方法的一种移动终端上的流程性操作实现装置，应用于用户的移动终端，在用户的移动终端上实现用户的流程操作，用户的流程包括按照流程步骤在页面上设置的多个网页容器，每个网页容器对应至少一个流程步骤。本实施例装置包括：

识别模块，用于接收用户的输入并进行识别；

切换模块，用于根据识别模块识别出的操作指令执行切换动作，如果用户的输入是第一操作指令则通过修改当前流程步骤及当前流程步骤之后的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中；如果是第二操作指令则通过修改当前流程步骤及当前流程步骤之前的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中。

在本装置中，页面上设置的多个网页容器，默认情况下仅显示首个流程步骤对应的网页容器，隐藏其他网页容器；当用户在以切面的形式显示的当前页面中选择所要操作的流程步骤后，切换模块根据用户的选择，将用户选择的流程步骤对应的网页容器显示在页面中，隐藏其他流程步骤的网页容器。

以上实施例仅用以说明本发明的技术方案而非对其进行限制，在不背离本发明精神及其实质的情况下，熟悉本领域的技术人员当可根据本发明作出各种相应的改变和变形，但这些相应的改变和变形都应属于本发明所附的权利要求的保护范围。

Claims (10)

1.一种移动终端上的流程性操作实现方法，其特征在于，将用户的流程根据流程步骤在页面上设置多个网页容器，每个网页容器对应至少一个流程步骤，所述方法包括：

接收用户的输入并进行识别，如果用户的输入是第一操作指令则通过修改当前流程步骤及当前流程步骤之后的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中；如果是第二操作指令则通过修改当前流程步骤及当前流程步骤之前的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中。

2.根据权利要求1所述的方法，其特征在于，所述在页面上设置多个网页容器，默认情况下仅显示首个流程步骤对应的网页容器，隐藏其他网页容器；所述方法还包括步骤：

用户在以切面的形式显示的当前页面中选择所要操作的流程步骤；

根据用户的选择，将用户选择的流程步骤对应的网页容器显示在页面中，隐藏其他流程步骤的网页容器。

3.根据权利要求1所述的方法，其特征在于，所述以切面的形式显示在当前页面中，是指相邻的网页容器的切面拼接显示形式为人字形屋顶形状。

4.根据权利要求1所述的方法，其特征在于，所述以切面的形式显示在当前页面中，是指在页面中显示的网页容器的切面拼接为百叶窗形状。

5.根据权利要求3或4所述的方法，其特征在于，所述网页容器设置有对应的网页容器序号，所述的网页容器序号为流程步骤序号，所述网页容器的切面上显示有网页容器序号。

6.一种移动终端上的流程性操作实现装置，应用于用户的移动终端，在用户的移动终端上实现用户的流程操作，其特征在于，所述用户的流程包括按照流程步骤在页面上设置的多个网页容器，每个网页容器对应至少一个流程步骤，所述装置包括：

识别模块，用于接收用户的输入并进行识别；

切换模块，用于根据识别模块识别出的操作指令执行切换动作，如果用户的输入是第一操作指令则通过修改当前流程步骤及当前流程步骤之后的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中；如果是第二操作指令则通过修改当前流程步骤及当前流程步骤之前的流程步骤对应的网页容器的样式，使他们对应的网页容器以切面的形式显示在当前页面中。

7.根据权利要求6所述的装置，其特征在于，所述页面上设置的多个网页容器，默认情况下仅显示首个流程步骤对应的网页容器，隐藏其他网页容器；当用户在以切面的形式显示的当前页面中选择所要操作的流程步骤后，所述切换模块根据用户的选择，将用户选择的流程步骤对应的网页容器显示在页面中，隐藏其他流程步骤的网页容器。

8.根据权利要求6所述的装置，其特征在于，所述以切面的形式显示在当前页面中，是指相邻的网页容器的切面拼接显示形式为人字形屋顶形状。

9.根据权利要求6所述的装置，其特征在于，所述以切面的形式显示在当前页面中，是指在页面中显示的网页容器的切面拼接为百叶窗形状。

10.根据权利要求8或9所述的装置，其特征在于，所述网页容器设置有对应的网页容器序号，所述的网页容器序号为流程步骤序号，所述网页容器的切面上显示有网页容器序号。