CN101140496A - 一种调整网页中栏框的方法及装置 - Google Patents

Abstract

本发明公开了一种调整网页中栏框的方法，用于实现网页中栏框大小的调整。所述方法为：在单一页面中设置有栏框，并且将所述页面设置为自适应调整状态；通过浏览器监听鼠标事件，并获知鼠标拖动的栏框及拖动后该栏框边界在所述页面的位置；根据拖动后所述栏框边界的位置，调整该栏框在所述页面中的大小。本发明还公开了一种装置。

Description

一种调整网页中栏框的方法及装置

技术领域

本发明涉及计算机领域，特别是涉及调整网页中栏框的方法及装置。

背景技术

随着互联网的发展，个人网页、博客和个人空间等服务得到了广泛的应用。这些业务的特点是主要面向普通用户，所以需要向用户提供网页形式的模版，便于普通用户得到个性化的服务。但是目前向用户提供的模版是固定的，用户只能从备选的几个模版中选择一种，参见图1所示，模版中的栏框大小及数目均不可调。

现有技术之一是办公软件中的文本编辑工具WORD，其中使用了标尺和游标，参见图2所示，其游标的作用是限制可编辑页面的大小。并且，WORD中的标尺是在确定页面的大小后以厘米的形式确定页面的大小。以及，由于受到网页协议的限制，通过WORD中的标尺及游标调整页面大小的方法不能直接应用在调整网页中栏框的方法。

现有技术之二是网页设计中的框架结构(称frame)，框架结构中的框的大小可根据鼠标事件自动调节，但是采用框架结构的页面是一种复合页面，即包含框架结构的页面是主页面，每个框中必须嵌入一个页面(即子页面)，所以一个复合页面至少由一个主页面和一个子页面构成。该方法中通过鼠标对框的调整相当于对页面大小的调整，不能直接应用于单一页面中的栏框调整，并且该方法无法改变栏框的数目。

发明内容

本发明实施例提供一种调整网页中栏框的方法及装置，用于实现单一网页中栏框大小的调整。

一种调整网页中栏框的方法，在单一页面中设置有栏框，并且将所述页面设置为自适应调整状态，以及所述方法包括以下步骤：

通过浏览器监听鼠标事件，并获知鼠标拖动的栏框及拖动后该栏框边界在所述页面的位置；

根据拖动后所述栏框边界的位置，调整该栏框在所述页面中的大小。

一种用于调整网页中栏框的装置，所述网页为单一页面且处于自适应调整状态，以及所述装置包括：

监听模块，用于通过浏览器监听鼠标事件，并获知鼠标拖动的栏框及拖动后该栏框边界在所述页面的位置；

处理模块，用于根据拖动后该栏框边界的位置，调整该栏框在所述页面中的大小。

本发明实施例通过监听鼠标事件来确定对单一页面中栏框的调整，实现了用户可任意调整栏宽和栏高。

附图说明

图1为现有技术中提供的模板的示意图；

图2为现有技术中WORD标尺的示意图；

图3为本发明实施例中调整栏框的主要方法流程图；

图4为本发明实施例中页面实例的示意图；

图5为本发明实施例中关于监听鼠标过程的详细方法流程图；

图6为本发明实施例中关于隐藏或输出文字过程的详细方法流程图；

图7为本发明实施例中关于隐藏图片的示意图；

图8为本发明实施例中关于调整以删除栏框的详细方法流程图；

图9为本发明实施例中关于调整以增加栏框的详细方法流程图；

图10为本发明实施例中增加栏框后的示意图；

图11为本发明实施例中通过游标调整栏框的详细方法流程图；

图12为本发明实施例中采用标尺的模板的示意图；

图13为本发明实施例中通过游标增加栏框的详细方法流程图；

图14为本发明实施例中装置的结构图。

具体实施方式

本发明实施例通过鼠标调整单一网页中的栏框，根据通过浏览器监听到的鼠标事件确定栏框调整后的大小或位置，实现栏框大小的可调。

本发明实施例中的网页是基于web协议的单一页面。栏框是一种用于划分区域的矩形框，具体如表格(table)或块文字(可称DIV，一种以块为控制单元的结构)等。所述的矩形框构成了栏框的边界。栏框的宽度(简称栏宽)是指栏框在水平方向上的长度，栏框的高度(简称栏高)是指栏框在竖直方向上的长度。由于网页的实际大小与显示器的分辨率及显示窗体的大小有关，所以网页设计中通常使用百分比来确定大小，即页面的宽和高均为100％。

参见图3，本实施例中调整栏框的主要方法流程如下：

预先在单一页面中设置至少一个栏框，并且将所述页面设置为自适应调整状态，具体可通过样式(CSS)实现自适应调整。

步骤301：用户通过浏览器浏览网页，并通过鼠标对网页中的栏框及内容(包括文字、图片和图像等)进行编辑。

步骤302：通过浏览器监听鼠标事件。鼠标事件包括鼠标的位置、移动鼠标、拖动鼠标、松开鼠标、单击选择键(通常为左键)和单击属性键(通常为右键)等。

步骤303：根据监听到的鼠标事件获知鼠标拖动的栏框及拖动后该栏框边界在所述页面中的位置。

步骤304：根据拖动后该栏框边界的位置，调整该栏框在所述页面中的大小。

进一步通过浏览器向用户输出调整后的栏框及页面。

本实施例为了方便描述技术方案，提供一个页面的示意图(即图4)。下面针对连续的鼠标事件详细描述调整栏框的实现过程，参见图5所示，以个人博客为例进行说明，具体流程如下：

步骤501：用户通过浏览器浏览网页，获得运营商提供的博客模板，该模板为包括栏框的单一页面，栏框的数目通常为3，本实施例为了举例方便所以包括4个栏框。

步骤502：监听鼠标事件，捕获当前鼠标的坐标，获知鼠标移动到栏框1的右边界(也是栏框2的左边界)，当前栏框1的右边界的位置是40％，符号“％”可省略。该操作将影响到栏框1和栏框2的大小。

步骤503：监听鼠标事件，获知点击鼠标左键并拖动鼠标。下面以向左拖动鼠标为例进行说明。

步骤504：监听鼠标事件，获知松开鼠标左键，捕获当前鼠标的坐标，根据该坐标确定调整后栏框1的右边界的位置，如20％。

步骤505：栏框1的右边界从40％调整到20％，栏框1的上下边界需要自适应调整，所以调整后的栏框1的栏宽缩小了50％，导致栏框1的大小缩小了50％。

步骤506：自适应调整栏框2的大小，即栏框2的左边界从40％调整到20％，所以调整后的栏框2增大了三分之一。

步骤507：通过浏览器向用户输出调整后的栏框状态及页面。

若栏框中已输入有文字，则在调整栏框的同时需要调整其中的文字，否则影响用户体验。针对栏框中文字的处理参见图6所示，具体流程如下：

步骤601：监听鼠标事件，获知栏框1的右边界从40％调整到20％，栏框1缩小了50％。

步骤602：根据调整后栏框的大小重新顺序输出文字，栏宽限制一行文字的个数，栏高限制文字的行数。具体可通过像素进行控制，例如，一个汉字占4像素，栏宽20％包括12像素，栏高50％包括24像素，则该栏框中的一行可输出6个汉字，共可输出12行72个汉字。如果该栏框输入了80个汉字，则需要隐藏8个汉字(不考虑标点符号)。

步骤603：发现文字所占空间(如4×80＝320)大于栏框的大小(如12×24＝288)，需要隐藏部分文字。

步骤604：按照输入文字的顺序隐藏超出部分的文字，即隐藏尾部的文字，如隐藏栏框中的后8个字。

上述步骤是针对栏框1中文字的调整，对于调整后空间增大的栏框2，可能也需要调整其中的文字，实现过程如下：

步骤605：监听鼠标事件，获知栏框2的左边界从40％调整到20％。

步骤606：根据调整后栏框的大小重新顺序输出文字。例如，对于调整后的栏框2，栏宽80％包括48像素，栏高50％包括24像素，则该栏框中的一行可输出24个汉字，共可输出12行288个汉字。如果该栏框输入了150个汉字，则在调整前隐藏了56个汉字(不考虑标点符号)，那么在调整后需要输出隐藏的汉字。

步骤607：根据栏框2调整后增加的空间，按照输入文字的顺序输出已隐藏的汉字。

上述步骤是针对文字的调整方法，对于图片或图像，由于图片或图像中的像素点的位置相对固定，不能从中进行自动换行，所以针对图片或图像是根据调整后的栏宽和栏高隐藏或输出相应部分的内容，参见图7所示。

上述实施例详细描述了水平调整栏宽的方法，对于竖直调整栏高的方法，如拖动栏框1的下边界(也是栏框3的上边界，可能也是栏框2的下边界和栏框4的上边界)，与水平调整栏宽的方法类似，在此不再赘述。同样，当鼠标移动到栏框1的右下角时拖动鼠标，调整栏框的方法相当于同时采用水平调整栏宽的方法和竖直调整栏高的方法，在此不再赘述。

上述实施例是以相邻两个栏框的边界重合为例进行的说明，如栏框1与栏框2、栏框3和栏框4相邻，若相邻两个栏框的边界不重合，存在一定的距离，该距离通常固定不变，则在调整栏框1时，仍可自适应调整栏框2、栏框3和栏框4。

本实施例为用户提供的模板是默认包括4个栏框，在实际应用中，用户可能需要3个或5个栏框，则需要对栏框数目进行调整。参见图8所示，减少栏框数目的实现流程如下：

在页面中设置有用于限制栏框的范围，栏框不可超出该范围，可将页面的边界作为限制栏框的范围边界。以及，设置有栏框数目。

步骤801：通过浏览器监听鼠标事件，发现鼠标正在拖动栏框1的右边界。

步骤802：监听鼠标事件，获知松开鼠标左键，捕获当前鼠标的坐标。

步骤803：确定当前鼠标的位置与范围边界重合，即栏框1的右边界已与其左边界(也是范围边界)重合。若松开鼠标时其位置超出了所述范围，则默认当前鼠标的位置与范围边界重合。

步骤804：删除栏框1，并更新栏框数目，至少将栏框数目减1。

步骤805：自动适应性调整栏框2。

步骤806：可能需要自动适应性调整栏框3和栏框4，由于栏框1的右边界与左边界的重合，可能导致栏框3的右边界与左边界的重合，所以需要删除栏框3，并更新栏框数目。

其中，步骤804-806是相对独立的操作，无严格的执行先后，也可同步进行。所以，步骤804和806中更新栏框数目的操作可以是同一操作，即一次将栏框数目减2。

若在调整栏框1之前，已在栏框1中输入了文字或图片等，则将栏框1的右边界与左边界重合后，隐藏栏框1，而不删除栏框1，也不需要更新栏框的数目。

参见图9，增加栏框数目的实现流程如下：

步骤901：通过浏览器监听鼠标事件，发现鼠标正在拖动栏框1的左边界(也是所示范围的左边界)。

步骤902：监听鼠标事件，获知松开鼠标左键，捕获当前鼠标的坐标。

步骤903：确定当前鼠标的位置在所述范围内，既不位于左边界也不位于右边界。

步骤904：增加一个栏框，并更新栏框数目，至少将栏框数目加1。

步骤905：自适应调整栏框1和栏框2。

步骤906：可能需要自动适应性调整栏框3和栏框4。由于对栏框1的左边界的拖动，可能在栏框3的左侧增加了一个栏框，该增加的栏框与步骤904中增加的栏框可以是同一栏框，也可以不同的栏框，若是不同的栏框，则需要更新栏框的数目。

其中，步骤904-906是相对独立的操作，无严格的执行先后，也可同步进行。所以，步骤904和906中更新栏框数目的操作可以是同一操作，当在栏框1和栏框3的左侧各增加一个栏框时，可一次将栏框数目加2。在调整栏框时可通过提示信息询问增加栏框的方式，本实施例默认在栏框1的左侧增加一个栏框，栏框3保持不变。上述三种增加栏框的方式可参见图10所示的示意图。

在步骤903和904中，若栏框1的左边界被拖到了所述范围的右边界，则在增加一个栏框的同时删除栏框1和栏框2，此时需要将栏框数目减1。若在调整栏框前，栏框1和栏框2中已输入了内容，则栏框1的左边界被拖到所述范围的右边界时，隐藏栏框1和栏框2，而不删除。

上述两个实施例详细描述了水平调整栏宽时增加或删除栏框的方法，对于竖直调整栏高时增加或删除栏框的方法，如拖动栏框3的下边界(也是所述范围的下边界，可能也是栏框4的下边界)，与水平调整栏宽时的方法类似，在此不再赘述。

本实施例为了更直观的向用户显示栏框在页面中的位置及大小，采用了标尺和游标，标尺上的刻度表示栏框范围的百分比，并通过游标的拖动来调整栏框。在页面顶部的水平位置设置标尺和游标，游标的数量与水平方向栏框的数目有关，本实施例主要适用于栏框1和栏框3的整体调整。下面首先介绍应用在栏框调整时的方法，不涉及栏框数目的增加。参见图11所示，具体方法流程如下：

步骤1101：用户通过浏览器浏览网页，获得运营商提供的博客模板，参见图12所示的示意图。

步骤1102：监听鼠标事件，捕获当前鼠标的坐标，获知鼠标移动到了左侧的游标上，位置为25％。

步骤1103：监听鼠标事件，获知点击鼠标左键并拖动鼠标。下面以向左拖动鼠标为例进行说明。

步骤1104：监听鼠标事件，获知松开鼠标左键，捕获当前鼠标的坐标，根据该坐标确定左侧游标的位置，即0％。

步骤1105：隐藏或删除左侧的栏框，可能需要更新栏框的数目。若是删除左侧的栏框，则也可删除左侧的游标。

步骤1106：自适应调整中间及右侧的栏框。

参见图13，通过拖动游标调整栏框以增加栏框的方法实现流程如下：

至少在标尺的两端各设置一个游标。本实施例默认向用户提供水平方向上的两个栏框，所以在标尺的两端有两个游标，在标尺的中间也有一个用于标记两个栏框重合边界的游标。

步骤1301：通过浏览器监听鼠标事件，发现鼠标正在拖动左端的游标。

步骤1302：监听鼠标事件，获知松开鼠标左键，捕获当前鼠标的坐标。

步骤1303：确定当前鼠标的位置在范围边界内，并根据当前鼠标的位置确定游标移动后的位置。

步骤1304：增加一个栏框，并更新栏框的数目，将栏框数目加1。当前游标对应的标尺刻度即为该栏框的栏宽。

步骤1305：自适应调整原左侧栏框(现在中间位置的栏框)和右侧栏框。

步骤1306：在标尺的左端输出一个游标。该游标可能是新生成的，则需要将游标的数目加1。也可能是在设置游标时已设置的，相当于多个游标重叠在一起，例如预先设置5个游标，在调整前仅输出3个游标，则可最多设置6个栏框。也可不限制栏框的最大数目，即将游标的数目设置为无限，在实际应用中，可以设置游标的数目为100，通常用户不会在一个方向上使用101个栏框，所以100个游标可满足所有用户的需求，相当于设置了无限多个游标。

当需要调整栏高或者通过竖直方向对栏框的调整来增加或减少栏框时，在页面的竖直方向(通常是在页面左侧)设置标尺和游标，其方法与水平方向设置标尺和游标时的类似，在此不再赘述。

参见图14，本实施例中用于调整栏框的装置包括：监听模块1401和处理模块1402。该装置可具体为服务器或客户端。

监听模块1401用于通过浏览器监听设置为自适应调整状态的单一页面中的鼠标事件，并获知鼠标拖动的栏框及拖动后该栏框边界在所述页面的位置。

处理模块1402用于根据拖动后该栏框边界的位置，调整该栏框在所述页面中的大小。处理模块1402在调整栏框的同时，还用于隐藏、删除或增加栏框等方面的处理，及更新栏框和游标的数目；以及还用于隐藏或输出栏框中的文字或图片等方面的处理。

所述装置还包括接口模块，该接口模块可具体为浏览器，用于获知用户的操作及向用户输出调整时和调整后的页面。

所述装置还包括用于缓存或永久保存所述单一页面的存储模块，可具体为缓存、硬盘和闪存等存储介质。

用于实现本发明实施例的软件可存储于软盘、硬盘和闪存等存储介质中。

本发明实施例通过监听鼠标事件来确定对单一页面中栏框的调整，实现了用户可任意调整栏宽和栏高，尤其是在调整的极限情况下实现了栏框的自动隐藏或删除。并且，本发明实施例通过调整栏框边界与范围边界的关系，实现了栏框的自动增加。本发明实施例还通过标尺和游标直观的提示用户各栏框的位置及大小，提高了用户体验。本发明实施例在实现栏框可调整的同时，还实现了根据栏框的调整变化自动调整栏框中的内容，有利于内容的正确输出及用户的浏览。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若对本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (13)

1.一种调整网页中栏框的方法，其特征在于，在单一页面中设置有栏框，并且将所述页面设置为自适应调整状态，以及所述方法包括以下步骤：

通过浏览器监听鼠标事件，并获知鼠标拖动的栏框及拖动后该栏框边界在所述页面的位置；

根据拖动后所述栏框边界的位置，调整该栏框在所述页面中的大小。

2.如权利要求1所述的方法，其特征在于，所述鼠标事件为鼠标拖动栏框边界的事件。

3.如权利要求1所述的方法，其特征在于，所述页面中设置有相邻的两个栏框时，对两个栏框中的一个栏框进行相邻方向的调整时，相应的调整另一个栏框的大小。

4.如权利要求1所述的方法，其特征在于，当所述栏框中记载有文字时，根据所述栏框调整后的大小，对应调整文字的输出。

5.如权利要求4所述的方法，其特征在于，当文字所占空间超出了所述栏框调整后的大小时，按照输入文字时的顺序隐藏超出部分的文字；或者

当文字所占空间超出了所述栏框调整前的大小，及所述栏框调整后的大小相对于调整前变大时，根据所述栏框增加的空间按照文字输入时的顺序输出已隐藏的文字。

6.如权利要求1至5中任一项所述的方法，其特征在于，当调整所述栏框的边界至与对边的边界重合时，隐藏或删除所述栏框。

7.如权利要求1至5中任一项所述的方法，其特征在于，在所述页面中设置有用于限制栏框位置的范围；当鼠标拖动所述栏框边界超出所述范围时，调整后的所述栏框边界的位置与所述范围的范围边界重合。

8.如权利要求7所述的方法，其特征在于，在所述页面中设置有标尺和游标，通过所述标尺的端点确定所述范围，以及通过所述游标的位置确定所述栏框边界的位置。

9.如权利要求8所述的方法，其特征在于，监听鼠标拖动游标的事件，通过拖动的游标及游标拖动后的位置获知拖动的栏框及拖动后与所述游标对应的边界的位置。

10.如权利要求8所述的方法，其特征在于，在所述页面中设置有栏框的数目；当所述栏框位于所述范围的边缘，及调整所述栏框与所述范围重合的边界时，更新所述数目。

11.如权利要求10所述的方法，其特征在于，在所述页面中设置有标尺，及在标尺的两端设置有游标，通过所述游标确定所述栏框与所述范围重合的边界。

12.如权利要求11所述的方法，其特征在于，调整所述游标后，在标尺的端点处自动输出游标。

13.一种用于调整网页中栏框的装置，其特征在于，所述网页为单一页面且处于自适应调整状态，以及所述装置包括：

监听模块，用于通过浏览器监听鼠标事件，并获知鼠标拖动的栏框及拖动后该栏框边界在所述页面的位置；

处理模块，用于根据拖动后该栏框边界的位置，调整该栏框在所述页面中的大小。

Images