一種基于html5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的制作方法
【專利摘要】本發(fā)明公布了一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，所述基于HTML5的圖標結(jié)構(gòu)包括：圖標容器、圖標圖片、縮略圖、疊加圖、圖標名稱、圖標屬性、進度欄、通知數(shù)量、復(fù)選框控件和刪除控件。本發(fā)明實現(xiàn)了無須下載安裝即可運行于支持HTML5的瀏覽器或應(yīng)用中，以從服務(wù)器返回的簡單數(shù)據(jù)創(chuàng)建圖標并進行展示，也可按需求進行排列、分組，并提供一系列的圖標管理方法及功能；同時，由于該HTML5的跨平臺、跨終端的特性，也使改圖標展示方法及系統(tǒng)具備了跨平臺、跨終端的特性，并提供了適用于鼠標和鍵盤配合操作或適用于觸摸屏操作的兩種用戶操作習(xí)慣，可在不同的終端機使用最符合用戶的操作習(xí)慣，大大增強了Web的人機交互、人網(wǎng)交互的用戶體現(xiàn)。
【專利說明】-種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)

【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，尤其涉及一種應(yīng)用基 于瀏覽器或其他HTML5環(huán)境下的虛擬操作系統(tǒng)或Web應(yīng)用中的圖標展示與操作。

【背景技術(shù)】
[0002] 隨著互聯(lián)網(wǎng)的飛速發(fā)展，瀏覽器不再僅僅用來表示W(wǎng)eb內(nèi)容，，隨著HTML5的技術(shù) 的問世，Web進入了一個成熟的應(yīng)用平臺，在HTML 5平臺上，視頻，音頻，圖象，動畫，以及同 電腦的交互都被標準化。如今已進入后Web2. 0時代，人機交互、人網(wǎng)交互已經(jīng)成為常態(tài)，我 們已經(jīng)不能滿足于網(wǎng)頁上簡單的圖片和文字展示，尤其在瀏覽器上管理云端文件、文件夾、 應(yīng)用等時，我們更希望能像本地操作系統(tǒng)那樣直觀地展示和操作。因此，為了迎合互聯(lián)網(wǎng)技 術(shù)發(fā)展的需求，研發(fā)一種基于HTML5的圖標展示方法及系統(tǒng)，無須下載安裝即可運行于支 持HTML5的瀏覽器或應(yīng)用中，以從服務(wù)器返回的簡單數(shù)據(jù)創(chuàng)建圖標并進行展示，也可按需 求進行排列、分組，并提供一系列的圖標管理方法及功能。同時，由于HTML5的跨平臺、跨終 端的特性，也使改圖標展示方法及系統(tǒng)具備了跨平臺、跨終端的特性，并提供了適用于鼠 標和鍵盤配合操作或適用于觸摸屏操作的兩種用戶操作習(xí)慣，在不同的終端機使用最符合 用戶操作習(xí)慣，大大增強了 Web的人機交互、人網(wǎng)交互的用戶體現(xiàn)。


【發(fā)明內(nèi)容】

[0003] 為了迎合互聯(lián)網(wǎng)技術(shù)發(fā)展的需求，增強了 Web的人機交互、人網(wǎng)交互的用戶體現(xiàn)， 以及在不同終端或平臺下用戶操作習(xí)慣而提供的一種基于HTML5的跨平臺、跨終端的圖標 結(jié)構(gòu)、展示方法及系統(tǒng)，以計算機圖形圖標的方式展現(xiàn)云端服務(wù)器中的文件、文件夾、應(yīng)用、 快捷方式及超鏈接等數(shù)據(jù)，更具備了一系列的圖標管理方法及功能，在進行圖標數(shù)據(jù)更新 的操作后，將更新后的圖標數(shù)據(jù)返回給服務(wù)器處理及保存，同時也具備了適用于鼠標和鍵 盤配合操作或適用于觸摸屏操作的兩種用戶操作習(xí)慣。不僅如此，所述的圖標展示方法系 統(tǒng)還提供API接口，以供第三方應(yīng)用的調(diào)用、操作、或進行數(shù)據(jù)交互。本發(fā)明是通過以下技 術(shù)方案來實現(xiàn)的： 一種基于HTML5的圖標結(jié)構(gòu)、展不方法及系統(tǒng)，所述基于HTML5的圖標結(jié)構(gòu)，包括圖標 容器、圖標圖片、縮略圖、疊加圖、圖標名稱、圖標屬性、進度欄、通知數(shù)量、復(fù)選框控件和刪 除控件；所述圖標的主要功能方法包括：刪除、重命名、顯示、隱藏、高亮關(guān)鍵詞、設(shè)置透明 度、通知、警告設(shè)置、顯示進度、編輯模式、銷毀等；所述圖標的展示在圖標展示版面內(nèi)，通過 計算按順序地排列；所述圖標的排列可以分成橫行排列和縱向排列；所述圖標展示版面： 用于包含并展示圖標，同時向用戶提供一系的界面交互操作方法。
[0004] 進一步地，所述基于HTML5的展示方法包括以下步驟：通過從服務(wù)器中獲取圖標 數(shù)據(jù)或從接收來自第三方應(yīng)用的圖標數(shù)據(jù)；對圖標數(shù)據(jù)進行完善及對象化處理；根據(jù)圖標 數(shù)據(jù)進行圖標圖形元素的創(chuàng)建；對圖標進行排序、分組地展示；對所述圖標進行排序、分組 地展示還包括以下步驟：根據(jù)設(shè)置中的排列方式對圖標進行重新排列；根據(jù)設(shè)置中的分組 方式對圖標進行分組；根據(jù)圖標數(shù)據(jù)創(chuàng)建圖標；通過計算圖標位置將創(chuàng)建的圖標有序地排 列展示到圖標展示版面；對所述圖標進行展示還包括根據(jù)圖標的分組將圖標分別放置在不 同的區(qū)域，此方法尤其適用于基于HTML5的虛擬操作系統(tǒng)的桌面圖標，如此將同一組圖標 放置在同一區(qū)域，方便用戶對桌面圖標進行查找，操作方便；所述基于HTML5的展示方法還 包括：通過界面交互模塊對展示的圖標設(shè)置用戶操作監(jiān)控，接收用戶對圖標進行修改的信 息，將修改后的圖標信息返回給服務(wù)器或第三方應(yīng)用進行處理及保存；所述界面交互模塊 還包括兩種操作模式，一種為適用于鼠標和鍵盤配合的操作模式，另一種為適用于觸摸屏 的操作模式。
[0005] 進一步地，所述基于HTML5的圖標展示系統(tǒng)包括服務(wù)器、及與所述服務(wù)器進行交 互的多個客戶端，以及與客戶端進行圖標信息交互的第三方應(yīng)用；所述的客戶端通過從服 務(wù)器中獲取圖標數(shù)據(jù)或從接收來自第三方應(yīng)用的圖標數(shù)據(jù)，對圖標數(shù)據(jù)進行完善及對象化 處理，根據(jù)圖標數(shù)據(jù)進行圖標圖形元素的創(chuàng)建，對圖標進行排序、分組地展示。
[0006] 進一步地，所述客戶端包括：數(shù)據(jù)管理模塊，用于對圖標信息進行完善及對象化處 理，并存儲處理后的圖標信息；圖標創(chuàng)建模塊，用于根據(jù)圖標信息創(chuàng)建圖標圖形的HTML元 素，設(shè)置事件監(jiān)控及方法；所述圖標展示模塊，根據(jù)數(shù)據(jù)中心存儲的圖標信息，調(diào)用所述圖 標創(chuàng)建模塊并對圖標創(chuàng)建模塊進行按指定的排列方式、分組方式，單區(qū)域或分區(qū)域地展示； 所述界面交互模塊，用于對展示的圖標進行用戶操作監(jiān)控，接收來自用戶的修改指令，對所 述圖標展示模塊的圖標信息進行修改，并將修改后的圖標信息存儲在數(shù)據(jù)中心。
[0007] 進一步地，所述客戶端還包括：收發(fā)模塊，用于向服務(wù)發(fā)送查詢請求，接收服務(wù)器 返回的所述圖標信息并傳送給數(shù)據(jù)中心。
[0008] 進一步地，所述客戶端還包括：API接口模塊，用于和第三方應(yīng)用進行交互，接收 來自第三應(yīng)用的查詢請求或操作命令，然后將圖標信息或進行處理后將處理后結(jié)果反饋給 第三方應(yīng)用。
[0009] 進一步地，所述客戶端還包括：環(huán)境監(jiān)測模塊，用于對平臺及終端機進行操作模式 的判斷，并設(shè)置所述界面交互模塊所使用的操作模式；所述收發(fā)模塊和API接口模塊，可根 據(jù)需求進行選擇性地運行，可兩個模塊同時運行，也可只運行其中的一個，但至少運行其中 的一個模塊才能使所述客戶端正常運作；所述環(huán)境監(jiān)測模塊只需在客戶端啟動時運行，當 對環(huán)境檢測完畢并設(shè)置所述界面交互模塊所使用的操作模式后自動銷毀并釋放內(nèi)存。
[0010] 進一步地，所述界面交互模塊所使用的操作模式包括：適用于鼠標和鍵盤配合的 操作模式或適用于觸摸屏的操作模式，也可以兩種操作模式同時使用。
[0011] 進一步地，所述服務(wù)器包括通信接口，用于接收來自客戶端圖標查詢請求或上傳 的圖標信息，并轉(zhuǎn)發(fā)給圖標數(shù)據(jù)中心，圖標數(shù)據(jù)中心將圖標查詢結(jié)果或圖標信息處理結(jié)果 返回給通信接口，通信接口再將數(shù)據(jù)返回給客戶端；圖標數(shù)據(jù)中心，由數(shù)據(jù)庫和文件系統(tǒng)組 成，用于通過數(shù)據(jù)庫存儲圖標信息和通過文件系統(tǒng)存儲圖標信息相對應(yīng)的實際文件信息， 也用于處理來自通信接口的圖標信息查詢請求、圖標數(shù)據(jù)更新請求，并將處理結(jié)果返回給 通信接口。
[0012] 進一步地，所述服務(wù)器還包括客戶端生成模塊，用于收到來自終端機上的支持 HTML5的瀏覽器或應(yīng)用的加載請求時，返回客戶端的Javascript代碼，使客戶端無需下載 安裝即可運行使用。
[0013] 本發(fā)明的一種基于HTML5的圖標結(jié)構(gòu)、展不方法及系統(tǒng)，所述基于HTML5的圖標 結(jié)構(gòu)包括以下元素：圖標容器、圖標圖片、縮略圖、疊加圖、圖標名稱、圖標屬性、進度欄、通 知數(shù)量、復(fù)選框控件、刪除控件。本發(fā)明實現(xiàn)了無須下載安裝即可運行于支持HTML5的瀏 覽器或應(yīng)用中，以從服務(wù)器返回的簡單數(shù)據(jù)創(chuàng)建圖標并進行展示，也可按需求進行排列、分 組，并提供一系列的圖標管理方法及功能；同時，由于該HTML5的跨平臺、跨終端的特性，也 使改圖標展示方法及系統(tǒng)具備了跨平臺、跨終端的特性，并提供了適用于鼠標和鍵盤配合 操作或適用于觸摸屏操作的兩種用戶操作習(xí)慣，可在不同的終端機使用最符合用戶操作習(xí) 慣，大大增強了 Web的人機交互、人網(wǎng)交互的用戶體現(xiàn)。

【專利附圖】

【附圖說明】
[0014] 為了易于說明，本發(fā)明由下述的較佳實施例及附圖作以詳細描述。
[0015] 圖1為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展不方法及系統(tǒng)中基于HTML5的圖標 結(jié)構(gòu)示意圖。
[0016] 圖2為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展不方法及系統(tǒng)的圖標排列方式不意 圖。
[0017] 圖3為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展不方法及系統(tǒng)的圖標的批量選擇不 意圖。
[0018] 圖4為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的客戶端結(jié)構(gòu)示意 圖。
[0019] 圖5為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的服務(wù)端結(jié)構(gòu)示意圖。
[0020] 圖6為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的圖標展示流程圖。
[0021] 圖7為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的客戶端與服務(wù)器交 接的圖標信息修改流程圖。
[0022] 圖8為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的客戶端與第三方應(yīng) 用交接的圖標信息修改流程圖。

【具體實施方式】
[0023] 本實施例中，參照圖1所示，一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)中所述 基于HTML5的圖標結(jié)構(gòu)包括圖標容器、圖標圖片、縮略圖、置加圖、圖標名稱、圖標屬性、進 度欄、通知數(shù)量、復(fù)選框控件、刪除控件。
[0024] 所述圖標容器由一個DIV元素組成，用于包含圖標的其他元素。
[0025] 所述圖標圖片由一個MG元素組成，用于顯示所述圖標類型的默認圖片。
[0026] 所述縮略圖由一個IMG元素組成，用于顯示所述圖標的縮略圖。當圖標存在縮略 圖時，將在圖標圖片的位置上按比例展示，并且隱藏默認的圖標圖片。
[0027] 所述疊加圖由一個MG元素組成，以疊加的方式展示在圖標圖片或縮略圖上方， 其大小與位置與所述圖標圖片一致，所顯示的圖片必須使用背景透明的32位PNG格式的圖 片。用于標識所述圖標類別或特性，如將所述圖標標識為快捷方式、標識為共享狀態(tài)等。
[0028] 所述圖標名稱由一個SPAN元素組成，用于展示所示圖標的名稱。當所述元素進入 到編輯模式時，則以一個TEXTAREA元素替換。
[0029] 所述圖標屬性由一個或多個SPAN元素組成，用于展示所述圖標的屬性。每個SPAN 元素負責(zé)展示所述圖標的一項屬性。默認情況下被隱藏。
[0030] 所述進度欄由兩個SPAN元素組成，用于展示所述圖標的進度狀態(tài)，如文件的上 傳、下載進度。默認情況下被隱藏。
[0031] 所述通知數(shù)量由一個SPAN元素組成，用于展示所述圖標的通知狀態(tài)及收到的通 知數(shù)量。默認情況下被隱藏。
[0032] 所述選項框控件可由一個CHECKBOX類型的INPUT元素或以一個SPAN元素模擬組 成，用于展示所述圖標的選中狀態(tài)，以及為用戶提供交互操作的觸點，反復(fù)點擊表示選中、 取消。默認情況下被隱藏。
[0033] 所述刪除控件由一個SPAN元素組成，用于為用戶提供交互操作的觸點，點擊后表 示刪除所述圖標。默認情況下被隱藏。
[0034] 可根據(jù)用戶需求，通過設(shè)置CSS樣式所述控件的樣式、大小、位置作出適當?shù)母?改。
[0035] -個功能完整的圖標是一個小型應(yīng)用，除了具備以上視圖結(jié)構(gòu)以外，自身還具備 了以下功能方法： 刪除(命令：Delete)，用于刪除該圖標代表對象，如：文件、文件夾、應(yīng)用、快捷方式等。
[0036] 重命名（命令：Rename)，用于修改圖標的名稱和路徑。
[0037] 顯示(命令：Show)，用于使圖標在計算機圖形界面中隱藏狀態(tài)下顯示。
[0038] 隱藏(命令：Hide)，用于使圖標在計算機圖形界面中隱藏。
[0039] 商殼關(guān)鍵詞（命令：Highlight)，用于使圖標名稱中某些關(guān)鍵詞商殼顯不，適用于 搜索情況下。
[0040] 設(shè)置透明度(命令：SetOpacity)，用于設(shè)置所述圖標結(jié)構(gòu)中的圖標圖片、圖標縮略 圖，圖標疊加圖的透明度。
[0041] 通知(命令：NotiCe)，用于設(shè)置所述圖標結(jié)構(gòu)中的通知數(shù)量，通過顯示、隱藏和數(shù) 字顯示的方式實現(xiàn)。
[0042] 警告設(shè)置(命令:Warn)，用于使圖標提示警告或錯誤信息。
[0043] 顯示進度(命令：SetProgress)，用于使圖標利用所述圖標結(jié)構(gòu)中的進度欄顯示 0%-100%的進度狀態(tài)。
[0044] 編輯模式(命令：EditM〇de)，用于使圖標進入/取消編輯模式，進入編輯模式后， 所述圖標結(jié)構(gòu)中的復(fù)選框控件和刪除控件將顯示，適用于觸摸屏操作的情況下使用。
[0045] 銷毀(命令：Destroy)，用于銷毀圖標結(jié)構(gòu)和圖標方法，并釋放內(nèi)存(注：此方法不 會對該圖標代表對象數(shù)據(jù)造成影響)。
[0046] 參照圖2所示，為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)中所述圖 標排列根據(jù)計算圖標展示版面的寬度、高度、內(nèi)邊距，和圖標的寬度、高度、間距進行定位排 列。
[0047] 所述圖標排列時的定位以絕對定位（position:absolute)的方式進行；以X表示 圖標左側(cè)與圖標展示版面左側(cè)的距離；以Y表示圖標頂部與圖標展示版面頂部的距離。
[0048] 所述圖標定位所需的X、Y值由以下公式計算所得： 假設(shè)W1為圖標展示版面的寬度； 假設(shè)HI為為圖標展示版面的高度； 假設(shè)Pt為圖標展示版面的上側(cè)內(nèi)邊距； 假設(shè)Pr為圖標展示版面的右側(cè)內(nèi)邊距； 假設(shè)Pb為圖標展示版面的下側(cè)內(nèi)邊距； 假設(shè)P1為圖標展示版面的左側(cè)內(nèi)邊距； 假設(shè)W2為圖標寬度； 假設(shè)H2為圖標高度； 假設(shè)Mx為圖標X方向的間隔； 假設(shè)My為圖標Y方向的間隔； 假設(shè)N為展示過程中的第N個圖標； 當橫向排列圖標時： 若Mx值不固定，則使圖標在展示區(qū)域中X方向均勻排列，此時： Mx = ((ffl - PI - Pr) % W2) / floor((ffl - PI - Pr) / W2); 則： X = (N % floor((ffl - PI - Pr) / W2) - 1) * (W2 + Mx) + PI; Y = floor(N / floor ((ffl - PI - Pr) / W2)) * (H2 + My) + Pt; 當縱向排列圖標時： 若My值不固定，則使圖標在展示區(qū)域中Y方向均勻排列，此時： My = ((HI - Pt - Pb) % H2) / floor((HI - Pt - Pb) / H2); 則： X = floor(N / floor((HI - Pt - Pb) / H2)) * (W2 + Mx) + PI; Y = (N % floor((HI - Pt - Pb) / H2) - 1) * (H2 + My) + Pt〇
[0049] 參照圖3所示，為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)中所述圖標 批量的選擇包括以下步驟： 開始選取，檢測并記錄初始的X、Y坐標（X為相對圖標展示版面左側(cè)邊緣的距離；Y為 相對圖標展示版面上側(cè)邊緣的距離)，并創(chuàng)建所選區(qū)域示意層。
[0050] 所述所選區(qū)域示意層由一個位于圖標上方的半透明DIV元素或Canvas畫布組成， 用于以圖形方式展示用戶所選區(qū)域。
[0051] 執(zhí)行選取，檢測新的x、Y坐標并與所述開始選取時記錄的x、Y坐標進行比較，兩坐 標之間的矩形區(qū)域為用戶所選取的區(qū)域。
[0052] 所述實施還包括以下步驟： 更改所選區(qū)域示意層的大小及位置，使其匹配覆蓋在用戶所選取的區(qū)域上。遍歷圖標 展示版面上的所有圖標，逐一對其所在位置進行判定，對在用戶所選區(qū)域上的圖標標記為 選中狀態(tài)，對不在用戶所選區(qū)域上的圖標標記為未選中狀態(tài)。
[0053] 結(jié)束選取，隱藏或銷毀選擇區(qū)域示意層。
[0054] 參照圖4所示，為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的客戶端結(jié) 構(gòu)包括的模塊： 數(shù)據(jù)管理模塊，用于對圖標信息進行完善及對象化處理，并存儲處理后的圖標信息。
[0055] 圖標創(chuàng)建模塊，用于根據(jù)圖標信息創(chuàng)建圖標圖形的HTML元素，設(shè)置事件監(jiān)控及方 法。
[0056] 所述圖標展示模塊，根據(jù)數(shù)據(jù)中心存儲的圖標信息，調(diào)用所述圖標創(chuàng)建模塊并對 圖標創(chuàng)建模塊進行按指定的排列方式、分組方式，單區(qū)域或分區(qū)域地展示。
[0057] 所述界面交互模塊，用于對展示的圖標進行用戶操作監(jiān)控，接收來自用戶的修改 指令，對所述圖標展示模塊的圖標信息進行修改，并將修改后的圖標信息存儲在數(shù)據(jù)中心。 此外，界面交互模塊為用戶提供了兩種操作模式，適用于鼠標和鍵盤配合的操作模式和適 用于觸摸屏的操作模式。
[0058] 所述收發(fā)模塊，用于向服務(wù)發(fā)送查詢請求，接收服務(wù)器返回的所述圖標信息并傳 送給數(shù)據(jù)中心。
[0059] 所述API接口模塊，用于和第三方應(yīng)用進行交互，接收來自第三應(yīng)用的圖標展示 請求、查詢請求或操作命令，然后將圖標信息或進行處理后將處理后結(jié)果反饋給第三方應(yīng) 用。
[0060] 所述環(huán)境監(jiān)測模塊，用于對平臺及終端機進行操作模式的判斷，并設(shè)置所述界面 交互模塊所使用的操作模式。當對環(huán)境檢測完畢并設(shè)置所述界面交互模塊所使用的操作模 式后自動銷毀并釋放內(nèi)存。
[0061] 參照圖5所示，為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的服務(wù)端結(jié) 構(gòu)包括的模塊： 通信接口，用于接收來自客戶端圖標查詢請求或上傳的圖標信息，并轉(zhuǎn)發(fā)給圖標數(shù)據(jù) 中心，圖標數(shù)據(jù)中心將圖標查詢結(jié)果或圖標信息處理結(jié)果返回給通信接口，通信接口再將 數(shù)據(jù)返回給客戶端。
[0062] 圖標數(shù)據(jù)中心，由數(shù)據(jù)庫和文件系統(tǒng)組成，用于通過數(shù)據(jù)庫存儲圖標信息和通過 文件系統(tǒng)存儲圖標信息相對應(yīng)的實際文件信息。也用于處理來自通信接口的圖標信息查詢 請求、圖標數(shù)據(jù)更新請求，并將處理結(jié)果返回給通信接口。
[0063] 客戶端生成模塊，用于收到來自終端機上的支持HTML5的瀏覽器或應(yīng)用的加載請 求時，返回客戶端的Javascript代碼。使客戶端無需下載安裝即可運行使用。
[0064] 參照圖6所示，為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的圖標展示 流程進行步驟： 步驟一：加載客戶端程序代碼，可通過以下兩種方式加載： 1、直接將代碼嵌入在HTML文檔中，或通過〈script>〈/script>標簽進行加載，這種加 載方式，運行于頁面解析時。
[0065] 2、在頁面解析完畢后，可以利用Javascript通過AJAX (也可以通過JS0NP或 WebSocket)進行加載，加載后，執(zhí)行evel函數(shù)使客戶端代碼運行。
[0066] 步驟二：獲取圖標數(shù)據(jù)，可通過以下兩種方式獲得： 1、以主動的方式通過收發(fā)模塊向服務(wù)器發(fā)出獲取圖標數(shù)據(jù)的請求并接收服務(wù)器返回 的圖標數(shù)據(jù)。
[0067] 2、以被動的方式接收第三方應(yīng)用通過API接口發(fā)送的圖標數(shù)據(jù)。
[0068] 獲取數(shù)據(jù)后，通過數(shù)據(jù)管理模塊，對圖標數(shù)據(jù)進行完善及對象化處理，并保存圖標 數(shù)據(jù)。
[0069] 與圖標數(shù)據(jù)一起保存的信息還有：圖標數(shù)據(jù)獲取方式、以及其對應(yīng)的服務(wù)器或第 三方應(yīng)用。用于當圖標信息被用戶修改時，能正確地返回數(shù)據(jù)。
[0070] 步驟三：根據(jù)數(shù)據(jù)管理模塊通過圖標展示模塊進行圖標展示，此步驟又分成以下 幾個步驟進行： 1、調(diào)用圖標創(chuàng)建模塊根據(jù)圖標數(shù)據(jù)進行圖標創(chuàng)建，包括圖標視圖在HTML文檔中的元 素、元素的事件設(shè)置，和圖標自身的方法設(shè)置。
[0071] 2、根據(jù)設(shè)置中的排列方式對圖標進行重新排列。排列包括通過對比與圖標對應(yīng)對 象的名稱、大小、類型、修改日期等各種圖標對象屬性以升序或降序的方式進行。
[0072] 3、根據(jù)設(shè)置中的分組方式對圖標進行分組，分組方式包括：與圖標對應(yīng)對象的名 稱、大小、類型、修改日期等各種圖標對象屬性。
[0073] 4、創(chuàng)建圖標展示版面，若設(shè)置中需要分區(qū)域展示時，根據(jù)每一個分組創(chuàng)建與之對 應(yīng)的圖標展示版面。
[0074] 5、以上述圖2所示的方式進行圖標排列展示。
[0075] 步驟四：圖標展示模塊調(diào)用界面交互模塊進行界面交互監(jiān)控設(shè)置，對HTML文檔中 的圖標元素及圖標展示版面元素設(shè)置相關(guān)事件，使其可以接受來自用戶的操作。根據(jù)由環(huán) 境監(jiān)測模塊或操作模式設(shè)置，可以設(shè)置成以下兩種模式的監(jiān)控： 1、 為適用于鼠標和鍵盤配合的操作模式； 2、 為適用于觸摸屏的操作模式。
[0076] 結(jié)束。
[0077] 參照圖7所示，為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的客戶端與 服務(wù)器交接的圖標信息修改流程圖的進行步驟： 步驟一：當用戶通過鼠標、鍵盤、觸摸屏等人機交互硬件發(fā)出圖標信息修改命令后，界 面交互模塊將自動接收用戶對圖標進行修改的信息。
[0078] 步驟二：界面交互模塊將接收到的圖標修改信息提交到圖標展示模塊，圖標展示 模塊對已展示的圖標進行修改或銷毀，其中修改的內(nèi)容為如圖標圖像、縮略圖、名稱、屬性、 狀態(tài)，進度等。同時將圖標修改信息提交到數(shù)據(jù)管理模塊。
[0079] 步驟三：數(shù)據(jù)管理模塊將由圖標展示模塊提交的圖標修改信息通過添加、修改、刪 除等方式應(yīng)用到已保存的圖標數(shù)據(jù)中。
[0080] 步驟四：數(shù)據(jù)管理模塊將圖標修改信息通過收發(fā)模塊發(fā)送到服務(wù)器，服務(wù)器通過 通信接口將接收到的圖標修改信息提交到數(shù)據(jù)中心處理，數(shù)據(jù)中心通過添加、修改、刪除等 方式將圖標修改信息應(yīng)用到數(shù)據(jù)庫及文件系統(tǒng)中。
[0081] 結(jié)束。
[0082] 參照圖8所示，為本發(fā)明一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)的客戶端與 第三方應(yīng)用交接的圖標信息修改流程圖的進行步驟： 步驟一：當用戶通過鼠標、鍵盤、觸摸屏等人機交互硬件發(fā)出圖標信息修改命令后，界 面交互模塊將自動接收用戶對圖標進行修改的信息。
[0083] 步驟二：界面交互模塊將接收到的圖標修改信息提交到圖標展示模塊，圖標展示 模塊對已展示的圖標進行修改或銷毀，其中修改的內(nèi)容為如圖標圖像、縮略圖、名稱、屬性、 狀態(tài)，進度等。同時將圖標修改信息提交到數(shù)據(jù)管理模塊。
[0084] 步驟三：數(shù)據(jù)管理模塊將由界面交互模塊提交的圖標修改信息通過添加、修改、刪 除等方式應(yīng)用到已保存的圖標數(shù)據(jù)中。
[0085] 步驟四：數(shù)據(jù)管理模塊將圖標修改信息通過API接口模塊返回到第三方應(yīng)用中， 第三方應(yīng)用將根據(jù)自身的方法進行處理。
[0086] 結(jié)束。
[0087] 本發(fā)明的一種基于HTML5的圖標結(jié)構(gòu)、展不方法及系統(tǒng)，所述基于HTML5的圖標 結(jié)構(gòu)包括以下元素：圖標容器、圖標圖片、縮略圖、疊加圖、圖標名稱、圖標屬性、進度欄、通 知數(shù)量、復(fù)選框控件、刪除控件。本發(fā)明實現(xiàn)了無須下載安裝即可運行于支持HTML5的瀏 覽器或應(yīng)用中，以從服務(wù)器返回的簡單數(shù)據(jù)創(chuàng)建圖標并進行展示，也可按需求進行排列、分 組，并提供一系列的圖標管理方法及功能；同時，由于該HTML5的跨平臺、跨終端的特性，也 使改圖標展示方法及系統(tǒng)具備了跨平臺、跨終端的特性，并提供了適用于鼠標和鍵盤配合 操作或適用于觸摸屏操作的兩種用戶操作習(xí)慣，可在不同的終端機使用最符合用戶操作習(xí) 慣，大大增強了 Web的人機交互、人網(wǎng)交互的用戶體現(xiàn)。
[0088] 上述實施例，只是本發(fā)明的一個實例，并不是用來限制本發(fā)明的實施與權(quán)利范圍， 凡與本發(fā)明權(quán)利要求所述內(nèi)容相同或等同的技術(shù)方案，均應(yīng)包括在本發(fā)明保護范圍內(nèi)。
【權(quán)利要求】
1. 一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在于：所述基于HTML5的圖標 結(jié)構(gòu)包括圖標容器、圖標圖片、縮略圖、疊加圖、圖標名稱、圖標屬性、進度欄、通知數(shù)量、復(fù) 選框控件和刪除控件； 所述圖標的主要功能方法包括：刪除、重命名、顯示、隱藏、高亮關(guān)鍵詞、設(shè)置透明度、通 知、警告設(shè)置、顯示進度、編輯模式和銷毀； 所述圖標的展示在圖標展示版面內(nèi)，按順序地排列； 所述圖標的排列可以分成橫行排列和縱向排列； 所述圖標展示版面：用于包含并展示圖標，同時向用戶提供一系的界面交互操作方 法。
2. 根據(jù)權(quán)利要求1所述的一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在于： 所述基于HTML5的展示方法包括以下步驟：通過從服務(wù)器中獲取圖標數(shù)據(jù)或從接收來自第 三方應(yīng)用的圖標數(shù)據(jù)；對圖標數(shù)據(jù)進行完善及對象化處理；根據(jù)處理后的圖標數(shù)據(jù)進行圖 標圖形的創(chuàng)建；對圖標進行排序、分組地展示； 對所述圖標進行排序、分組地展示還包括以下步驟：根據(jù)設(shè)置中的排列方式對圖標數(shù) 據(jù)進行重新排列；根據(jù)設(shè)置中的分組方式對圖標數(shù)據(jù)進行分組；根據(jù)圖標數(shù)據(jù)創(chuàng)建圖標； 通過計算圖標位置將創(chuàng)建的圖標有序地排列展示到圖標展示版面； 對所述圖標進行展示還包括根據(jù)圖標的分組將圖標分別放置在不同的區(qū)域，此方法尤 其適用于基于HTML5的虛擬操作系統(tǒng)的桌面圖標，如此將同一組圖標放置在同一區(qū)域，方 便用戶對桌面圖標進行查找，操作方便； 所述基于HTML5的展示方法還包括：通過界面交互模塊對展示的圖標設(shè)置用戶操作監(jiān) 控，接收用戶對圖標進行修改的信息，將修改后的圖標信息返回給服務(wù)器或第三方應(yīng)用進 行處理及保存； 所述界面交互模塊還包括兩種操作模式，一種為適用于鼠標和鍵盤配合的操作模式， 另一種為適用于觸摸屏的操作模式。
3. 根據(jù)權(quán)利要求1所述的一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在于： 所述基于HTML5的圖標展示系統(tǒng)包括服務(wù)器、及與所述服務(wù)器進行交互的多個客戶端，以 及與客戶端進行圖標信息交互的第三方應(yīng)用；所述的客戶端通過從服務(wù)器中獲取圖標數(shù)據(jù) 或從接收來自第三方應(yīng)用的圖標數(shù)據(jù)，對圖標數(shù)據(jù)進行完善及對象化處理，根據(jù)圖標數(shù)據(jù) 進行圖標圖形的創(chuàng)建，對圖標進行排序、分組地展示。
4. 根據(jù)權(quán)利要求3所述的一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在于： 所述客戶端包括：數(shù)據(jù)管理模塊，用于對圖標信息進行完善及對象化處理，并存儲處理后的 圖標信息；圖標創(chuàng)建模塊，用于根據(jù)圖標信息創(chuàng)建圖標圖形的HTML元素，設(shè)置事件監(jiān)控及 方法；所述圖標展示模塊，根據(jù)數(shù)據(jù)中心存儲的圖標信息，調(diào)用所述圖標創(chuàng)建模塊并對圖標 創(chuàng)建模塊進行按指定的排列方式、分組方式，單區(qū)域或分區(qū)域地展示；所述界面交互模塊， 用于對展示的圖標進行用戶操作監(jiān)控，接收來自用戶的修改指令，對所述圖標展示模塊的 圖標信息進行修改，并將修改后的圖標信息存儲在數(shù)據(jù)中心。
5. 根據(jù)權(quán)利要求4所述的一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在于： 所述客戶端還包括：收發(fā)模塊，用于向服務(wù)發(fā)送查詢請求，接收服務(wù)器返回的所述圖標信息 并傳送給數(shù)據(jù)中心。
6. 根據(jù)權(quán)利要求4所述的一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在于： 所述客戶端還包括：API接口模塊，用于和第三方應(yīng)用進行交互，接收來自第三應(yīng)用的查詢 請求或操作命令，然后將圖標信息或進行處理后將處理后結(jié)果反饋給第三方應(yīng)用。
7. 根據(jù)權(quán)利要求4所述的一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在于： 所述客戶端還包括：環(huán)境監(jiān)測模塊，用于對平臺及終端機進行操作模式的判斷，并設(shè)置所述 界面交互模塊所使用的操作模式； 所述收發(fā)模塊和API接口模塊，可根據(jù)需求進行選擇性地運行，可兩個模塊同時運行， 也可只運行其中的一個，但至少運行其中的一個模塊才能使所述客戶端正常運作； 所述環(huán)境監(jiān)測模塊只需在客戶端啟動時運行，當對環(huán)境檢測完畢并設(shè)置所述界面交互 模塊所使用的操作模式后自動銷毀并釋放內(nèi)存。
8. 根據(jù)權(quán)利要求3所述的一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在于： 所述界面交互模塊所使用的操作模式包括：適用于鼠標和鍵盤配合的操作模式或適用于觸 摸屏的操作模式，也可以兩種操作模式同時使用。
9. 根據(jù)權(quán)利要求3所述的一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在于： 所述服務(wù)器包括通信接口，用于接收來自客戶端圖標查詢請求或上傳的圖標信息，并轉(zhuǎn)發(fā) 給圖標數(shù)據(jù)中心，圖標數(shù)據(jù)中心將圖標查詢結(jié)果或圖標信息處理結(jié)果返回給通信接口，通 信接口再將數(shù)據(jù)返回給客戶端；圖標數(shù)據(jù)中心，由數(shù)據(jù)庫和文件系統(tǒng)組成，用于通過數(shù)據(jù)庫 存儲圖標信息和通過文件系統(tǒng)存儲圖標信息相對應(yīng)的實際文件信息，也用于處理來自通信 接口的圖標信息查詢請求、圖標數(shù)據(jù)更新請求，并將處理結(jié)果返回給通信接口。
10. 根據(jù)權(quán)利要求3所述的一種基于HTML5的圖標結(jié)構(gòu)、展示方法及系統(tǒng)，其特征在 于： 所述服務(wù)器還包括客戶端生成模塊，用于收到來自終端機上的支持HTML5的瀏覽器 或應(yīng)用的加載請求時，返回客戶端的Javascript代碼，使客戶端無需下載安裝即可運行使 用。
【文檔編號】H04L29/06GK104216699SQ201310341057
【公開日】2014年12月17日 申請日期:2013年8月7日 優(yōu)先權(quán)日:2013年8月7日
【發(fā)明者】侯金濤 申請人:侯金濤