201128514 六、發明說明: 【發明所屬之技術領域】 本申請涉及電腦領域,特別涉及一種級聯式功能表的 呈現方法及裝置。 【先前技術】 目前,各種網頁或軟體往往藉由用戶操作介面中一個 固定尺寸的功能表介面向用戶呈現相關資訊,而當呈現資 訊的內容長度超出功能表介面的尺寸時,爲了顯示出完整 的資訊內容,現有的各種網頁或軟體通常採用添加捲軸, 或打開級聯式功能表的方式加以解決。參閱圖1所示,所 謂級聯式選擇功能表,即是在用戶操作介面中採用多級內 容顯示的功能表選擇模式。 現有技術下,在級聯式選擇功能表中,每一級子功能 表的介面尺寸均是固定的,隨著各級子功能表數目的增加 ,級聯式選擇功能表的操作介面總長度也在不斷增加,這 樣,完全展開後的級聯式選擇功能表的操作視窗會佔用較 多的頁面空間,從而降低了頁面空間的使用率;另一方面 ,當用戶在各級子功能表之間反復瀏覽時,滑鼠的移動軌 跡便會不斷加長,從而造成了極差的用戶體驗。 【發明內容】 本申請實施例提供一種級聯式選擇功能表的呈現方法 及裝置,用以減少級聯式選擇功能表的操作視窗所佔用的 201128514 頁面空間,提高頁面空間的使用率" 本申請實施例提供的具體技術方案如下: 一種級聯式選擇功能表的呈現方法,所述級聯式選擇 功能表中包含多個子功能表,包括: 根據用戶的點擊事件確定用戶指示瀏覽的第一子功能 表; 確定所述第一子功能表的操作介面處於收縮狀態時, 統計級聯式選擇功能表的操作視窗內當前處於展開狀態的 子功能表的數目; 若確定當前處於展開狀態的子功能表的數目達到設定 閾値,則根據預設方式從當前處於展開狀態的子功能表中 至少選定第二子功能表,並對第二子功能表的操作介面進 行收縮; 將所述第一子功能表的操作介面滑動展開。 —種終端設備,用於呈現包含多個子功能表的級聯式 選擇功能表,包括: 用戶介面單元,用於根據用戶的點擊事件確定用戶指 示瀏覽的第一子功能表; 判斷單元,用於判斷所述第一子功能表的操作介面是 否處於收縮狀態,並獲得判斷結果; 統計單元,用於根據所述判斷結果確定所述第一子功 能表的操作介面處於收縮狀態時,統計級聯式選擇功能表 的操作視窗內當前處於展開狀態的子功能表的數目; 比較單元,用於將所述當前處於展開狀態的子功能表 -6- 201128514 的數目與設定閎値進行比較,並獲得比較結果; 處理單元,用於根據所述比較結果確定當前處於展開 狀態的子功能表的數目達到設定閾値,根據預設方式從中 選定第二子功能表,並對其操作介面進行收縮,以及將所 述第一子功能表的操作介面滑動展開。 本申請實施例的有益效果如下: 本申請實施例中,終端設備採用固定的操作視窗向用 戶呈現包含多個子功能表的級聯式選擇功能表,當用戶點 擊某子功能表時,終端設備根據用戶的點擊行確定用戶指 示瀏覽的第一子功能表,並在確定所述第一子功能表的操 作介面處於收縮狀態時,統計級聯式選擇功能表的操作視 窗內當前處於展開狀態的子功能表的數目,若確定當前處 於展開狀態的子功能表的數目達到設定閎値,則根據預設 方式從當前處於展開狀態的子功能表中至少選定第二子功 能表,並對第二子功能表的操作介面進行收縮,以及將所 述第一子功能表的操作介面滑動展開。這樣,級聯式選擇 功能表的操作視窗尺寸,不會隨著被展開子功能表的數目 的增加而增加,從而減小了級聯式選擇功能表所佔用的頁 面空間,提高了頁面空間的使用率,另一方面’在用戶瀏 覽各子功能表時,也避免了滑鼠軌跡的不斷延長’使用戶 在固定的操作視窗中可以瀏覽全部的子功能表,實現了所 見即所得的操作模式,方便了用戶的操作及瀏覽’使整個 操作流程更加順暢,進而在很大程度上提升了用戶的使用 體驗。 201128514 【實施方式】 本申請實施例中,級聯式選擇功能表的操作視窗尺寸 ,不會隨著被展開子功能表的數目的增加而增加,從而減 小了級聯式選擇功能表所佔用的頁面空間,提高了頁面空 間的使用率。本申請實施例中,終端設備向用戶呈現包含 多個子功能表的級聯式選擇功能表時,根據用戶的點擊事 件確定用戶指示瀏覽的第一子功能表,並在確定所述第一 子功能表的操作介面處於收縮狀態時,統計級聯式選擇功 能表的操作視窗內當前處於展開狀態的子功能表的數目, 若確定當前處於展開狀態的子功能表的數目達到設定閾値 ,則根據預設方式從當前處於展開狀態的子功能表中至少 選定第二子功能表,並對第二子功能表的操作介面進行收 縮,以及將所述第一子功能表的操作介面滑動展開。 本實施例中,對級聯式選擇功能表的各級子功能表進 行收縮主要是藉由調整各級子功能表的width屬性參數來 實現的,具體爲:藉由調用set Interval函數來減少各級子 功能表的width屬性參數的取値,以達到收縮子功能表操 作介面的效果,當子功能表操作介面的寬度收縮至設定閾 値時,則藉由調用 clearTimeout函數來停止子功能表 width屬性參數的減小。 另一方面,將各級子功能表操作介面進行滑動展開的 原理與進行收縮的原理相同,不同之處在於展開操作是增 加各級子功能表的width屬性參數的取値,在此不再贅述 201128514 下面結合圖式對本申請較佳的實施方式進行詳細說明 〇 參閱圖2所示’本申請實施例中,用於向用戶呈現級 聯式選擇功能表的終端設備包括:用戶介面單元20、判斷 單元21、統計單元22、比較單元23和處理單元24,其中 , 用戶介面單元20,用於根據用戶的點擊事件確定用戶 指示瀏覽的第一子功能表; 判斷單元21,用於判斷所述第一子功能表的操作介面 是否處於收縮狀態,並獲得判斷結果; 統計單元22,用於根據所述判斷結果確定所述第一子 功能表的操作介面處於收縮狀態時,統計級聯式選擇功能 表的操作視窗內當前處於展開狀態的子功能表的數目; 比較單元23,用於將所述當前處於展開狀態的子功能 表的數目與設定閩値進行比較,並獲得比較結果; 處理單元24,用於根據所述比較結果確定當前處於展 開狀態的子功能表的數目達到設定閾値,根據預設方式從 當前處於展開狀態的子功能表中至少選定第二子功能表, 並對第二子功能表的操作介面進行收縮,以及將所述第一 子功能表的操作介面滑動展開。 基於上述終端設備,本實施例中’用戶可以在終端設 備呈現的操作介面中,藉由點擊介面中的設定條目(如: 圖形鏈結、文本鏈結等等)來啓動級聯式選擇功能表中的 -9 201128514 每一級子功能表,並且無論被啓動的各級子功 如何增加,級聯式選擇功能表所呈現的操作介 是固定不變的,終端設備藉由調整各級子功能 的長度來適應操作介面因用戶選擇而產生的變 意圖如圖3所示。 參閱圖4所示,本實施例中,假設級聯式 表包含的各級子功能表按照級別從高到低的順 子功能表A、子功能表B、子功能表C、子功 功能表E等等;那麼,參閱圖5所示,本實施 設備基於固定介面長度對級聯式選擇功能表中 能表進行調整的詳細流程如下: 步驟500 :接收用戶下發的瀏覽指示;用 操作介面點擊級聯式選擇功能表中的任意一級 以下發上述瀏覽指示,本實施例中,假設用戶 功能表C。 參閱圖6所示,用戶可以藉由點擊子功能 介面,以使滑鼠滑過子功能表C並觸發onmou ”從而將其選擇爲當前瀏覽子功能表。 步驟510:判斷子功能表C當前是否處於 若是,則進行步驟5 5 0 ;否則,進行步驟5 2 0。 本實施例中,判斷子功能表C是否處於展 可以採用但不限於以下方法: 將子功能表C的操作介面的寬度與設定閩 設的width屬性的取値)進行比較,若等於設 能表的數目 面的總長度 表操作介面 化,操作示 選擇子功能 序分別爲: 能表D、子 例中,終端 的各級子功 戶可以藉由 子功能表, 點擊的是子 表C的操作 tseover 事件 展開狀態, 開狀態時, 値A (即預 定閩値A, -10· 201128514 則確定其處於展開狀態,若小於設定閾値A,則確定其處 於非展開狀態。 步驟520 :在級聯式選擇功能表的操作視窗內,統計 當前處於展開狀態的子功能表的數目,並將該數目與設定 閾値B進行比較,判斷該數目是否達到設定閩値B,若是 ,則進行步驟530 ;否則,進行步驟540。 本實施例中,將上述設定閾値B的取値設置爲2 (閾 値B由管理人員根據維護經驗預先設置),即表示在級聯 式選擇功能表的操作視窗中,最多允許兩個子功能表處於 展開狀態。當然,在實際應用中,設定閾値B的取値也可 以根據級聯式選擇功能表的操作視窗的尺寸變化而作出相 應調整,在此不再贅述。 替換性的,步驟5 2 0中可以統計當前處於展開狀態的 子功能表的總寬度尺寸,並將該總寬度尺寸與設定閩値C 進行比較,判斷該總寬度尺寸是否達到設定閩値C ’若是 ,則進行步驟53 0 ;否則,進行步驟540。其中,閾値C 爲級聯式選擇功能表的操作視窗最多允許展開的功能表的 寬度尺寸。 步驟5 3 〇 :在當前處於展開狀態的子功能表中選定一 個子功能表,並對其操作介面進行收縮。 實際應用中,也可以選定兩個、三個或其他數目的子· 功能表進行操作介面收縮,本申請實施例僅以選定> @胃 例進行說明。在選定需要收縮的子功能表時’可以採用但 不限於以下方法: f -11 - 201128514 先按照從子功能表A到子功能表b的順序查找處於展 開狀態的子功能表’並將第—個查找到的處於展開狀態的 子功能表進行收縮;若未找到,則再按照從子功能表E到 子功能表D的順序查找,並將第一個查找到的處於展開狀 態的子功能表進行收縮。 步驟54〇 :將子功能表C的操作介面滑動展開,其操 作效果具體如圖7所示。 步驟5 5 0 :判斷與子功能表c相鄰的下一級子功能表 D是否處於展開狀態’若是,則結束當前流程,否則,進 行步驟560 : 步驟560 :在級聯式選擇功能表的操作視窗內,統計 當前處於展開狀態的子功能表的數目,並將該數目與設定 閾値B進行比較,判斷該數目是否達到設定閾値b,若是 ,則進行步驟570 :否則,進行步驟58 0。 步驟570 :在當前除子功能表C之外的處於展開狀態 的子功能表中選定一個子功能表,並對其操作介面進行收 縮。 與步驟530同理,實際應用中,也可以選定兩個、三 個或其他數目的子功能表進行操作介面收縮,本申請實施 例僅以選定一個爲例進行說明。在選定需要收縮的子功能 表時,可以採用但不限於以下方法: 先按照從子功能表A到子功能表B的順序查找處於展 開狀態的子功能表,並將第一個查找到的處於展開狀態的 子功能表進行收縮;若未找到,則再按照從子功能表E到 -12 - 201128514 子功能表D的順序查找,並將第一個查找到的處於展開狀 態的子功能表進行收縮。當然,也可以按照子功能表B到 子功能表C ’以及子功能表D到子功能表£的順序進行搜 索’或者按照其他預設的方式進行搜索,在此不再贅述。 步驟5 8 0 :將子功能表D的操作介面滑動展開,其操 作效果具體如圖8所示。 本實施例中,將子功能表C和子功能表D同時展開, 是因爲通常情況下,用戶的閱讀習慣是從左至右的,用戶 在閱讀完子功能表C後,必然會將視線轉移到子功能表D ’因此需要將子功能表D同時展開以保持用戶視線的連貫 性’從而有效地提高了級聯式選擇功能表的閱讀便利性, 在很大程度上提升了用戶體驗。 當然’終端在級聯式選擇功能表的操作視窗中同時展 開的子功能表的數目,也可以根據級聯式選擇功能表的操 作視窗尺寸而進行調整。例如,在上述步驟5 00至5 70中 ,若級聯式選擇功能表的操作視窗尺寸過小,則終端也可 以僅展開用戶當前點擊的子功能表C,而不展開子功能表 D ;又例如,在上述步驟5 00至5 70中,若級聯式選擇功 能表的操作視窗尺寸足夠寬,則終端也可以在展開子功能 表C的同時,將子功能表D和子功能表E也呈現爲展開 狀態。本實施例僅以同時展開子功能表C和子功能表D爲 較佳實施例進行說明。 在實際應用中,藉由對普通用戶操作心智模型的硏究 ,發現用戶比較容易接收所見即所得的操作模式,用戶在 -13- 201128514 可見的區域中進行所見即所得的目標行爲操作,能及時查 看操作結果並對操作結果進行改動,從而有效地減少了操 作流程的複雜度,節省了用戶的學習成本,使用用戶的操 作流程更加順暢,最大程度地減輕了用戶由於無效操作而 產生的挫折感。 對應到本申請實施例中,終端設備採用固定的操作視 窗向用戶呈現包含多個子功能表的級聯式選擇功能表,當 用戶點擊某子功能表時,終端設備根據用戶的點擊行爲確 定用戶指示瀏覽的第一子功能表,並在確定所述第一子功 能表的操作介面處於收縮狀態時,統計級聯式選擇功能表 的操作視窗內當前處於展開狀態的子功能表的數目,若確 定當前處於展開狀態的子功能表的數目達到設定閾値,則 根據預設方式從當前處於展開狀態的子功能表中至少選定 第二子功能表,並對其操作介面進行收縮,以及將所述第 一子功能表的操作介面滑動展開。這樣,級聯式選擇功能 表的操作介面尺寸,不會隨著被展開子功能表的數目的增 加而增加,從而減小了級聯式選擇功能表所佔用的頁面空 間,提高了頁面空間的使用率,另一方面,在用戶瀏覽各 子功能表時,也避免了滑鼠軌跡的不斷延長,使用戶在固 定的操作視窗中可以瀏覽全部的子功能表,實現了所見即 所得的操作模式,方便了用戶的操作及瀏覽,使整個操作 流程更加順暢,進而在很大程度上提升了用戶的使用體驗 〇 顯然’本領域的技術人員可以對本申請中的實施例進 -14- 201128514 行各種改動和變型而不脫離本申請的精神和範圍。這樣, 倘若本申請實施例中的這些修改和變型屬於本申請申請專 利範圍及其等同技術的範圍之內,則本申請中的實施例也 意圖包含這些改動和變型在內。 【圖式簡單說明】 圖1爲現有技術下級聯式選擇功能表示意圖; 圖2爲本申請實施例中終端功能結構圖; 圖3爲本申請實施例中級聯式選擇功能表示意圖; 圖4爲本申請實施例中級聯式選擇功能表呈現示意圖 » 圖5爲本申請實施例中終端設備基於固定介面長度對 &聯式選擇功能表中的各級子功能表進行調整流程圖; 圖6至圖8爲本申請實施例中根據滑鼠點擊事件調整 '級聯式選擇功能表中各子功能表操作介面示意圖。 ^主要元件符號說明】 20 :用戶介面單元 2 1 :判斷單元 22 :統計單元 23 :比較單元 24 :處理單元 -15-