本發(fā)明涉及信息技術領域，尤其涉及一種頁面表格布局方法及裝置。

背景技術：

頁面表格布局插件，如Gridstack插件，可以實現(xiàn)頁面表格布局。頁面表格布局插件通常按照固定的列數(shù)分割頁面，如將頁面固定的分割為12列，因此每個單元格的寬度是固定的，單元格之間的水平間距也是固定的。在實際的頁面表格布局時，用戶只需要提供小部件布局即可。

目前，在頁面表格布局時，通常通過頁面表格布局插件提供的單元格之間的固定水平間距進行頁面布局。然而，用戶對頁面表格布局的需要可能與頁面表格布局插件提供的固定單元格之間的水平間距不相同，若按照頁面表格布局插件提供的固定單元格之間的水平間距進行頁面表格布局，會造成頁面表格布局不準確，從而導致頁面表格布局的準確率較低。然而，目前頁面表格布局插件未提供調整單元格之間水平間距的配置參數(shù)。

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

鑒于上述問題，提出了本發(fā)明以便提供一種克服上述問題或者至少部分地解決上述問題的頁面表格布局方法及裝置。

依據(jù)本發(fā)明的一個方面，本發(fā)明提出了一種頁面表格布局方法，包括：

當接收到頁面表格布局指令時，初始化頁面表格布局插件，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距；

通過所述頁面表格布局插件提供的預置添加函數(shù)和所述需要添加小部件的屬性信息，在頁面中添加小部件；

通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，更新所述添加的小部件。

依據(jù)本發(fā)明的另一個方面，本發(fā)明提出了一種頁面表格布局裝置，包 括：

初始化單元，用于當接收到頁面表格布局指令時，初始化頁面表格布局插件，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距；

添加單元，用于通過所述頁面表格布局插件提供的預置添加函數(shù)和所述需要添加小部件的屬性信息，在頁面中添加小部件；

更新單元，用于通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，更新所述添加的小部件。

借由上述技術方案，本發(fā)明提供的一種頁面表格布局方法及裝置。當接收到頁面表格布局指令時，初始化頁面表格布局插件，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距；通過頁面表格布局插件提供的預置添加函數(shù)和所述需要添加小部件的屬性信息，在頁面中添加小部件；通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，更新所述添加的小部件。本發(fā)明實施例，通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，，可以設置每個單元格的水平間距，從而能夠實現(xiàn)按照用戶的需求進行頁面布局，保證頁面表格布局的準確性，提升頁面表格布局的準確率。

附圖說明

通過閱讀下文優(yōu)選實施方式的詳細描述，各種其他的優(yōu)點和益處對于本領域普通技術人員將變得清楚明了。附圖僅用于示出優(yōu)選實施方式的目的，而并不認為是對本發(fā)明的限制。而且在整個附圖中，用相同的參考符號表示相同的部件。在附圖中：

圖1示出了本發(fā)明實施例提供的一種頁面表格布局方法的流程圖；

圖2示出了本發(fā)明實施例提供的另一種頁面表格布局方法的流程圖；

圖3示出了本發(fā)明實施例提供的一種頁面表格布局裝置的結構示意圖；

圖4示出了本發(fā)明實施例提供的一種頁面表格布局裝置的結構示意圖。

具體實施方式

下面將參照附圖更詳細地描述本公開的示例性實施例。雖然附圖中顯示了本公開的示例性實施例，然而應當理解，可以以各種形式實現(xiàn)本公開而不應被這里闡述的實施例所限制。相反，提供這些實施例是為了能夠更透徹地理解本公開，并且能夠將本公開的范圍完整的傳達給本領域的技術人員。

本發(fā)明實施例提供了一種頁面表格布局方法，如圖1所示，該方法包括：

101、當接收到頁面表格布局指令時，初始化頁面表格布局插件。

其中，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距。所述頁面表格布局插件可以為Gridstack插件。Gridstack插件是一個jQuery插件，可以實現(xiàn)可拖和放的，多列網(wǎng)格的插件化布局。Gridstack插件允許用戶構建可拖動的、響應式的頁面布局。所述小部件用于承載和顯示頁面元素，頁面元素可以為用戶需要在頁面上顯示的圖片等。所述小部件的屬性信息可以為小部件的位置信息和尺寸信息。所述尺寸信息可以為小部件的寬度和高度。所述水平間距為單元格的左右間距。

需要說明的是，頁面表格布局插件通常會將頁面按照N行×M列進行分割，分割成N×M個單元格。在頁面表格布局插件中根據(jù)單元格進行小部件的添加。頁面表格布局插件在配置參數(shù)中未提供設置每個單元格左右間距的配置參數(shù)。通常每個單元格的左右間距的默認值分別為10個像素點。

所述單元格的預置水平間距為用戶輸入的單元格水平間距，如用戶需要設置每個單元格的水平間距為15個像素點。

102、通過頁面表格布局插件提供的預置添加函數(shù)和需要添加小部件的屬性信息，在頁面中添加小部件。

其中，所述預置添加函數(shù)可以為add_widget函數(shù)，具體可以為add_widget(x，y，width，height)。x，y表示小部件在頁面中的位置，width為在頁面中跨的行，height為在頁面中跨的列。若小部件的屬性信息為x＝0，y＝0，width＝1，height＝2，單元格的寬度為8.3個像素點、高度為10個像素點，則通過調用add_widget(0，0，1，2)，在頁面中添加的小部件為從頁 面左上角開始寬度為16.6個像素點，高度為10個像素點的表格。每個單元格之間的默認水平間距為10個像素點。

103、通過小部件對應的層疊樣式表和單元格的預置水平間距，更新添加的小部件。

例如，在頁面中添加的小部件為從頁面左上角開始寬度為16.6個像素點，高度為10個像素點的表格，單元格的預置水平間距為10個像素點，通過所述小部件對應的層疊樣式表，即通過小部件對應的層疊樣式表的right屬性(右邊緣)和left屬性(左邊緣)，調整小部件的水平間距，將頁面中單元格的水平間距更新為15個像素點。

對于本發(fā)明實施例，通過所述小部件對應的層疊樣式表將頁面中單元格的水平間距，可以設置每個單元格的水平間距，從而能夠實現(xiàn)按照用戶的需求進行頁面布局，保證頁面表格布局的準確性，提升頁面表格布局的準確率。

本發(fā)明實施例提供的一種頁面表格布局方法。當接收到頁面表格布局指令時，初始化頁面表格布局插件，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距；通過所述頁面表格布局插件提供的預置添加函數(shù)和所述需要添加小部件的屬性信息，在頁面中添加小部件；通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，更新所述添加的小部件。本發(fā)明實施例，通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，可以設置每個單元格的水平間距，從而能夠實現(xiàn)按照用戶的需求進行頁面布局，保證頁面表格布局的準確性，提升頁面表格布局的準確率。

本發(fā)明實施例提供了另一種頁面表格布局方法，如圖2所示，該方法包括：

201、當接收到頁面表格布局指令時，初始化頁面表格布局插件。

其中，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距。所述頁面表格布局插件可以為Gridstack插件。所述小部件的屬性信息包括小部件的位置信息和小部件的尺寸信息。所述尺寸信息可以為小部件的寬度和高度。所述水平間距為單元格的左右間距。所 述單元格的預置水平間距為用戶輸入的單元格水平間距，如用戶需要設置每個單元格的水平間距為15個像素點。

202、通過頁面表格布局插件提供的預置添加函數(shù)和需要添加小部件的屬性信息，在頁面中添加小部件。

對于本發(fā)明實施例，在步驟202之前具體還可以包括：獲取所述頁面表格布局插件中的拖動框；配置所述拖動框對應的層疊樣式表的水平間距。其中，頁面表格布局插件只提供一個拖動框，拖動框對應的層疊樣式表的類中含有placeholder-content，通過拖動框對應的層疊樣式表的right屬性(右邊緣)和left屬性(左邊緣)，調整拖動框的水平間距。通過配置所述拖動框對應的層疊樣式表的水平間距，能夠對拖動框的水平間距進行調整，從而能夠避免拖動框遮蓋單元格，保證頁面布局的美觀。

對于本發(fā)明實施例，步驟202具體可以為：通過頁面表格布局插件提供的add_widget函數(shù)和需要添加小部件的屬性信息，在頁面中添加小部件

203、通過小部件對應的層疊樣式表和單元格的預置水平間距，更新添加的小部件。

對于本發(fā)明實施例，通過所述小部件對應的層疊樣式表將頁面中單元格的水平間距，可以設置每個單元格的水平間距，從而能夠實現(xiàn)按照用戶的需求進行頁面布局，保證頁面表格布局的準確性，提升頁面表格布局的準確率。

204、將小部件對應的可縮放圖標提示調整到小部件的預置位置。

對于本發(fā)明實施例，更新完添加的小部件后，小部件上的可縮放圖標會保持在原始的位置，若可縮放圖標會保持在原始的位置會影響頁面的展示效果。因此，將可縮放圖標調整小部件右下角的resizable(可變調整尺寸提示的位置上，能夠保證頁面的展示效果，提升用戶的體驗。

需要說明的是，在步驟204之后，具體還可以包括：獲取小部件相鄰的頁面元素中，層疊樣式表的類包含ui-resizable-se的元素，并設置該元素的右間距，使得該元素的右間距與小部件的右間距相同。通過將小部件相鄰的頁面元素中，層疊樣式表的類包含ui-resizable-se的元素的右間距設置為小部件的右間距，能夠保證頁面的展示效果，提升用戶的體驗。

本發(fā)明實施例提供的另一種頁面表格布局方法。當接收到頁面表格布局指令時，初始化頁面表格布局插件，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距；通過頁面表格布局插件提供的預置添加函數(shù)和所述需要添加小部件的屬性信息，在頁面中添加小部件；通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，更新所述添加的小部件。本發(fā)明實施例，通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，，可以設置每個單元格的水平間距，從而能夠實現(xiàn)按照用戶的需求進行頁面布局，保證頁面表格布局的準確性，提升頁面表格布局的準確率。

進一步地，本發(fā)明實施例提供了一種頁面表格布局裝置，如圖3所示，該裝置包括：初始化單元31、添加單元32、更新單元33。

所述初始化單元31，用于當接收到頁面表格布局指令時，初始化頁面表格布局插件，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距。

所述添加單元32，用于通過所述頁面表格布局插件提供的預置添加函數(shù)和所述需要添加小部件的屬性信息，在頁面中添加小部件。

所述更新單元33，用于通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，更新所述添加的小部件。

如圖4，所述裝置還包括：獲取單元34和配置單元35。

所述獲取單元34，用于獲取所述頁面表格布局插件中的拖動框。

所述配置單元35，用于配置所述拖動框對應的層疊樣式表的水平間距。

所述添加單元32，具體用于通過所述頁面表格布局插件提供的add_widget函數(shù)和所述需要添加小部件的屬性信息，在頁面中與所述需要添加小部件的位置信息對應的位置添加小部件。

所述裝置還包括：調整單元36。

調整單元36，用于調整單元，用于將所述小部件對應的可縮放圖標提示調整到所述小部件的預置位置。

其中，所述單元格的預置水平間距為用戶輸入的單元格的水平間距。

該裝置實施例與前述方法實施例對應，為便于閱讀，本裝置實施例不 再對前述方法實施例中的細節(jié)內容進行逐一贅述，但應當明確，本實施例中的裝置能夠對應實現(xiàn)前述方法實施例中的全部內容。

本發(fā)明實施例提供的一種頁面表格布局裝置。當接收到頁面表格布局指令時，初始化頁面表格布局插件，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距；通過所述頁面表格布局插件提供的預置添加函數(shù)和所述需要添加小部件的屬性信息，在頁面中添加小部件；通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，更新所述添加的小部件。本發(fā)明實施例，通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，，可以設置每個單元格的水平間距，從而能夠實現(xiàn)按照用戶的需求進行頁面布局，保證頁面表格布局的準確性，提升頁面表格布局的準確率。

所述頁面表格布局裝置包括處理器和存儲器，上述初始化單元、添加單元、更新單元、獲取單元、配置單元和調整單元等均作為程序單元存儲在存儲器中，由處理器執(zhí)行存儲在存儲器中的上述程序單元來實現(xiàn)相應的功能。

處理器中包含內核，由內核去存儲器中調取相應的程序單元。內核可以設置一個或以上，通過調整內核參數(shù)來設置單元格的水平間距，實現(xiàn)按照用戶的需求進行頁面布局，保證頁面表格布局的準確性，提升頁面表格布局的準確率。

存儲器可能包括計算機可讀介質中的非永久性存儲器，隨機存取存儲器(RAM)和/或非易失性內存等形式，如只讀存儲器(ROM)或閃存(flash RAM)，存儲器包括至少一個存儲芯片。

本申請還提供了一種計算機程序產(chǎn)品，當在數(shù)據(jù)處理設備上執(zhí)行時，適于執(zhí)行初始化有如下方法步驟的程序代碼：

當接收到頁面表格布局指令時，初始化頁面表格布局插件，所述頁面表格布局指令攜帶需要添加小部件的屬性信息以及單元格的預置水平間距；

通過所述頁面表格布局插件提供的預置添加函數(shù)和所述需要添加小部件的屬性信息，在頁面中添加小部件；

通過所述小部件對應的層疊樣式表和所述單元格的預置水平間距，更新所述添加的小部件。

本領域內的技術人員應明白，本申請的實施例可提供為方法、系統(tǒng)、或計算機程序產(chǎn)品。因此，本申請可采用完全硬件實施例、完全軟件實施例、或結合軟件和硬件方面的實施例的形式。而且，本申請可采用在一個或多個其中包含有計算機可用程序代碼的計算機可用存儲介質(包括但不限于磁盤存儲器、CD-ROM、光學存儲器等)上實施的計算機程序產(chǎn)品的形式。

本申請是參照根據(jù)本申請實施例的方法、設備(系統(tǒng))、和計算機程序產(chǎn)品的流程圖和/或方框圖來描述的。應理解可由計算機程序指令實現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結合?？商峁┻@些計算機程序指令到通用計算機、專用計算機、嵌入式處理機或其他可編程數(shù)據(jù)處理設備的處理器以產(chǎn)生一個機器，使得通過計算機或其他可編程數(shù)據(jù)處理設備的處理器執(zhí)行的指令產(chǎn)生用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的裝置。

這些計算機程序指令也可存儲在能引導計算機或其他可編程數(shù)據(jù)處理設備以特定方式工作的計算機可讀存儲器中，使得存儲在該計算機可讀存儲器中的指令產(chǎn)生包括指令裝置的制造品，該指令裝置實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能。

這些計算機程序指令也可裝載到計算機或其他可編程數(shù)據(jù)處理設備上，使得在計算機或其他可編程設備上執(zhí)行一系列操作步驟以產(chǎn)生計算機實現(xiàn)的處理，從而在計算機或其他可編程設備上執(zhí)行的指令提供用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的步驟。

在一個典型的配置中，計算設備包括一個或多個處理器(CPU)、輸入/輸出接口、網(wǎng)絡接口和內存。

存儲器可能包括計算機可讀介質中的非永久性存儲器，隨機存取存儲器(RAM)和/或非易失性內存等形式，如只讀存儲器(ROM)或閃存(flash RAM)。存儲器是計算機可讀介質的示例。

計算機可讀介質包括永久性和非永久性、可移動和非可移動媒體可以由任何方法或技術來實現(xiàn)信息存儲。信息可以是計算機可讀指令、數(shù)據(jù)結構、程序的模塊或其他數(shù)據(jù)。計算機的存儲介質的例子包括，但不限于相變內存(PRAM)、靜態(tài)隨機存取存儲器(SRAM)、動態(tài)隨機存取存儲器(DRAM)、其他類型的隨機存取存儲器(RAM)、只讀存儲器(ROM)、電可擦除可編程只讀存儲器(EEPROM)、快閃記憶體或其他內存技術、只讀光盤只讀存儲器(CD-ROM)、數(shù)字多功能光盤(DVD)或其他光學存儲、磁盒式磁帶，磁帶磁磁盤存儲或其他磁性存儲設備或任何其他非傳輸介質，可用于存儲可以被計算設備訪問的信息。按照本文中的界定，計算機可讀介質不包括暫存電腦可讀媒體(transitory media)，如調制的數(shù)據(jù)信號和載波。

以上僅為本申請的實施例而已，并不用于限制本申請。對于本領域技術人員來說，本申請可以有各種更改和變化。凡在本申請的精神和原理之內所作的任何修改、等同替換、改進等，均應包含在本申請的權利要求范圍之內。