[發(fā)明專利]頁(yè)面表格布局方法及裝置

在審

• 申請(qǐng)?zhí)枺?/td>: 201510729288.0
• 申請(qǐng)日: 2015-10-30
• 公開(kāi)（公告）號(hào): CN106649228A
• 公開(kāi)（公告）日: 2017-05-10
• 發(fā)明（設(shè)計(jì)）人: 張昭
• 申請(qǐng)（專利權(quán)）人: 北京國(guó)雙科技有限公司
• 主分類號(hào): G06F17/24
• 分類號(hào): G06F17/24
• 代理公司: 北京鼎佳達(dá)知識(shí)產(chǎn)權(quán)代理事務(wù)所(普通合伙)11348
• 代理人: 王偉鋒,劉鐵生

技術(shù)領(lǐng)域

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

背景技術(shù)

頁(yè)面表格布局插件，如Gridstack插件，可以實(shí)現(xiàn)頁(yè)面表格布局。頁(yè)面表格布局插件通常按照固定的列數(shù)分割頁(yè)面，如將頁(yè)面固定的分割為12列，因此每個(gè)單元格的寬度是固定的。

目前，在頁(yè)面表格布局時(shí)，通常通過(guò)頁(yè)面表格布局插件提供的固定單元格寬度進(jìn)行頁(yè)面布局。然而，用戶可能不按照頁(yè)面表格布局插件設(shè)置的固定列數(shù)的整數(shù)倍切割頁(yè)面，若根據(jù)頁(yè)面表格布局插件提供的固定單元格寬度進(jìn)行頁(yè)面表格布局，布局的頁(yè)面表格在展示時(shí)，可能會(huì)出現(xiàn)變形，造成頁(yè)面表格布局不準(zhǔn)確，從而導(dǎo)致頁(yè)面表格布局的準(zhǔn)確率較低。然而，目前頁(yè)面表格布局插件未提供設(shè)置每個(gè)單元格寬度的配置參數(shù)。

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

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

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

當(dāng)接收到頁(yè)面表格布局指令時(shí)，初始化頁(yè)面表格布局插件，所述頁(yè)面表格布局指令攜帶小部件的屬性信息以及單元格的預(yù)置寬度；

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

通過(guò)小部件對(duì)應(yīng)的層疊樣式表和所述單元格的預(yù)置寬度，更新所述添加的小部件。

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

初始化單元，用于當(dāng)接收到頁(yè)面表格布局指令時(shí)，初始化頁(yè)面表格布 局插件，所述頁(yè)面表格布局指令攜帶小部件的屬性信息以及單元格的預(yù)置寬度；

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

更新單元，用于通過(guò)小部件對(duì)應(yīng)的層疊樣式表和所述單元格的預(yù)置寬度，更新所述頁(yè)面中添加小部件。

借由上述技術(shù)方案，本發(fā)明提供的一種頁(yè)面表格布局方法及裝置。當(dāng)接收到頁(yè)面表格布局指令時(shí)，初始化頁(yè)面表格布局插件，所述頁(yè)面表格布局指令攜帶小部件的屬性信息以及單元格的預(yù)置寬度；通過(guò)所述頁(yè)面表格布局插件提供的預(yù)置添加函數(shù)和所述小部件的屬性信息，在頁(yè)面中添加小部件；通過(guò)小部件對(duì)應(yīng)的層疊樣式表和所述單元格的預(yù)置寬度，更新所述添加的小部件。本發(fā)明實(shí)施例，通過(guò)小部件對(duì)應(yīng)的層疊樣式表和所述單元格的預(yù)置寬度，可以設(shè)置每個(gè)單元格寬度，從而能夠?qū)崿F(xiàn)按照用戶的需求進(jìn)行頁(yè)面布局，保證頁(yè)面表格布局的準(zhǔn)確性，提升頁(yè)面表格布局的準(zhǔn)確率。

附圖說(shuō)明

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

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

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

圖3示出了本發(fā)明實(shí)施例提供的一種頁(yè)面表格布局裝置的結(jié)構(gòu)示意圖；

圖4示出了本發(fā)明實(shí)施例提供的一種頁(yè)面表格布局裝置的結(jié)構(gòu)示意圖。

具體實(shí)施方式

下面將參照附圖更詳細(xì)地描述本公開(kāi)的示例性實(shí)施例。雖然附圖中顯示了本公開(kāi)的示例性實(shí)施例，然而應(yīng)當(dāng)理解，可以以各種形式實(shí)現(xiàn)本公開(kāi)而不應(yīng)被這里闡述的實(shí)施例所限制。相反，提供這些實(shí)施例是為了能夠更透徹地理解本公開(kāi)，并且能夠?qū)⒈竟_(kāi)的范圍完整的傳達(dá)給本領(lǐng)域的技術(shù)人員。

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

101、當(dāng)接收到頁(yè)面表格布局指令時(shí)，初始化頁(yè)面表格布局插件。

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