一种基于HTML5的图标展示系统

摘要

本发明公布了一种基于HTML5的图标结构、展示方法及系统,所述基于HTML5的图标结构包括：图标容器、图标图片、缩略图、叠加图、图标名称、图标属性、进度栏、通知数量、复选框控件和删除控件。本发明实现了无须下载安装即可运行于支持HTML5的浏览器或应用中，以从服务器返回的简单数据创建图标并进行展示，也可按需求进行排列、分组，并提供一系列的图标管理方法及功能；同时，由于该HTML5的跨平台、跨终端的特性，也使改图标展示方法及系统具备了跨平台、跨终端的特性,并提供了适用于鼠标和键盘配合操作或适用于触摸屏操作的两种用户操作习惯，可在不同的终端机使用最符合用户的操作习惯，大大增强了Web的人机交互、人网交互的用户体现。

权利要求

1.一种基于HTML5的图标展示系统，其特征在于：基于HTML5的图标的结构包括图标容器、图标图片、缩略图、叠加图、图标名称、图标属性、进度栏、通知数量、复选框控件和删除控件；

所述图标的功能方法包括：删除、重命名、显示、隐藏、高亮关键词、设置透明度、通知、警告设置、显示进度、编辑模式和销毁；

所述图标的展示在图标展示版面内，按顺序地排列；

所述图标的排列分成横行排列和纵向排列；

所述图标展示版面用于包含并展示图标，同时向用户提供一系的界面交互操作方法；

基于HTML5的图标展示系统包括服务器、及与所述服务器进行交互的多个客户端，以及与客户端进行图标信息交互的第三方应用；所述的客户端通过从服务器中获取图标数据或从接收来自第三方应用的图标数据，对图标数据进行完善及对象化处理，根据图标数据进行图标图形的创建，对图标进行排序、分组地展示；

基于HTML5的图标展示系统的客户端与第三方应用交接的图标信息修改流程包括：

步骤一：当用户通过鼠标、键盘和触摸屏这些人机交互硬件发出图标信息修改命令后，界面交互模块将自动接收用户对图标进行修改的信息；

步骤二：界面交互模块将接收到的图标修改信息提交到图标展示模块，图标展示模块对已展示的图标进行修改或销毁，其中修改的内容为图标图像、缩略图、名称、属性、状态和进度，同时将图标修改信息提交到数据管理模块；

步骤三：数据管理模块将由界面交互模块提交的图标修改信息通过添加、修改和删除的方式应用到已保存的图标数据中；

步骤四：数据管理模块将图标修改信息通过API接口模块返回到第三方应用中，第三方应用将根据自身的方法进行处理。

2.根据权利要求1所述的一种基于HTML5的图标展示系统,其特征在于：基于HTML5的图标展示系统还包括：通过从服务器中获取图标数据或从接收来自第三方应用的图标数据；

对图标数据进行完善及对象化处理；根据处理后的图标数据进行图标图形的创建；对图标进行排序、分组地展示；

对所述图标进行排序、分组地展示还包括根据设置中的排列方式对图标数据进行重新排列、根据设置中的分组方式对图标数据进行分组、根据图标数据创建图标和通过计算图标位置将创建的图标有序地排列展示到图标展示版面；

对所述图标进行展示还包括根据图标的分组将图标分别放置在不同的区域，此方法尤其适用于基于HTML5的虚拟操作系统的桌面图标，如此将同一组图标放置在同一区域，方便用户对桌面图标进行查找，操作方便；

对所述图标进行展示还包括：通过界面交互模块对展示的图标设置用户操作监控，接收用户对图标进行修改的信息，将修改后的图标信息返回给服务器或第三方应用进行处理及保存；

所述界面交互模块还包括两种操作模式，一种为适用于鼠标和键盘配合的操作模式，另一种为适用于触摸屏的操作模式。

3.根据权利要求1所述的一种基于HTML5的图标展示系统，其特征在于：所述客户端包括：数据管理模块，用于对图标信息进行完善及对象化处理，并存储处理后的图标信息；图标创建模块，用于根据图标信息创建图标图形的HTML元素，设置事件监控及方法；所述图标展示模块，根据数据中心存储的图标信息，调用所述图标创建模块并对图标创建模块进行按指定的排列方式、分组方式，单区域或分区域地展示；所述界面交互模块，用于对展示的图标进行用户操作监控，接收来自用户的修改指令，对所述图标展示模块的图标信息进行修改，并将修改后的图标信息存储在数据中心。

4.根据权利要求3所述的一种基于HTML5的图标展示系统，其特征在于：所述客户端还包括：收发模块，用于向服务发送查询请求，接收服务器返回的所述图标信息并传送给数据中心。

5.根据权利要求3所述的一种基于HTML5的图标展示系统，其特征在于：所述客户端还包括：API接口模块，用于和第三方应用进行交互，接收来自第三应用的查询请求或操作命令，然后将图标信息或进行处理后将处理后结果反馈给第三方应用。

6.根据权利要求3所述的一种基于HTML5的图标展示系统，其特征在于：所述客户端还包括：环境监测模块，用于对平台及终端机进行操作模式的判断，并设置所述界面交互模块所使用的操作模式；

收发模块和API接口模块，能根据需求进行选择性地运行，其能两个模块同时运行，也能只运行其中的一个，但至少运行其中的一个模块才能使所述客户端正常运作；

所述环境监测模块只需在客户端启动时运行，当对环境检测完毕并设置所述界面交互模块所使用的操作模式后自动销毁并释放内存。

7.根据权利要求1所述的一种基于HTML5的图标展示系统，其特征在于：所述界面交互模块所使用的操作模式包括：适用于鼠标和键盘配合的操作模式或适用于触摸屏的操作模式，也可以两种操作模式同时使用。

8.根据权利要求1所述的一种基于HTML5的图标展示系统，其特征在于：所述服务器包括通信接口，用于接收来自客户端图标查询请求或上传的图标信息，并转发给图标数据中心，图标数据中心将图标查询结果或图标信息处理结果返回给通信接口，通信接口再将数据返回给客户端；图标数据中心，由数据库和文件系统组成，用于通过数据库存储图标信息和通过文件系统存储图标信息相对应的实际文件信息，也用于处理来自通信接口的图标信息查询请求、图标数据更新请求，并将处理结果返回给通信接口。

9.根据权利要求1所述的一种基于HTML5的图标展示系统，其特征在于：所述服务器还包括客户端生成模块，用于收到来自终端机上的支持HTML5的浏览器或应用的加载请求时，返回客户端的Javascript代码，使客户端无需下载安装即可运行使用。

说明书

一种基于HTML5的图标展示系统

技术领域

[0001] 本发明涉及一种基于HTML5的图标展示系统，尤其涉及一种应用基于浏览器或其他HTML5环境下的虚拟操作系统或Web应用中的图标展示与操作。

背景技术

[0002] 随着互联网的飞速发展，浏览器不再仅仅用来表示Web内容，, 随着HTML5的技术的问世，Web进入了一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。如今已进入后Web2.0时代，人机交互、人网交互已经成为常态，我们已经不能满足于网页上简单的图片和文字展示，尤其在浏览器上管理云端文件、文件夹、应用等时，我们更希望能像本地操作系统那样直观地展示和操作。因此，为了迎合互联网技术发展的需求，研发一种基于HTML5的图标展示方法及系统，无须下载安装即可运行于支持HTML5的浏览器或应用中，以从服务器返回的简单数据创建图标并进行展示，也可按需求进行排列、分组，并提供一系列的图标管理方法及功能。同时，由于HTML5的跨平台、跨终端的特性，也使改图标展示方法及系统具备了跨平台、跨终端的特性,并提供了适用于鼠标和键盘配合操作或适用于触摸屏操作的两种用户操作习惯，在不同的终端机使用最符合用户操作习惯，大大增强了Web的人机交互、人网交互的用户体现。

发明内容

[0003] 为了迎合互联网技术发展的需求，增强了Web的人机交互、人网交互的用户体现，以及在不同终端或平台下用户操作习惯而提供的一种基于HTML5的跨平台、跨终端的图标结构、展示方法及系统，以计算机图形图标的方式展现云端服务器中的文件、文件夹、应用、快捷方式及超链接等数据，更具备了一系列的图标管理方法及功能，在进行图标数据更新的操作后，将更新后的图标数据返回给服务器处理及保存，同时也具备了适用于鼠标和键盘配合操作或适用于触摸屏操作的两种用户操作习惯。不仅如此，所述的图标展示方法系统还提供API接口，以供第三方应用的调用、操作、或进行数据交互。本发明是通过以下技术方案来实现的：

[0004] 一种基于HTML5的图标展示系统，基于HTML5的图标的结构，包括图标容器、图标图片、缩略图、叠加图、图标名称、图标属性、进度栏、通知数量、复选框控件和删除控件；所述图标的功能方法包括：删除、重命名、显示、隐藏、高亮关键词、设置透明度、通知、警告设置、显示进度、编辑模式、销毁等；所述图标的展示在图标展示版面内，通过计算按顺序地排列；所述图标的排列分成横行排列和纵向排列；所述图标展示版面用于包含并展示图标，同时向用户提供一系的界面交互操作方法。

[0005] 进一步地，基于HTML5的图标展示系统包括服务器、及与所述服务器进行交互的多个客户端，以及与客户端进行图标信息交互的第三方应用；所述的客户端通过从服务器中获取图标数据或从接收来自第三方应用的图标数据，对图标数据进行完善及对象化处理，根据图标数据进行图标图形的创建，对图标进行排序、分组地展示。

[0006] 进一步地，基于HTML5的图标展示系统的客户端与第三方应用交接的图标信息修改流程包括：

[0007] 步骤一：当用户通过鼠标、键盘和触摸屏这些人机交互硬件发出图标信息修改命令后，界面交互模块将自动接收用户对图标进行修改的信息。

[0008] 步骤二：界面交互模块将接收到的图标修改信息提交到图标展示模块，图标展示模块对已展示的图标进行修改或销毁，其中修改的内容为图标图像、缩略图、名称、属性、状态和进度，同时将图标修改信息提交到数据管理模块。

[0009] 步骤三：数据管理模块将由界面交互模块提交的图标修改信息通过添加、修改和删除的方式应用到已保存的图标数据中。

[0010] 步骤四：数据管理模块将图标修改信息通过API接口模块返回到第三方应用中，第三方应用将根据自身的方法进行处理。

[0011] 进一步地，基于HTML5的图标展示系统还包括：通过从服务器中获取图标数据或从接收来自第三方应用的图标数据；对图标数据进行完善及对象化处理；根据图标数据进行图标图形元素的创建；对图标进行排序、分组地展示；对所述图标进行排序、分组地展示还包括根据设置中的排列方式对图标进行重新排列、根据设置中的分组方式对图标进行分组、根据图标数据创建图标和通过计算图标位置将创建的图标有序地排列展示到图标展示版面，对所述图标进行展示还包括根据图标的分组将图标分别放置在不同的区域，此方法尤其适用于基于HTML5的虚拟操作系统的桌面图标，如此将同一组图标放置在同一区域，方便用户对桌面图标进行查找，操作方便； 对所述图标进行展示还包括：通过界面交互模块对展示的图标设置用户操作监控，接收用户对图标进行修改的信息，将修改后的图标信息返回给服务器或第三方应用进行处理及保存；所述界面交互模块还包括两种操作模式，一种为适用于鼠标和键盘配合的操作模式，另一种为适用于触摸屏的操作模式。

[0012] 进一步地，基于HTML5的图标展示系统包括服务器、及与所述服务器进行交互的多个客户端，以及与客户端进行图标信息交互的第三方应用；所述的客户端通过从服务器中获取图标数据或从接收来自第三方应用的图标数据，对图标数据进行完善及对象化处理，根据图标数据进行图标图形元素的创建，对图标进行排序、分组地展示。

[0013] 进一步地，所述客户端包括：数据管理模块，用于对图标信息进行完善及对象化处理，并存储处理后的图标信息；图标创建模块，用于根据图标信息创建图标图形的HTML元素，设置事件监控及方法；所述图标展示模块，根据数据中心存储的图标信息，调用所述图标创建模块并对图标创建模块进行按指定的排列方式、分组方式，单区域或分区域地展示；所述界面交互模块，用于对展示的图标进行用户操作监控，接收来自用户的修改指令，对所述图标展示模块的图标信息进行修改，并将修改后的图标信息存储在数据中心。

[0014] 进一步地，所述客户端还包括：收发模块，用于向服务发送查询请求，接收服务器返回的所述图标信息并传送给数据中心。

[0015] 进一步地，所述客户端还包括：API接口模块，用于和第三方应用进行交互，接收来自第三应用的查询请求或操作命令，然后将图标信息或进行处理后将处理后结果反馈给第三方应用。

[0016] 进一步地，所述客户端还包括：环境监测模块，用于对平台及终端机进行操作模式的判断，并设置所述界面交互模块所使用的操作模式；收发模块和API接口模块，能根据需求进行选择性地运行，其能两个模块同时运行，也能只运行其中的一个，但至少运行其中的一个模块才能使所述客户端正常运作；所述环境监测模块只需在客户端启动时运行，当对环境检测完毕并设置所述界面交互模块所使用的操作模式后自动销毁并释放内存。

[0017] 进一步地，所述界面交互模块所使用的操作模式包括：适用于鼠标和键盘配合的操作模式或适用于触摸屏的操作模式，也可以两种操作模式同时使用。

[0018] 进一步地，所述服务器包括通信接口，用于接收来自客户端图标查询请求或上传的图标信息，并转发给图标数据中心，图标数据中心将图标查询结果或图标信息处理结果返回给通信接口，通信接口再将数据返回给客户端；图标数据中心，由数据库和文件系统组成，用于通过数据库存储图标信息和通过文件系统存储图标信息相对应的实际文件信息，也用于处理来自通信接口的图标信息查询请求、图标数据更新请求，并将处理结果返回给通信接口。

[0019] 进一步地，所述服务器还包括客户端生成模块，用于收到来自终端机上的支持HTML5的浏览器或应用的加载请求时，返回客户端的Javascript代码，使客户端无需下载安装即可运行使用。

[0020] 本发明的一种基于HTML5的图标展示系统，基于HTML5的图标的结构包括以下元素：图标容器、图标图片、缩略图、叠加图、图标名称、图标属性、进度栏、通知数量、复选框控件、删除控件。本发明实现了无须下载安装即可运行于支持HTML5的浏览器或应用中，以从服务器返回的简单数据创建图标并进行展示，也可按需求进行排列、分组，并提供一系列的图标管理方法及功能；同时，由于该HTML5的跨平台、跨终端的特性，也使改图标展示方法及系统具备了跨平台、跨终端的特性,并提供了适用于鼠标和键盘配合操作或适用于触摸屏操作的两种用户操作习惯，可在不同的终端机使用最符合用户操作习惯，大大增强了Web的人机交互、人网交互的用户体现。

附图说明

[0021] 为了易于说明，本发明由下述的较佳实施例及附图作以详细描述。

[0022] 图1为本发明一种基于HTML5的图标展示系统中基于HTML5的图标的结构示意图。

[0023] 图2为本发明一种基于HTML5的图标展示系统的图标排列方式示意图。

[0024] 图3为本发明一种基于HTML5的图标展示系统的图标的批量选择示意图。

[0025] 图4为本发明一种基于HTML5的图标展示系统的客户端结构示意图。

[0026] 图5为本发明一种基于HTML5的图标展示系统的服务端结构示意图。

[0027] 图6为本发明一种基于HTML5的图标展示系统的图标展示流程图。

[0028] 图7为本发明一种基于HTML5的图标展示系统的客户端与服务器交接的图标信息修改流程图。

[0029] 图8为本发明一种基于HTML5的图标展示系统的客户端与第三方应用交接的图标信息修改流程图。

具体实施方式

[0030] 本实施例中，参照图1所示，一种基于HTML5的图标展示系统中基于HTML5的图标的结构包括图标容器、图标图片、缩略图、叠加图、图标名称、图标属性、进度栏、通知数量、复选框控件、删除控件。

[0031] 所述图标容器由一个DIV元素组成，用于包含图标的其他元素。

[0032] 所述图标图片由一个IMG元素组成，用于显示所述图标类型的默认图片。

[0033] 所述缩略图由一个IMG元素组成，用于显示所述图标的缩略图。当图标存在缩略图时，将在图标图片的位置上按比例展示，并且隐藏默认的图标图片。

[0034] 所述叠加图由一个IMG元素组成，以叠加的方式展示在图标图片或缩略图上方，其大小与位置与所述图标图片一致，所显示的图片必须使用背景透明的32位PNG格式的图片。用于标识所述图标类别或特性，如将所述图标标识为快捷方式、标识为共享状态等。

[0035] 所述图标名称由一个SPAN元素组成，用于展示所示图标的名称。当所述元素进入到编辑模式时，则以一个TEXTAREA元素替换。

[0036] 所述图标属性由一个或多个SPAN元素组成，用于展示所述图标的属性。每个SPAN元素负责展示所述图标的一项属性。默认情况下被隐藏。

[0037] 所述进度栏由两个SPAN元素组成，用于展示所述图标的进度状态，如文件的上传、下载进度。默认情况下被隐藏。

[0038] 所述通知数量由一个SPAN元素组成，用于展示所述图标的通知状态及收到的通知数量。默认情况下被隐藏。

[0039] 所述选项框控件可由一个CHECKBOX类型的INPUT元素或以一个SPAN元素模拟组成，用于展示所述图标的选中状态，以及为用户提供交互操作的触点，反复点击表示选中、取消。默认情况下被隐藏。

[0040] 所述删除控件由一个SPAN元素组成，用于为用户提供交互操作的触点，点击后表示删除所述图标。默认情况下被隐藏。

[0041] 可根据用户需求，通过设置CSS样式所述控件的样式、大小、位置作出适当的更改。

[0042] 一个功能完整的图标是一个小型应用，除了具备以上视图结构以外，自身还具备了以下功能方法：

[0043] 删除（命令：Delete），用于删除该图标代表对象，如：文件、文件夹、应用、快捷方式等。

[0044] 重命名（命令：Rename），用于修改图标的名称和路径。

[0045] 显示（命令：Show），用于使图标在计算机图形界面中隐藏状态下显示。

[0046] 隐藏（命令：Hide），用于使图标在计算机图形界面中隐藏。

[0047] 高亮关键词（命令：Highlight），用于使图标名称中某些关键词高亮显示，适用于搜索情况下。

[0048] 设置透明度（命令：SetOpacity），用于设置所述图标结构中的图标图片、图标缩略图，图标叠加图的透明度。

[0049] 通知（命令：Notice），用于设置所述图标结构中的通知数量，通过显示、隐藏和数字显示的方式实现。

[0050] 警告设置（命令：Warn），用于使图标提示警告或错误信息。

[0051] 显示进度（命令：SetProgress），用于使图标利用所述图标结构中的进度栏显示0%-100%的进度状态。

[0052] 编辑模式（命令：EditMode），用于使图标进入/取消编辑模式，进入编辑模式后，所述图标结构中的复选框控件和删除控件将显示，适用于触摸屏操作的情况下使用。

[0053] 销毁（命令：Destroy），用于销毁图标结构和图标方法，并释放内存（注：此方法不会对该图标代表对象数据造成影响）。

[0054] 参照图2所示，为本发明一种基于HTML5的图标展示系统中所述图标排列根据计算图标展示版面的宽度、高度、内边距，和图标的宽度、高度、间距进行定位排列。

[0055] 所述图标排列时的定位以绝对定位（position:absolute）的方式进行；以X表示图标左侧与图标展示版面左侧的距离；以Y表示图标顶部与图标展示版面顶部的距离。

[0056] 所述图标定位所需的X、Y值由以下公式计算所得：

[0057] 假设W1为图标展示版面的宽度；

[0058] 假设H1为为图标展示版面的高度；

[0059] 假设Pt为图标展示版面的上侧内边距；

[0060] 假设Pr为图标展示版面的右侧内边距；

[0061] 假设Pb为图标展示版面的下侧内边距；

[0062] 假设Pl为图标展示版面的左侧内边距；

[0063] 假设W2为图标宽度；

[0064] 假设H2为图标高度；

[0065] 假设Mx为图标X方向的间隔；

[0066] 假设My为图标Y方向的间隔；

[0067] 假设 N为展示过程中的第N个图标；

[0068] 当横向排列图标时：

[0069] 若Mx值不固定，则使图标在展示区域中X方向均匀排列，此时：

[0070] Mx = ((W1 – Pl – Pr) % W2) / floor((W1 – Pl – Pr) / W2);

[0071] 则：

[0072] X = (N % floor((W1 – Pl – Pr) / W2) – 1) * (W2 + Mx) + Pl;

[0073] Y = floor(N / floor((W1 – Pl – Pr) / W2)) * (H2 + My) + Pt;

[0074] 当纵向排列图标时：

[0075] 若My值不固定，则使图标在展示区域中Y方向均匀排列，此时：

[0076] My = ((H1 – Pt – Pb) % H2) / floor((H1 – Pt – Pb) / H2);

[0077] 则：

[0078] X = floor(N / floor((H1 – Pt – Pb) / H2)) * (W2 + Mx) + Pl;

[0079] Y = (N % floor((H1 – Pt – Pb) / H2) – 1) * (H2 + My) + Pt。

[0080] 参照图3所示，为本发明一种基于HTML5的图标展示系统中所述图标批量的选择包括以下步骤：

[0081] 开始选取，检测并记录初始的X、Y坐标（X为相对图标展示版面左侧边缘的距离；Y为相对图标展示版面上侧边缘的距离），并创建所选区域示意层。

[0082] 所述所选区域示意层由一个位于图标上方的半透明DIV元素或Canvas画布组成，用于以图形方式展示用户所选区域。

[0083] 执行选取，检测新的X、Y坐标并与所述开始选取时记录的X、Y坐标进行比较，两坐标之间的矩形区域为用户所选取的区域。

[0084] 所述实施还包括以下步骤：

[0085] 更改所选区域示意层的大小及位置，使其匹配覆盖在用户所选取的区域上。遍历图标展示版面上的所有图标，逐一对其所在位置进行判定，对在用户所选区域上的图标标记为选中状态，对不在用户所选区域上的图标标记为未选中状态。

[0086] 结束选取，隐藏或销毁选择区域示意层。

[0087] 参照图4所示，为本发明一种基于HTML5的图标展示系统的客户端结构包括的模块：

[0088] 数据管理模块，用于对图标信息进行完善及对象化处理，并存储处理后的图标信息。

[0089] 图标创建模块，用于根据图标信息创建图标图形的HTML元素，设置事件监控及方法。

[0090] 所述图标展示模块，根据数据中心存储的图标信息，调用所述图标创建模块并对图标创建模块进行按指定的排列方式、分组方式，单区域或分区域地展示。

[0091] 所述界面交互模块，用于对展示的图标进行用户操作监控，接收来自用户的修改指令，对所述图标展示模块的图标信息进行修改，并将修改后的图标信息存储在数据中心。此外，界面交互模块为用户提供了两种操作模式，适用于鼠标和键盘配合的操作模式和适用于触摸屏的操作模式。

[0092] 所述收发模块，用于向服务发送查询请求，接收服务器返回的所述图标信息并传送给数据中心。

[0093] 所述API接口模块，用于和第三方应用进行交互，接收来自第三应用的图标展示请求、查询请求或操作命令，然后将图标信息或进行处理后将处理后结果反馈给第三方应用。

[0094] 所述环境监测模块，用于对平台及终端机进行操作模式的判断，并设置所述界面交互模块所使用的操作模式。当对环境检测完毕并设置所述界面交互模块所使用的操作模式后自动销毁并释放内存。

[0095] 参照图5所示，为本发明一种基于HTML5的图标展示系统的服务端结构包括的模块：

[0096] 通信接口，用于接收来自客户端图标查询请求或上传的图标信息，并转发给图标数据中心，图标数据中心将图标查询结果或图标信息处理结果返回给通信接口，通信接口再将数据返回给客户端。

[0097] 图标数据中心，由数据库和文件系统组成，用于通过数据库存储图标信息和通过文件系统存储图标信息相对应的实际文件信息。也用于处理来自通信接口的图标信息查询请求、图标数据更新请求，并将处理结果返回给通信接口。

[0098] 客户端生成模块，用于收到来自终端机上的支持HTML5的浏览器或应用的加载请求时，返回客户端的Javascript代码。使客户端无需下载安装即可运行使用。

[0099] 参照图6所示，为本发明一种基于HTML5的图标展示系统的图标展示流程进行步骤：

[0100] 步骤一：加载客户端程序代码，可通过以下两种方式加载：

[0101] 1、直接将代码嵌入在HTML文档中，或通过标签进行加载，这种加载方式，运行于页面解析时。

[0102] 2、在页面解析完毕后，可以利用Javascript通过AJAX（也可以通过JSONP或WebSocket）进行加载，加载后，执行evel函数使客户端代码运行。

[0103] 步骤二：获取图标数据，可通过以下两种方式获得：

[0104] 1、以主动的方式通过收发模块向服务器发出获取图标数据的请求并接收服务器返回的图标数据。

[0105] 2、以被动的方式接收第三方应用通过API接口发送的图标数据。

[0106] 获取数据后，通过数据管理模块，对图标数据进行完善及对象化处理，并保存图标数据。

[0107] 与图标数据一起保存的信息还有：图标数据获取方式、以及其对应的服务器或第三方应用。用于当图标信息被用户修改时，能正确地返回数据。

[0108] 步骤三：根据数据管理模块通过图标展示模块进行图标展示，此步骤又分成以下几个步骤进行：

[0109] 1、调用图标创建模块根据图标数据进行图标创建，包括图标视图在HTML文档中的元素、元素的事件设置，和图标自身的方法设置。

[0110] 2、根据设置中的排列方式对图标进行重新排列。排列包括通过对比与图标对应对象的名称、大小、类型、修改日期等各种图标对象属性以升序或降序的方式进行。

[0111] 3、根据设置中的分组方式对图标进行分组，分组方式包括：与图标对应对象的名称、大小、类型、修改日期等各种图标对象属性。

[0112] 4、创建图标展示版面，若设置中需要分区域展示时，根据每一个分组创建与之对应的图标展示版面。

[0113] 5、以上述图2所示的方式进行图标排列展示。

[0114] 步骤四：图标展示模块调用界面交互模块进行界面交互监控设置，对HTML文档中的图标元素及图标展示版面元素设置相关事件，使其可以接受来自用户的操作。根据由环境监测模块或操作模式设置，可以设置成以下两种模式的监控：

[0115] 1、为适用于鼠标和键盘配合的操作模式；

[0116] 2、为适用于触摸屏的操作模式。

[0117] 结束。

[0118] 参照图7所示，为本发明一种基于HTML5的图标展示系统的客户端与服务器交接的图标信息修改流程图的进行步骤：

[0119] 步骤一：当用户通过鼠标、键盘、触摸屏等人机交互硬件发出图标信息修改命令后，界面交互模块将自动接收用户对图标进行修改的信息。

[0120] 步骤二：界面交互模块将接收到的图标修改信息提交到图标展示模块，图标展示模块对已展示的图标进行修改或销毁，其中修改的内容为如图标图像、缩略图、名称、属性、状态，进度等。同时将图标修改信息提交到数据管理模块。

[0121] 步骤三：数据管理模块将由图标展示模块提交的图标修改信息通过添加、修改、删除等方式应用到已保存的图标数据中。

[0122] 步骤四：数据管理模块将图标修改信息通过收发模块发送到服务器，服务器通过通信接口将接收到的图标修改信息提交到数据中心处理，数据中心通过添加、修改、删除等方式将图标修改信息应用到数据库及文件系统中。

[0123] 结束。

[0124] 参照图8所示，为本发明一种基于HTML5的图标展示系统的客户端与第三方应用交接的图标信息修改流程图的进行步骤：

[0125] 步骤一：当用户通过鼠标、键盘、触摸屏等人机交互硬件发出图标信息修改命令后，界面交互模块将自动接收用户对图标进行修改的信息。

[0126] 步骤二：界面交互模块将接收到的图标修改信息提交到图标展示模块，图标展示模块对已展示的图标进行修改或销毁，其中修改的内容为如图标图像、缩略图、名称、属性、状态，进度等。同时将图标修改信息提交到数据管理模块。

[0127] 步骤三：数据管理模块将由界面交互模块提交的图标修改信息通过添加、修改、删除等方式应用到已保存的图标数据中。

[0128] 步骤四：数据管理模块将图标修改信息通过API接口模块返回到第三方应用中，第三方应用将根据自身的方法进行处理。

[0129] 结束。

[0130] 本发明的一种基于HTML5的图标展示系统, 基于HTML5的图标的结构包括以下元素：图标容器、图标图片、缩略图、叠加图、图标名称、图标属性、进度栏、通知数量、复选框控件、删除控件。本发明实现了无须下载安装即可运行于支持HTML5的浏览器或应用中，以从服务器返回的简单数据创建图标并进行展示，也可按需求进行排列、分组，并提供一系列的图标管理方法及功能；同时，由于该HTML5的跨平台、跨终端的特性，也使改图标展示方法及系统具备了跨平台、跨终端的特性,并提供了适用于鼠标和键盘配合操作或适用于触摸屏操作的两种用户操作习惯，可在不同的终端机使用最符合用户操作习惯，大大增强了Web的人机交互、人网交互的用户体现。

[0131] 上述实施例，只是本发明的一个实例，并不是用来限制本发明的实施与权利范围，凡与本发明权利要求所述内容相同或等同的技术方案，均应包括在本发明保护范围内。