基于HTML5的界面交互及展示系统、方法技术方案

本发明专利技术提供了一种基于HTML5的界面交互及展示系统、方法，该系统包括控件初始化模块等，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端。本发明专利技术摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。

Interface interaction and display system and method based on HTML5

The present invention provides an interactive interface and display system and method based on HTML5, the control system includes the initialization module, the control module is responsible for initializing the initialization control, the page div is initialized to a 2 by two-dimensional page 2, and given the entrance by the way of interaction between configuration, user defined page, and generate save the configuration file; the event receiving module for receiving the user's operation, related events are sent to the data processing module; the data processing module is responsible for processing the received event, the corresponding page elements into the two-dimensional layout of div; the cache module is responsible to display page elements and content save on a local client. The invention gets rid of a single operation mode and greatly enhances the user experience of the interface interaction of Web.

【技术实现步骤摘要】
基于HTML5的界面交互及展示系统、方法
本专利技术涉及一种界面交互及展示系统、方法，具体地，涉及一种基于HTML5的界面交互及展示系统、方法。
技术介绍
随着互联网的飞速发展，浏览器不再仅仅用来表示Web内容，随着HTML5的技术问世，Web进入了一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画以及交互都被标准化。HTML5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，HTML5可以做到跨平台，多数核心代码不用重写，在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。对于用户来说，提高了用户体验，加强了视觉感受，HTML5技术在移动端，能够让应用程序回归到网页，并对网页的功能进行扩展，用户不需要下载客户端或插件就能够观看视频、玩游戏，操作更加简单，用户体验更好。如今已进入后Web2.0时代，人机交互已经成为常态，不能满足于网页上简单的图片和文字展示，用户更希望能有更加丰富的界面交互方式。因此，为了迎合互联网技术的发展，本专利技术研发一种基于HTML5的界面交互技术及展示方法，由于HTML5的跨平台、跨终端的特性，也使该界面交互及展示方法具备了跨平台、跨终端的特性，并提供了适用于鼠标操作或适用于触摸屏操作的两种用户操作习惯，摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。
技术实现思路
针对现有技术中的缺陷，本专利技术的目的是提供一种基于HTML5的界面交互及展示系统、方法，其由于HTML5的跨平台、跨终端的特性，也使该界面交互及展示方法具备了跨平台、跨终端的特性，并提供了适用于鼠标操作或适用于触摸屏操作的两种用户操作习惯，摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。根据本专利技术的一个方面，提供一种基于HTML5的界面交互及展示系统，其特征在于，包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。优选地，所述二维页面在一个HTML5内容中做到上下与左右滑动自由切换，用户随意的定义交互方式，摆脱单一的模式。优选地，所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为，事件接收模块会立刻接收到交互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块。优选地，所述数据处理模块会按照顺序给每一个页面都加上自定义的ID号作为页面唯一标识，如果即将展示的内容是缓存模块中不存在的，会通过所述API接口模块向数据库提取相关元素，并且将相关页面元素及内容放入所述缓存模块中。本专利技术还提供一种基于HTML5的界面交互及展示方法，其特征在于，包括以下步骤：步骤一：控件初始化模块初始化二维页面，读取制作内容时用户定义的页面交互配置文件，并且首页内容加载完成；通过API接口模块将首页展示的内容从数据库中提取出来，通过数据处理模块填充进入左上角的页面div中，并且根据载入的配置文件，将与首页相关的其他页面内容填入相应的二维页面div中；步骤二：事件接收模块一直在监听用户行为，当用户通过设备进行操作，事件接收模块接收用户操作事件传递给数据处理模块；步骤三：数据处理模块收到用户操作事件，根据交互方式，向API接口模块申请页面元素，API接口模块根据要求从数据库提取相关页面元素传递给数据处理模块，数据处理模块向二维页面div填充相关页面元素；步骤四：页面元素填充结束后，渲染模块对二维页面进行渲染；步骤五：渲染结束后，展示模块将用户操作之后的页面展现出来。优选地，所述步骤三中，数据处理模块需要通过页面ID向缓存模块获取填充的页面元素及内容是否已经存在，如果存在，则直接从缓存模块中提取，如果不存在，则通过API接口模块通过数据库提取数据。与现有技术相比，本专利技术具有如下的有益效果：由于HTML5的跨平台、跨终端的特性，也使该界面交互及展示方法具备了跨平台、跨终端的特性，并提供了适用于鼠标操作或适用于触摸屏操作的两种用户操作习惯，摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。附图说明通过阅读参照以下附图对非限制性实施例所作的详细描述，本专利技术的其它特征、目的和优点将会变得更明显：图1为本专利技术基于HTML5的界面交互及展示系统的原理框图。具体实施方式下面结合具体实施例对本专利技术进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本专利技术，但不以任何形式限制本专利技术。应当指出的是，对本领域的普通技术人员来说，在不脱离本专利技术构思的前提下，还可以做出若干变形和改进。这些都属于本专利技术的保护范围。如图1所示，本专利技术基于HTML5的界面交互及展示系统包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API(ApplicationProgrammingInterface，应用程序编程接口)接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式(例如：左右或者上下，翻页或者渐隐)，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件(Event)，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。二维页面可以在一个HTML5内容中做到上下与左右滑动自由切换，用户可以随意的定义交互方式，摆脱单一的模式，这样使用方便。所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为(左右或者上下滑动)，事件接收模块会立刻接收到交互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块，这样及时反馈。所述数据处理模块接收到交互事件相关信息之后，会判断交互事件的方向，分为四种情况：一，如果交互是向上滑动(即浏览下面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的左上角div中，并且将展示页面的下一页元素填充在左下角div中，因为右上角与右下角内容与交互内容无关，所以不做任何操作。二，如果交互是向下滑动(即浏览上面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的左下角div中，并且将展示页面的下一页元素填充在左上角di本文档来自技高网...

【技术保护点】
一种基于HTML5的界面交互及展示系统，其特征在于，包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。

【技术特征摘要】
1.一种基于HTML5的界面交互及展示系统，其特征在于，包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。2.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述二维页面在一个HTML5内容中做到上下与左右滑动自由切换，用户随意的定义交互方式，摆脱单一的模式。3.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为，事件接收模块会立刻接收到交互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块。4.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述数...

【专利技术属性】
技术研发人员：覃云川，吴明致，吴畏，黄江，刘天旸，
申请(专利权)人：上海精灵天下数字技术有限公司，
类型：发明
国别省市：上海,31