CN103631487B - 一种配置页面的方法及装置 - Google Patents

Abstract

本申请公开了一种配置页面的方法及装置。该方法包括：接收页面配置信息，触发获取预先设置的分栏的页面元素配置列表，所述分栏的页面元素配置列表至少包括页面元素库分栏列表以及页面元素配置分栏列表；监测到选取页面元素库分栏列表中的元素，生成该元素副本，触发该元素副本跟随操作事件轨迹移动；监测到元素副本在页面元素配置分栏列表中释放选取，触发将元素副本置于被释放处。应用本申请，可以简化页面配置流程、提高页面配置效率。

Description

一种配置页面的方法及装置

技术领域

本申请涉及计算机技术，特别涉及一种配置页面的方法及装置。

背景技术

随着互联网技术的发展，用户对页面的需求也逐渐丰富；不同用户对页面的配置需求不同，因而，对页面中包含的元素多样化的配置需求也越来越丰富，为了满足这 些日益增长的需求，需要对页面，例如，移动终端页面进行灵活多样的元素配置，以 满足不同用户的个性化需求。

现有配置页面的方法主要是：

终端设备基于页面配置信息，触发展示页面元素数据列表；根据配置页面所需的元素，从元素数据列表中选取相应元素控件，触发进入该元素的配置界面，对该元素 在页面中的属性信息进行配置；其中，属性信息包括：位置、样式、字体、标题等信 息。

在配置完成后，退出该配置界面以及页面元素数据列表，触发进入关联界面；在关联界面中，进行元素和页面的关联编辑，使配置的元素在页面中按照配置的位置信 息排列。

按照上述同样的方法逐一配置页面中包含的其它元素，直至配置完页面中包含的所有元素后，加载与页面关联的元素，从而完成配置页面。

由上述可见，现有配置页面的方法，针对页面中包含的各元素，每个元素需要进行多个界面的切换，才能完成配置及关联流程，使得配置页面的流程较为复杂，页面 配置效率较低。

发明内容

本申请的主要目的在于提出一种配置页面的方法，简化页面配置流程、提高页面配置效率。

本申请的另一目的在于提出一种配置页面的装置，简化页面配置流程、提高页面配置效率。

为达到上述目的，本申请提供了一种配置页面的方法，该方法包括：

基于页面配置信息，触发获取预先设置的页面元素配置列表，并以分栏方式显示于同一页面；所述页面元素配置列表至少包括页面元素库分栏列表以及页面元素配置 分栏列表；

监测到页面元素库分栏列表中的元素被选取时，生成该元素副本；

监测到所述元素副本在页面元素配置分栏列表中被释放时，触发将元素副本置于被释放处。

本申请提供了一种配置页面的装置，该装置包括：页面元素配置列表获取模 块、第一监测模块以及第二监测模块，其中，

页面元素配置列表获取模块，用于基于页面配置信息，触发获取预先设置的、 以分栏方式显示于同一页面的页面元素配置列表；所述分栏的页面元素配置列表至少 包括页面元素库分栏列表以及页面元素配置分栏列表；

第一监测模块，用于监测页面元素库分栏列表中元素的选取，生成该元素副本；

第二监测模块，用于监测元素副本在页面元素配置分栏列表中的释放，触发将 元素副本置于释放处。

由上述的技术方案可见，本申请提供的一种配置页面的方法及装置，通过将页面元素配置列表设置分栏显示在同一页面的方式，可以在同一界面中完成对页面中多个 元素进行配置，无需反复进行界面的多次切换，简化了配置的流程，配置页面所需时 间短。

附图说明

图1为本申请实施例配置页面的方法流程示意图。

图2a为本申请实施例未配置页面时分栏的页面元素配置列表结构示意图。

图2b为本申请实施例配置页面后分栏的页面元素配置列表结构示意图。

图3为本申请实施例拖拽元素的示意图。

图4a～4c为本申请实施例对元素进行排序的示意图。

图5为本申请实施例配置页面的装置结构示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图及具体实 施例对本申请作进一步地详细描述。

现有配置页面的方法，配置页面中的每个元素，需要进行多个界面的切换， 并需要在各切换的界面中编辑相应属性信息，使得配置页面的流程较为复杂，页 面配置效率较低。

本申请实施例里，在页面配置中，设置分栏的页面元素配置列表，从页面元 素配置列表中具有页面元素库列表的一栏中，选取配置页面所需的元素，将选取 的元素释放到与页面元素库列表在同一页面显示的页面配置分栏列表中，从而在 同一界面对页面进行配置，这样，无需进行界面的切换。

考虑到通过拖拽的方式可以实现对元素的拖动及定位，例如，通过对元素的 拖拽，可以将元素拖拽到预先设置的目标位置，从而实现对元素的定位，操作简 单，避免现有在元素的配置界面中，需要分别计算并设置各元素在页面中的位置 信息，以确定各元素在页面中的相应位置，提高了页面配置效率。

图1为本申请较佳实施例配置页面的方法流程示意图。参见图1，该流程包括：

步骤101，接收页面配置信息，触发获取预先设置的分栏的页面元素配置列表， 所述分栏的页面元素配置列表至少包括页面元素库分栏列表以及页面元素配置分 栏列表；

本步骤中，用户如果需要对页面进行初始配置或对已配置的页面进行更新， 启动本申请实施例的配置页面控件，向该配置页面控件输入页面配置信息，配置 页面控件接收到页面设置信息后，获取页面元素配置列表并以分栏的方式显示。

较佳地，在启动配置页面控件后，进入配置页面界面，通过对配置页面界面 中的页面配置子控件进行操作，生成页面配置信息。

分栏的页面元素配置列表至少包括：页面元素库分栏列表以及页面元素配置 分栏列表，上述两分栏列表显示在同一页面中。较佳地，还可以包括其他的分栏， 例如，元素应用信息设置栏列表。其中，可以将分栏的页面元素配置列表上部设 置为元素应用信息设置栏列表，在元素应用信息设置栏列表的下部，分为两个分 栏列表，分别为页面元素库分栏列表以及页面元素配置分栏列表。

其中，页面元素库分栏列表数为一个，用于存储设置页面所需的各元素，页 面所需的各元素可以从相关网页服务器或运营商服务器上获取，页面元素配置分 栏列表数可以为一个或多个，一个页面元素配置分栏列表对应一个页面，用于模 拟元素在页面的配置。

图2a为本申请实施例未配置页面时分栏的页面元素配置列表结构示意图。

图2b为本申请实施例配置页面后分栏的页面元素配置列表结构示意图。

参见图2a～2b，分栏的页面元素配置列表包括：元素应用信息设置栏列表、 页面元素库分栏列表以及页面元素配置分栏列表，其中，元素应用信息设置栏列 表位于页面元素配置列表上部，在元素应用信息设置栏列表的下部的左右两侧， 分别为页面元素库分栏列表以及页面元素配置分栏列表。

元素应用信息设置栏列表中设置有元素应用的平台信息、子平台信息及软件 类型信息等，例如，默认的平台信息为全平台，子平台信息为全子平台，软件类 型信息为全类型，用以表示设置的页面可以应用于所有平台下的所有子平台，支 持任何类型的软件。

页面元素库分栏列表位于页面元素配置列表中的一侧，例如，左侧部分，设 置有构成页面所需的各元素。实际应用中，还可以对元素进行分类，例如，可以 将元素进行归类，分为交友类、综合类、新闻类、站点类以及更多分类，每一分 类包括不同的元素，例如，站点类可以包括：3G下载、3G邮箱、3G游戏园、3G 助理、3G资费、51job、58同城、58团购、59SY、5元等，设置的更多分类包含 军事类、手机类等，军事类包含的元素可以是：铁血、环球、中华、国强、人民、 凤凰、新浪、腾讯等，手机类包含的元素可以是：腾讯手机、新浪3G手机、手机 世界、友人手机之家、天极等；在交友类中，设置的元素包括：有缘、天下、奇 遇、佳缘、爱友等；在综合类中，设置的元素包括：创业、前程、开店、携程等； 在新闻类中，设置的元素包括：中新、凤凰、网易、人民早报等；在站点类中， 设置的元素包括：3G下载、3G邮箱、3G游戏园、3G助理等。

步骤102，监测到选取页面元素库分栏列表中的元素，生成该元素副本，触发 该元素副本跟随操作事件轨迹移动；

本步骤中，操作事件为拖拽操作，通过鼠标执行拖拽操作事件，使选取的元 素跟随操作事件轨迹移动。操作事件的轨迹表现为元素副本坐标位置的变化，即x、 y坐标的变化，元素副本的移动表现为元素数值方向（top）值和水平方向（left） 值的变化。

监测到选取页面元素库分栏列表中的元素包括：

监测到光标与元素接触且驻留于该元素上。即用户通过鼠标点击页面元素库 分栏列表中的元素，形成接触，且鼠标一直停留在点击的元素上，未与点击的元 素释放接触。

在监测到选取元素后，在选取的元素处生成该元素副本。

触发该元素副本跟随操作事件轨迹移动包括：

按照预先设置的时间周期，获取操作事件的坐标信息；

计算当前时间周期获取的操作事件坐标信息与上一次时间周期获取的操作事 件坐标信息的变化量；

触发元素副本根据计算得到的变化量进行移动。

图3为本申请实施例拖拽元素的示意图。参见图3，每一元素预先设置有鼠标 键按下（mousedown）事件、鼠标键移动（mousemove）事件、鼠标键指向（mouseover） 事件以及鼠标键松开（mouseup）事件，用于对用户的操作事件触发相应处理，以 实现元素拖拽流程，这样，通过处理这些操作事件，可以控制元素的拖拽。关于 mousedown事件、mousemove事件、mouseover事件以及mouseup事件的详细描述， 具体可参见相关技术文献，在此不再赘述。

在拖拽开始时，当鼠标移动到元素上方，并按下鼠标按键时，触发鼠标键按 下（mousedown）事件，选取元素并生成元素副本；在移动过程中，元素随鼠标移 动，鼠标一直按在元素副本上不放，按照预先设置的时间周期触发鼠标键移动 （mousemove）事件，计算前后相邻时间周期操作事件（鼠标）的坐标信息的变化 量，使元素副本随鼠标的坐标信息的变化量移动；当移动的元素副本经过其他元 素所在区域时，触发鼠标键指向（mouseover）事件；当元素副本移动到目标区域， 并在目标区域中监测到鼠标释放与元素副本的接触时，触发鼠标键松开（mouseup） 事件。

步骤103，监测到元素副本在页面元素配置分栏列表中释放选取，触发将元素 副本置于被释放处。

本步骤中，当元素副本达到页面元素配置分栏列表中用户期望的位置时，用 户松开鼠标，使鼠标释放与元素副本的接触，表明元素副本处于释放选取状态， 将元素副本置于该释放接触处，从而完成页面配置的流程。这样，通过设置分栏 的方式，可以在同一界面中完成对页面进行配置，无需进行界面的切换，简化了 配置的流程；进一步地，通过拖拽的方式实现对元素的定位，可以避免现有在元 素的配置界面中，需要分别计算并设置各元素在页面中的位置信息，以确定各元 素在页面中的相应位置，提高了页面配置效率；而且，在页面配置完成后，可以 实时得到配置的效果，能够提前显示配置后的效果页面，实现所见即所得的操作； 此外，通过拖拽元素的方式配置页面，效果直观，减少了配置时需要输入属性信 息的出错率。

该方法还可以进一步包括：

步骤104，更新页面元素配置分栏列表中元素的属性信息。

本步骤中，在选取页面元素库分栏列表中的元素，生成元素副本，并将元素 副本拖拽到页面元素配置分栏列表中后，元素副本的样式信息、字体信息、标题 信息等属性信息与页面元素配置分栏列表中相应的元素一致，为了满足不同用户 个性化的配置需求，在页面元素配置分栏列表中，可以对元素副本的属性信息进 行更新，例如，通过鼠标左键点击元素副本，并按下鼠标右键，触发弹出元素属 性菜单，在弹出的元素属性菜单中，对元素属性信息进行更新。

实际应用中，在页面元素配置分栏列表中，还可以根据用户的配置需求，实 时改变页面中各元素的位置，这样，该方法还可以进一步包括：

步骤105，监测到选取页面元素配置分栏列表中的元素，生成该元素副本，触 发该元素副本跟随操作事件轨迹移动；

本步骤与步骤102的流程相类似，对于预先设置有mousedown事件、 mousemove事件、mouseover事件以及mouseup事件的元素来说，生成该元素副本， 触发该元素副本跟随操作事件轨迹移动包括：

A11，设置页面元素配置分栏列表为排序的容器；

本步骤中，容器用于放置进行排序的元素，即在将页面元素配置分栏列表设 置为排序的容器并依次绑定mousedown事件、mousemove事件、mouseover事件 以及mouseup事件后，可以在该容器中，进行元素的排序。

该容器中，包含选取的排序源元素(源对象)以及与选取的源元素进行排序 的目标元素(目标对象)。

这样，在选取元素后，该元素置于设置的容器中。

A12，监测到操作事件移动到容器上方，触发mousedown事件，通过克隆节 点(cloneNode)方法产生元素副本；

本步骤中，操作事件是指通过鼠标进行的操作，在鼠标移动到选取的元素上 方，并按下鼠标按键时，触发mousedown事件。

实际应用中，为了使元素副本跟随操作事件轨迹移动时，显示元素的实时移 动效果，可以进一步设置选取的元素为隐藏状态。这样，在后续拖拽过程中，由 于选取的元素(源元素)处于隐藏状态，选取元素的元素副本跟随鼠标的拖动而 拖动，增加了实时拖拽的效果。

A13，按照预先设置的时间周期触发mousemove事件，以计算操作事件坐标 信息的变化量，触发容器中的元素副本按照计算得到的变化量移动。

本步骤中，在容器拖动时，不断触发mousemove事件，从而改变元素副本坐 标，使之与鼠标的移动轨迹相一致。

步骤106，监测到页面元素配置分栏列表中生成的元素副本移动至目标元素 处，触发将选取的元素与目标元素对换；

本步骤中，当元素副本移动到目标元素位置时，执行与目标元素排序位的对 换，即更新该元素在页面元素配置分栏列表中的位置，以拖拽实现排序功能。当 然，如果目标元素位置处不具有目标元素，则执行普通的移动选取的元素操作。 具体来说，包括：

A14，监测到元素副本拖动到容器中的目标元素上方，触发目标元素的 mouseover事件，进行排序位置判断；

本步骤中，当触发目标元素的mouseover事件后，调用事件处理函数，在事件 处理函数中，进行排序位置判断。

A15，根据判断得到的排序位置，使用文档对象模型（DOM，Document ObjectModel）操作的在现有的子节点前插入一个新的子节点（insertBefore）方法对选取 的元素和目标元素的位置进行调换。

本步骤中，排序位置判断包含竖直方向的排序判断以及水平方向的排序判断。 如果是进行竖直方向上的排序，使用DOM操作的insertBefore方法，对选取的元 素（源对象）和目标元素（目标对象）的位置进行调换。水平方向上的排序与竖 直方向上的排序相类似。其中，关于dom操作的流程，为现有技术，具体可参见 相关技术文献。

关于排序是竖直方向的排序还是水平方向的排序，可以根据选取元素的坐标 信息与目标元素的坐标信息进行判断，如果选取元素的纵坐标信息（y坐标）与目 标元素的纵坐标信息之差大于相应的横坐标信息（x坐标）之差，即选取元素移动 到目标元素（目标对象）的偏下一个位置，则进行竖直方向上的排序。

步骤107，监测到元素副本释放选取，删除元素副本。

本步骤中，监测到鼠标从元素副本上松开，即释放选取时，触发mouseup事 件，取消绑定的mousedown事件、mousemove事件、mouseover事件以及mouseup 事件等拖动事件，清除元素副本。

如前所述，如果选取的元素设置为隐藏状态，则在元素副本释放选取后，进 一步包括：设置进行调换后所述选取的元素为显示状态。这样，在一个界面中， 即可完成多个页面元素间的排序调整以及属性修改，并通过保存，从而实现页面 的配置，操作简单，配置页面所需时间短，配置效率高。

图4a～4c为本申请实施例对元素进行排序的示意图。参见图4a～4c，容器中 包含有元素1和元素2，元素1和元素2在竖直方向上排列，需要将元素1与元素 2的位置对换，实现排序。则在图4a中，通过cloneNode方法为元素1产生元素1 副本，并设置元素1为隐藏状态（图中以虚线框表示）；在图4b中，当元素1副 本移动至元素2位置时，使用DOM操作的insertBefore方法对元素1和元素2的 位置进行调换，即将元素2置于原元素1的位置，元素1置于原元素2的位置， 元素1仍为隐藏状态；在图4c中，当鼠标从元素1副本上松开，清除元素1副本， 将元素1的状态设置为显示状态。

图5为本申请实施例配置页面的装置结构示意图。参见图5，该装置包括：页 面元素配置列表获取模块、第一监测模块以及第二监测模块，其中，

页面元素配置列表获取模块，用于基于页面配置信息，触发获取预先设置的分 栏的页面元素配置列表，所述分栏的页面元素配置列表至少包括在同一页面显示的页 面元素库分栏列表以及页面元素配置分栏列表；

第一监测模块，用于监测到选取页面元素库分栏列表中的元素，生成该元素副本；

第二监测模块，用于监测到元素副本在页面元素配置分栏列表中释放选取，触 发将元素副本置于被释放处。

其中，第一监测模块还包括：坐标信息获取单元、坐标信息变化量计算单元 以及触发单元（图中未示出），其中，

坐标信息获取单元，用于按照预先设置的时间周期，获取操作事件的坐标信 息；

坐标信息变化量计算单元，用于计算当前时间周期获取的操作事件坐标信息 与上一次时间周期获取的操作事件坐标信息的变化量；

触发单元，用于触发元素副本根据计算得到的变化量进行移动。

较佳地，该装置还进一步包括：

属性信息更新模块，用于更新页面元素配置分栏列表中元素的属性信息。

该装置还可以进一步包括：

排序模块，

监测到页面元素配置分栏列表中生成的元素副本移动至目标元素处，触发将选取的元素与目标元素对换；

监测到元素副本释放选取，删除元素副本。

以上所述仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。 凡在本申请的精神和原则之内，所作的任何修改、等同替换以及改进等，均应包 含在本申请的保护范围之内。

Claims (6)

1.一种配置页面的方法，其特征在于，包括：

启动配置页面控件，进入配置页面界面，生成页面配置信息；

基于页面配置信息，触发获取预先设置的页面元素配置列表，并以分栏方式显示于同一配置页面界面；所述页面元素配置列表至少包括页面元素库分栏列表、以及页面元素配置分栏列表，所述页面元素库分栏列表用于存储从相关网页服务器或运营商服务器上获取的各元素；

监测到页面元素库分栏列表中的元素被选取时，生成被选取元素副本；

监测到所述元素副本在页面元素配置分栏列表中被释放时，触发将元素副本置于被释放处；

监测到选取页面元素配置分栏列表中的元素副本，生成该元素副本的副本，触发该元素副本的副本跟随操作事件轨迹移动；

所述触发该元素副本的副本跟随操作事件轨迹移动包括：按照预先设置的时间周期，获取操作事件的坐标信息；计算当前时间周期获取的操作事件坐标信息与上一次时间周期获取的操作事件坐标信息的变化量；触发元素副本的副本根据计算得到的变化量进行移动；

其中，所述触发该元素副本的副本跟随操作事件轨迹移动包括：设置页面元素配置分栏列表为排序的容器；监测到操作事件移动到容器上方，按下鼠标按键时，触发鼠标键按下事件，通过克隆节点方法产生所述元素副本的副本；按照预先设置的时间周期触发鼠标键移动事件，以计算操作事件坐标信息的变化量，触发容器中的元素副本的副本按照计算得到的变化量移动；

所述方法进一步包括：监测到元素副本的副本拖动到容器中的目标元素副本上方时，触发目标元素副本的鼠标键指向事件，进行排序位置判断；根据判断得到的排序位置，使用文档对象模型操作的在现有的子节点前插入一个新的子节点方法对选取的元素副本和目标元素副本的位置进行调换；监测到所述元素副本的副本释放选取，删除元素副本的副本。

2.如权利要求1所述的方法，其特征在于，进一步包括：更新页面元素配置分栏列表中元素副本的属性信息；其中，属性信息包括：样式信息、字体信息以及标题信息。

3.如权利要求1所述的方法，其特征在于，进一步包括：

设置页面元素配置分栏列表中被选取的元素副本为隐藏状态。

4.如权利要求1所述的方法，其特征在于，所述删除元素副本的副本后，进一步包括：

设置进行调换后所述被选取的元素副本为显示状态。

5.一种配置页面的装置，其特征在于，该装置包括：页面元素配置列表获取模块、第一监测模块以及第二监测模块，其中，

页面元素配置列表获取模块，用于启动配置页面控件，进入配置页面界面，生成页面配置信息；基于页面配置信息，触发获取预先设置的、以分栏方式显示于同一配置页面界面的页面元素配置列表；所述分栏的页面元素配置列表至少包括页面元素库分栏列表以及页面元素配置分栏列表，所述页面元素库分栏列表用于存储从相关网页服务器或运营商服务器上获取的各元素；

第一监测模块，用于监测页面元素库分栏列表中元素的选取，生成该元素副本；

第二监测模块，用于监测元素副本在页面元素配置分栏列表中的释放，触发将元素副本置于释放处；

所述第一监测模块还包括：坐标信息获取单元、坐标信息变化量计算单元以及触发单元，其中，

坐标信息获取单元，用于按照预先设置的时间周期，获取操作事件的坐标信息；

坐标信息变化量计算单元，用于计算当前时间周期获取的操作事件坐标信息与上一次时间周期获取的操作事件坐标信息的变化量；

触发单元，用于触发元素副本的副本根据计算得到的变化量进行移动；

其中，所述触发该元素副本的副本跟随操作事件轨迹移动包括：

设置页面元素配置分栏列表为排序的容器；

监测到操作事件移动到容器上方，按下鼠标按键时，触发鼠标键按下事件，通过克隆节点方法产生所述元素副本的副本；

按照预先设置的时间周期触发鼠标键移动事件，以计算操作事件坐标信息的变化量，触发容器中的元素副本的副本按照计算得到的变化量移动；

所述方法进一步包括：

监测到元素副本的副本拖动到容器中的目标元素副本上方时，触发目标元素副本的鼠标键指向事件，进行排序位置判断；

根据判断得到的排序位置，使用文档对象模型操作的在现有的子节点前插入一个新的子节点方法对选取的元素副本和目标元素副本的位置进行调换；

监测到所述元素副本的副本释放选取，删除元素副本的副本。

6.如权利要求5所述的装置，其特征在于，进一步包括：

属性信息更新模块，用于更新页面元素配置分栏列表中元素副本的属性信息。