本發(fā)明涉及計算機領(lǐng)域，尤其涉及列表元素的展開控制方法和裝置。

背景技術(shù)：

現(xiàn)有的列表元素在展開時，存在兩種展開方法：

其一，如圖1所示，需要展開列表項時，調(diào)整頁面中所有列表項的高度，具體為：將除要展開的列表項以外的所有列表項的高度設(shè)置為0，并將要展開的列表項的高度設(shè)置為屏幕高度(或?qū)挾?；

其二，如圖2所示，需要展開列表項時，先將所有的列表項進行排列，然后將要展開的列表項移動到屏幕頂部，將列表項下方(或右方)的元素向下(或向右)移動到屏幕區(qū)域以外。

上述兩種方法中，需要做動畫的列表項較多，造成展開過程的動畫不流暢。

技術(shù)實現(xiàn)要素：

本發(fā)明實施例的主要目的在于提供一種列表元素的展開控制方法和裝置，旨在使得列表元素展開時，利用較少的元素移動即可達到展開效果，而且還使得展開過程中的動畫流暢。

為實現(xiàn)上述目的，本發(fā)明實施例提供了一種列表元素的展開控制方法，包括以下步驟：

接收列表元素展開指令，所述列表元素展開指令包括目標(biāo)列表元素；

根據(jù)所述列表元素展開指令，生成一空白元素，且所述空白元素的背景與目標(biāo)列表元素的背景一致，所述空白元素的大小為屏幕大小，所述空白元素的層級低于目標(biāo)列表元素、且高于其他列表元素的層級；

控制所述目標(biāo)列表元素的內(nèi)容展開顯示。

此外，為實現(xiàn)上述目的，本發(fā)明實施例還提供了一種列表元素的展開控制裝置，包括：

指令偵測模塊，用于接收列表元素展開指令，所述列表元素展開指令包括目標(biāo)列表元素；

元素生成模塊，用于根據(jù)所述列表元素展開指令，生成一空白元素，且所述空白元素的背景與目標(biāo)列表元素的背景一致，所述空白元素的大小為屏幕大小，所述空白元素的層級低于目標(biāo)列表元素、且高于其他列表元素的層級；

顯示控制模塊，用于控制所述目標(biāo)列表元素的內(nèi)容展開顯示。

本發(fā)明實施例通過動態(tài)創(chuàng)建與目標(biāo)列表元素的背景一致、且大小為屏幕大小的空白元素，且將該空白元素的層級低于目標(biāo)列表元素的層級、且高于其他列表元素的層級，然后控制列表元素的內(nèi)容展開顯示。通過本發(fā)明將使得列表元素展開時，要運動的元素少、展開動畫更加順暢。

附圖說明

圖1為現(xiàn)有技術(shù)中展開列表項一實施例的示例圖；

圖2為現(xiàn)有技術(shù)中展開列表項另一實施例的示意圖；

圖3為本發(fā)明列表元素的展開控制方法應(yīng)用于終端時的終端硬件結(jié)構(gòu)示意圖；

圖4為本發(fā)明列表元素的展開控制裝置一實施例的功能模塊示意圖；

圖5為本發(fā)明列表元素的展開過程中，動態(tài)創(chuàng)建空白元素的示例圖；

圖6為本發(fā)明列表元素的展開過程中，動態(tài)創(chuàng)建空白元素后，顯示列表元素的內(nèi)容一實施例的示例圖；

圖7為本發(fā)明列表元素的展開過程中，動態(tài)創(chuàng)建空白元素后，顯示列表元素的內(nèi)容另一實施例的示例圖；

圖8為本發(fā)明列表元素的展開過程中，動態(tài)創(chuàng)建空白元素后，顯示列表元素的內(nèi)容又一實施例的示例圖；

圖9為本發(fā)明列表元素的展開后，恢復(fù)列表顯示狀態(tài)的示例圖；

圖10為本發(fā)明列表元素的展開過程中，創(chuàng)建空白元素的具體實施例的示 例圖；

圖11為本發(fā)明列表元素的控制方法一實施例的流程示意圖；

圖12為本發(fā)明列表元素的控制方法另一實施例的流程示意圖。

本發(fā)明目的的實現(xiàn)、功能特點及優(yōu)點將結(jié)合實施例，參照附圖做進一步說明。

具體實施方式

以下結(jié)合說明書附圖及具體實施例進一步說明本發(fā)明的技術(shù)方案。應(yīng)當(dāng)理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。

本發(fā)明提供一種列表元素的展開方案，通過動態(tài)創(chuàng)建與目標(biāo)列表元素的背景一致、且大小為屏幕大小的空白元素，且將該空白元素的層級低于目標(biāo)列表元素的層級、且高于其他列表元素的層級，然后控制列表元素的內(nèi)容展開顯示。通過該方案將使得列表元素展開時，要運動的元素少、展開動畫更加順暢。

上述列表元素為列表中的每一個元素值，且多個元素值按照一定的順序排列后，組合成一個列表。由于顯示空間有限，每個列表元素的顯示區(qū)域中僅顯示部分內(nèi)容，其余內(nèi)容均設(shè)置為隱藏。需要查看列表元素的其余內(nèi)容時，則將其展開。上述列表元素可以為瀏覽器的頁面中的列表元素，也可以為終端上安裝的應(yīng)用中的列表元素，還可以為終端系統(tǒng)的列表元素。

如圖3所示，上述列表元素的展開控制方案可應(yīng)用于PC終端，也可以一個用于移動終端，當(dāng)然還可以具有列表展開功能的其他終端，在此統(tǒng)稱為終端。該終端可包括處理器101、存儲器102、用戶交互單元103、數(shù)據(jù)總線104。其中數(shù)據(jù)總線104用于終端各組件之間的數(shù)據(jù)交互。用戶交互單元103可包括顯示屏、按鍵組件、指紋錄入設(shè)備、讀卡接口、證件識別設(shè)備等等。另外，該按鍵組件可包括物理按鍵，也可包括虛擬的觸摸按鍵，在此并不做限定。存儲器102可包括內(nèi)部存儲設(shè)備，也可包括外部存儲設(shè)備，用于存儲終端需要處理的數(shù)據(jù)以及運行終端需要的數(shù)據(jù)，例如操作系統(tǒng)、列表元素的展開控制裝置等等。處理器101調(diào)用存儲器102中存儲的數(shù)據(jù)以及其他各組件，以實現(xiàn)相應(yīng)的功能，例如列表元素的展開控制等等?？梢岳斫獾氖?，若 該終端需要與其他設(shè)備通訊，還可以設(shè)置通訊模塊105。另外，圖3示出的終端各組件并不限定終端，該終端還可具有其他組件，例如電源等等。

基于上述終端，本發(fā)明提出了一種列表元素的展開控制裝置第一實施例。如圖4所示，該列表元素的展開控制裝置包括：

指令接收模塊110，用于接收列表元素展開指令，所述列表元素展開指令包括目標(biāo)列表元素；

元素生成模塊120，用于根據(jù)所述列表元素展開指令，生成一空白元素，且所述空白元素的背景與目標(biāo)列表元素的背景一致，所述空白元素的大小為屏幕大小，所述空白元素的層級低于目標(biāo)列表元素、且高于其他列表元素的層級；

顯示控制模塊130，用于控制所述目標(biāo)列表元素的內(nèi)容展開顯示。

如圖5所示，若用戶需要展開列表元素A3，則通過鼠標(biāo)或手指等等觸發(fā)顯示屏幕中的列表元素A的顯示區(qū)域，觸發(fā)列表元素展開指令。終端偵測到列表元素A3被觸發(fā)，且觸發(fā)指令為列表元素展開指令，則生成與目標(biāo)列表元素的背景一致、大小為屏幕大小的空白元素A3’，且該空白元素A3’的層級低于目標(biāo)列表元素A3的層級、且高于其他列表元素(例如，A1、A2、A4等等)的層級。然后，控制目標(biāo)列表元素的內(nèi)容展開顯示。由于空白元素的背景與目標(biāo)列表元素的背景一致，且空白元素的大小與屏幕大小，該空白元素的層級低于列表元素A的層級，則從顯示效果來看，該空白元素與目標(biāo)列表元素實際上是融為一體的。另外，由于空白元素的層級還高于其他列表元素的層級，因此該空白元素將其他列表元素覆蓋。此時，若要展開顯示列表元素A3的內(nèi)容時，則不再需要移動列表元素和其他元素，即可達到現(xiàn)有技術(shù)中展開列表元素A3的顯示效果。而且，由于列表元素展開時，相對于現(xiàn)有技術(shù)運動的列表元素少了，從而展開過程中的動畫效果更加流暢了。

本發(fā)明實施例通過動態(tài)創(chuàng)建與目標(biāo)列表元素的背景一致、且大小為屏幕大小的空白元素，且將該空白元素的層級低于目標(biāo)列表元素的層級、且高于其他列表元素的層級，然后控制列表元素的內(nèi)容展開顯示。通過本發(fā)明將使得列表元素展開時，要運動的元素少、展開動畫更加順暢。

進一步地，上述顯示控制模塊130用于：將所述目標(biāo)列表元素的內(nèi)容的 顯示屬性設(shè)置為顯示。具體為：列表元素位于列表顯示狀態(tài)時，列表元素的部分內(nèi)容顯示，其余內(nèi)容均隱藏。因此在展開顯示狀態(tài)時，將目標(biāo)列表元素的內(nèi)容的顯示屬性均設(shè)置為顯示，即可將被隱藏的內(nèi)容顯示出來。由于空白元素與目標(biāo)列表元素從顯示效果上已經(jīng)融為一體了，因此該顯示的內(nèi)容如同展開顯示在空白元素上，也即整個屏幕上，從而達到展開顯示的效果。如圖6所示，該列表具有4個列表元素，即列表元素A1、列表元素A2、列表元素A3、列表元素A4。該列表元素中均僅顯示各列表元素對應(yīng)的標(biāo)題。若用戶希望瀏覽列表元素A3對應(yīng)的內(nèi)容，則可以出發(fā)展開指令。終端則動態(tài)產(chǎn)生空白元素，并控制列表元素A3的內(nèi)容均顯示出來。

由圖6可知，該列表元素的內(nèi)容僅僅是被控制進行顯示，而對于顯示位置是否合適則沒有考慮。因此，進一步地，為了更好地顯示效果，上述顯示控制模塊130還用于：根據(jù)目標(biāo)列表元素的內(nèi)容，調(diào)整所述內(nèi)容在目標(biāo)列表元素中的顯示位置。具體為：根據(jù)目標(biāo)列表元素的顯示內(nèi)容，對其進行上移或下移處理，使其位于屏幕的最佳位置。例如，列表元素的顯示內(nèi)容較多并占滿整個屏幕時，則將列表元素的內(nèi)容整體移動，以使從屏幕的最上部開始顯示列表元素的顯示內(nèi)容。再例如，列表元素的顯示內(nèi)容較小且未占滿整個屏幕時，則將列表元素的內(nèi)容整體移動，以使列表元素的內(nèi)容顯示在屏幕的中部。如圖7所示，當(dāng)列表元素A3被展開時，由于該列表元素A3的內(nèi)容較多，因此，將該列表元素A3的內(nèi)容由屏幕的上部位置開始顯示。當(dāng)然，若該列表元素A3的內(nèi)容非常多，且一個屏幕無法顯示完，則可以設(shè)置拖動功能。即用戶可以拖動頁面，終端偵測到拖動指令時，將其余的內(nèi)容根據(jù)拖動軌跡顯示在屏幕上。如圖8所示，當(dāng)列表元素A2被展開時，由于該列表元素A2的內(nèi)容較少，因此將該列表元素A2的內(nèi)容顯示在屏幕的中部位置。

進一步地，上述顯示控制模塊130還用于：接收到目標(biāo)列表元素恢復(fù)指令時，刪除所述空白元素及其層級，并控制目標(biāo)列表元素的內(nèi)容恢復(fù)至列表顯示狀態(tài)。

如圖9所示，將列表元素A展開顯示后，用戶可通過列表元素的展開顯示區(qū)域中的“關(guān)閉”按鈕或者通過鼠標(biāo)或者手指等單擊該顯示區(qū)域，則觸發(fā) 列表回復(fù)指令。終端偵測到該列表回復(fù)指令時，則刪除所述空白元素及其層級，同時控制目標(biāo)列表元素的內(nèi)容恢復(fù)至列表顯示狀態(tài)。即設(shè)置列表元素在列表顯示狀態(tài)中需隱藏的內(nèi)容的顯示屬性設(shè)置為隱藏，需顯示的內(nèi)容的顯示屬性設(shè)置為顯示。由于該空白元素及其層級被刪除，則其余列表元素不再被覆蓋，即與恢復(fù)列表顯示狀態(tài)的列表元素一同顯示在屏幕上。

進一步地，上述元素生成模塊120用于：根據(jù)所述列表元素展開指令，生成目標(biāo)列表元素的背景及大小均一致的空白元素；將所述空白元素的大小設(shè)置為屏幕大小。具體地，如圖10所示，根據(jù)列表元素展開指令，則動態(tài)生成一空白元素，且該空白元素的背景與目標(biāo)列表元素的背景一致，大小可以為默認(rèn)大小，也可以與目標(biāo)列表元素的大小一致。然后將空白元素的大小設(shè)置為屏幕大小，即將該空白元素的高度設(shè)置為屏幕高度，從而使得該空白元素可以將其他列表元素覆蓋，且位于目標(biāo)列表元素下方。由于空白元素的背景與目標(biāo)列表元素的背景一致，則該空白元素與目標(biāo)列表元素從顯示效果上融為一體。因此，控制目標(biāo)列表元素的內(nèi)容進行顯示時，該顯示的內(nèi)容就如同顯示在空白元素上，也即整個屏幕上，從而達到列表元素的展開效果。

可以理解的是，上述圖例中顯示的列表元素的背景均為白色背景或無背景。但是并不限定本發(fā)明的列表元素具有其他背景。另外，上述列表元素的顯示區(qū)域的邊界是不顯示的，圖中的邊界顯示只是為了方便理解，并不限定本發(fā)明。

對應(yīng)地，本發(fā)明提出一種列表元素的展開控制方法。如圖11所示，該列表元素的展開控制方法包括以下步驟：

步驟S110、接收列表元素展開指令，所述列表元素展開指令包括目標(biāo)列表元素；

步驟S120、根據(jù)所述列表元素展開指令，生成一空白元素，且所述空白元素的背景與目標(biāo)列表元素的背景一致，所述空白元素的大小為屏幕大小，所述空白元素的層級低于目標(biāo)列表元素、且高于其他列表元素的層級；

步驟S130、控制所述目標(biāo)列表元素的內(nèi)容展開顯示。

如圖5所示，若用戶需要展開列表元素A3，則通過鼠標(biāo)或手指等等觸 發(fā)顯示屏幕中的列表元素A的顯示區(qū)域，觸發(fā)列表元素展開指令。終端偵測到列表元素A3被觸發(fā)，且觸發(fā)指令為列表元素展開指令，則生成與目標(biāo)列表元素的背景一致、大小為屏幕大小的空白元素A3’，且該空白元素A3’的層級低于目標(biāo)列表元素A3的層級、且高于其他列表元素(例如，A1、A2、A4等等)的層級。然后，控制目標(biāo)列表元素的內(nèi)容展開顯示。由于空白元素的背景與目標(biāo)列表元素的背景一致，且空白元素的大小與屏幕大小，該空白元素的層級低于列表元素A的層級，則從顯示效果來看，該空白元素與目標(biāo)列表元素實際上是融為一體的。另外，由于空白元素的層級還高于其他列表元素的層級，因此該空白元素將其他列表元素覆蓋。此時，若要展開顯示列表元素A3的內(nèi)容時，則不再需要移動列表元素和其他元素，即可達到現(xiàn)有技術(shù)中展開列表元素A3的顯示效果。而且，由于列表元素展開時，相對于現(xiàn)有技術(shù)運動的列表元素少了，從而展開過程中的動畫效果更加流暢了。

本發(fā)明實施例通過動態(tài)創(chuàng)建與目標(biāo)列表元素的背景一致、且大小為屏幕大小的空白元素，且將該空白元素的層級低于目標(biāo)列表元素的層級、且高于其他列表元素的層級，然后控制列表元素的內(nèi)容展開顯示。通過本發(fā)明將使得列表元素展開時，要運動的元素少、展開動畫更加順暢。

進一步地，上述步驟S130包括：將所述目標(biāo)列表元素的內(nèi)容的顯示屬性設(shè)置為顯示。具體為：列表元素位于列表顯示狀態(tài)時，列表元素的部分內(nèi)容顯示，其余內(nèi)容均隱藏。因此在展開顯示狀態(tài)時，將目標(biāo)列表元素的內(nèi)容的顯示屬性均設(shè)置為顯示，即可將被隱藏的內(nèi)容顯示出來。由于空白元素與目標(biāo)列表元素從顯示效果上已經(jīng)融為一體了，因此該顯示的內(nèi)容如同展開顯示在空白元素上，也即整個屏幕上，從而達到展開顯示的效果。如圖6所示，該列表具有4個列表元素，即列表元素A1、列表元素A2、列表元素A3、列表元素A4。該列表元素中均僅顯示各列表元素對應(yīng)的標(biāo)題。若用戶希望瀏覽列表元素A3對應(yīng)的內(nèi)容，則可以出發(fā)展開指令。終端則動態(tài)產(chǎn)生空白元素，并控制列表元素A3的內(nèi)容均顯示出來。

由圖6可知，該列表元素的內(nèi)容僅僅是被控制進行顯示，而對于顯示位置是否合適則沒有考慮。因此，進一步地，為了更好地顯示效果，上述步驟 S130還包括：根據(jù)所述目標(biāo)列表元素的內(nèi)容，調(diào)整所述內(nèi)容在目標(biāo)列表元素中的顯示位置。具體為：根據(jù)目標(biāo)列表元素的顯示內(nèi)容，對其進行上移或下移處理，使其位于屏幕的最佳位置。例如，列表元素的顯示內(nèi)容較多并占滿整個屏幕時，則將列表元素的內(nèi)容整體移動，以使從屏幕的最上部開始顯示列表元素的顯示內(nèi)容。再例如，列表元素的顯示內(nèi)容較小且未占滿整個屏幕時，則將列表元素的內(nèi)容整體移動，以使列表元素的內(nèi)容顯示在屏幕的中部。如圖7所示，當(dāng)列表元素A3被展開時，由于該列表元素A3的內(nèi)容較多，因此，將該列表元素A3的內(nèi)容由屏幕的上部位置開始顯示。當(dāng)然，若該列表元素A3的內(nèi)容非常多，且一個屏幕無法顯示完，則可以設(shè)置拖動功能。即用戶可以拖動頁面，終端偵測到拖動指令時，將其余的內(nèi)容根據(jù)拖動軌跡顯示在屏幕上。如圖8所示，當(dāng)列表元素A2被展開時，由于該列表元素A2的內(nèi)容較少，因此將該列表元素A2的內(nèi)容顯示在屏幕的中部位置。

進一步地，如圖12所示，上述列表元素的展開控制方法還包括：

步驟S140、接收到目標(biāo)列表元素恢復(fù)指令時，刪除所述空白元素及其層級，并控制目標(biāo)列表元素的內(nèi)容恢復(fù)至列表顯示狀態(tài)。

如圖9所示，將列表元素A展開顯示后，用戶可通過列表元素的展開顯示區(qū)域中的“關(guān)閉”按鈕或者通過鼠標(biāo)或者手指等單擊該顯示區(qū)域，則觸發(fā)列表回復(fù)指令。終端偵測到該列表回復(fù)指令時，則刪除所述空白元素及其層級，同時控制目標(biāo)列表元素的內(nèi)容恢復(fù)至列表顯示狀態(tài)。即設(shè)置目標(biāo)列表元素在列表顯示狀態(tài)中需隱藏的內(nèi)容的顯示屬性設(shè)置為隱藏，需顯示的內(nèi)容的顯示屬性設(shè)置為顯示。由于該空白元素及其層級被刪除，則其余列表元素不再被覆蓋，即與恢復(fù)列表顯示狀態(tài)的列表元素一同顯示在屏幕上。

進一步地，上述步驟S120中根據(jù)所述列表元素展開指令，生成與目標(biāo)列表元素的背景一致、大小為屏幕大小的空白元素可包括：

根據(jù)所述列表元素展開指令，生成與目標(biāo)列表元素的背景及大小均一致的空白元素；將所述空白元素的大小設(shè)置為屏幕大小。

具體地，具體地，如圖10所示，根據(jù)列表元素展開指令，則動態(tài)生成一空白元素，且該空白元素的背景與目標(biāo)列表元素的背景一致，大小可以為 默認(rèn)大小，也可以與目標(biāo)列表元素的大小一致。然后將空白元素的大小設(shè)置為屏幕大小，即將該空白元素的高度設(shè)置為屏幕高度，從而使得該空白元素可以將其他列表元素覆蓋，且位于目標(biāo)列表元素下方。由于空白元素的背景與目標(biāo)列表元素的背景一致，則該空白元素與目標(biāo)列表元素從顯示效果上融為一體。因此，控制目標(biāo)列表元素的內(nèi)容進行顯示時，該顯示的內(nèi)容就如同顯示在空白元素上，也即整個屏幕上，從而達到列表元素的展開效果。

可以理解的是，上述圖例中顯示的列表元素的背景均為白色背景或無背景。但是并不限定本發(fā)明的列表元素具有其他背景。另外，上述列表元素的顯示區(qū)域的邊界是不顯示的，圖中的邊界顯示只是為了方便理解，并不限定本發(fā)明。

以上所述僅為本發(fā)明的優(yōu)選實施例，并非因此限制其專利范圍，凡是利用本發(fā)明說明書及附圖內(nèi)容所作的等效結(jié)構(gòu)或等效流程變換，直接或間接運用在其他相關(guān)的技術(shù)領(lǐng)域，均同理包括在本發(fā)明的專利保護范圍內(nèi)。