[发明专利]基于HTML5的界面交互及展示系统、方法

权利要求书

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

所述数据处理模块接收到交互事件相关信息之后，会判断交互事件的方向，分为四种情况：

一，如果交互是向上滑动，会将即将展示的页面元素填充在2乘以2页面div中的左上角div中，并且将展示页面的下一页元素填充在左下角div中，因为右上角与右下角内容与交互内容无关，所以不做任何操作；

二，如果交互是向下滑动，会将即将展示的页面元素填充在2乘以2页面div中的左下角div中，并且将展示页面的下一页元素填充在左上角div中，因为右上角与右下角内容与交互内容无关，所以不做任何操作；

三，如果交互是向左滑动，会将即将展示的页面元素填充在2乘以2页面div中的左上角div中，并且将展示页面的下一页元素填充在右上角div中，因为左下角与右下角内容与交互内容无关，所以不做任何操作；

四，如果交互是向右滑动，会将即将展示的页面元素填充在2乘以2页面div中的右上角div中，并且将展示页面的下一页元素填充在左上角div中，因为左下角与右下角内容与交互内容无关，所以不做任何操作；

数据处理模块会按照顺序给每一个页面都加上自定义的ID号作为页面唯一标识，如果即将展示的内容是缓存模块中不存在的，会通过所述API接口模块向数据库提取相关元素，并且将相关页面元素及内容放入所述缓存模块中，避免重复读取数据库造成资源浪费。

2.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述二维页面在一个HTML5内容中做到上下与左右滑动自由切换，用户随意的定义交互方式，摆脱单一的模式。

3.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为，事件接收模块会立刻接收到交互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块。

4.一种基于HTML5的界面交互及展示方法，其特征在于，运用权利要求1-3任一权利要求所述的基于HTML5的界面交互及展示系统执行如下步骤：

步骤一：控件初始化模块初始化二维页面，读取制作内容时用户定义的页面交互配置文件，并且首页内容加载完成；通过API接口模块将首页展示的内容从数据库中提取出来，通过数据处理模块填充进入左上角的页面div中，并且根据载入的配置文件，将与首页相关的其他页面内容填入相应的二维页面div中；

步骤二：事件接收模块一直在监听用户行为，当用户通过设备进行操作，事件接收模块接收用户操作事件传递给数据处理模块；

步骤三：数据处理模块收到用户操作事件，根据交互方式，向API接口模块申请页面元素，API接口模块根据要求从数据库提取相关页面元素传递给数据处理模块，数据处理模块向二维页面div填充相关页面元素；

步骤四：页面元素填充结束后，渲染模块对二维页面进行渲染；

步骤五：渲染结束后，展示模块将用户操作之后的页面展现出来。

5.根据权利要求4所述的基于HTML5的界面交互及展示方法，其特征在于，所述步骤三中，数据处理模块需要通过页面ID向缓存模块获取填充的页面元素及内容是否已经存在，如果存在，则直接从缓存模块中提取，如果不存在，则通过API接口模块通过数据库提取数据。