网页组件编辑方法、装置、设备和计算机可读存储介质制造方法及图纸

本发明专利技术公开了一种网页组件编辑方法、装置、设备和计算机可读存储介质，方法包括：当检测到网页中的第一组件被选中时，显示可选择与所述第一组件关联的待选组件，所述第一组件包括多个标签；检测到所述标签被选择时，显示标签编辑界面；检测关联组件被拖拽到所述标签编辑界面的预设区域时，将所述关联组件和所述标签的代码关联，所述关联组件来自所述待选组件。针对有不同标签的第一组件，在每个标签编辑时，显示独立的标签编辑界面，并允许用户以拖拽的方式进行标签和组件的关联，使得标签编辑更为方便、更加直观。

Editing methods, devices, devices and computer readable storage media of web components

【技术实现步骤摘要】
网页组件编辑方法、装置、设备和计算机可读存储介质
本专利技术涉及网页编辑
，尤其是涉及一种网页组件编辑方法、装置、设备和计算机可读存储介质。
技术介绍
随着互联网的高速发展，越来越多的用户需要更便捷的页面编辑器来帮助其快速的搭建生成各类页面。市场上开始出现针对营销活动、数据可视化、管理后台等的快速编辑生成工具，这类工具都基于定制化模板及标准组件，通过可视化的拖拽设计，可快速为用户构建生成页面。对类似Tab组件这种交互组件，需要关联控制其他组件，现有的Tab组件的编辑方法复杂，不够直观。
技术实现思路
本专利技术旨在至少解决现有技术中存在的技术问题之一。为此，本专利技术提出一种网页组件编辑方法，能够提高网页组件的编辑效率。本专利技术还提出一种网页组件编辑装置。本专利技术还提出一种网页组件编辑设备。本专利技术还提出了一种计算机可读存储介质。第一方面，本专利技术的一个实施例提供了一种网页组件编辑方法：当检测到网页中的第一组件被选中时，显示可选择与所述第一组件关联的待选组件，所述第一组件包括多个标签；检测到所述标签被选择时，显示标签编辑界面；检测关联组件被拖拽到所述标签编辑界面的预设区域时，将所述关联组件和所述标签的代码关联，所述关联组件来自所述待选组件。本专利技术实施例的网页组件编辑方法至少具有如下有益效果：针对有不同标签的第一组件，在每个标签编辑时，显示独立的标签编辑界面，并允许用户以拖拽的方式进行标签和组件的关联，使得标签编辑更为方便、更加直观。根据本专利技术的另一些实施例的一种网页组件编辑方法，当所述标签被选中时，所述关联组件显示于网页预设位置。进一步地，还包括关联组件编辑步骤，通过预设模板更改所述关联组件的属性。进一步地，所述属性包括所述关联组件的位置、大小、字体、颜色。进一步地，所述标签编辑界面包括预览按钮，当检测到所述预览按钮被选中时，所述标签编辑界面隐藏，显示所述标签与所述关联组件的关联状态。第二方面，本专利技术的一个实施例提供了一种网页组件编辑装置:包括：检测模块，用于检测网页中的第一组件、标签是否被选中；标签编辑界面显示模块，用于显示标签编辑界面；代码关联模块，用于关联所述标签和所述关联组件代码。第三方面，本专利技术的一个实施例提供了一种网页组件编辑装置:包括：至少一个处理器，以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行所述的一种网页组件编辑方法。第四方面，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行所述的网页组件编辑方法。附图说明图1是本专利技术实施例中一种网页组件编辑方法的一具体实施例流程示意图；图2是本专利技术实施例中一种网页组件编辑方法的编辑示意图。具体实施方式以下将结合实施例对本专利技术的构思及产生的技术效果进行清楚、完整地描述，以充分地理解本专利技术的目的、特征和效果。显然，所描述的实施例只是本专利技术的一部分实施例，而不是全部实施例，基于本专利技术的实施例，本领域的技术人员在不付出创造性劳动的前提下所获得的其他实施例，均属于本专利技术保护的范围。在本专利技术的描述中，如果涉及到方位描述，例如“上”、“下”、“前”、“后”、“左”、“右”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本专利技术和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本专利技术的限制。如果某一特征被称为“设置”、“固定”、“连接”、“安装”在另一个特征，它可以直接设置、固定、连接在另一个特征上，也可以间接地设置、固定、连接、安装在另一个特征上。在本专利技术实施例的描述中，如果涉及到“若干”，其含义是一个以上，如果涉及到“多个”，其含义是两个以上，如果涉及到“大于”、“小于”、“超过”，均应理解为不包括本数，如果涉及到“以上”、“以下”、“以内”，均应理解为包括本数。如果涉及到“第一”、“第二”，应当理解为用于区分技术特征，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量或者隐含指明所指示的技术特征的先后关系。参照图1～图2，示出了本专利技术实施例中一种网页组件编辑方法的流程示意图。其具体包括步骤：S1，当检测到网页中的第一组件被选中时，显示可选择与所述第一组件关联的待选组件，所述第一组件包括多个标签100；第一组件可以为Tab组件，当鼠标双击或右键选择第一组件时，进入第一组件的编辑模式，在屏幕中显示可以与第一组件关联的待选组件200。S2，检测到所述标签被选择时，显示标签编辑界面；当进行具体的标签编辑时，显示标签编辑界面，标签编辑界面可以为悬浮于当前网页上的独立页面。S3，检测关联组件被拖拽到所述标签编辑界面的预设区域时，将所述关联组件和所述标签的代码关联，所述关联组件来自所述待选组件。用户可将选定的关联组件通过鼠标拖拽的方式拖入标签编辑界面中，相应地，网页代码将标签与关联组件相关联。通过独立的标签编辑界面，用户只需要将与标签关联的组件拖入标签编辑页面，即可完成标签的编辑，操作更加方便直观。在另一个实施例中，关联组件可显示于网页的预设位置，预设位置的确定由通过检测关联组件被拖拽至的最终位置决定，用户可以根据需要将关联组件拖至网页的空白区域，而不限于第一组件本身容器大小的限制。在另一个实施例中，还包括关联组件编辑步骤，通过预设模板更改所述关联组件的属性，包括但不限于关联组件的位置、大小、字体、颜色等。标签编辑界面包括预览按钮，当检测到预览按钮被选中时，所述标签编辑界面隐藏，显示所述标签与所述关联组件的关联状态。本专利技术实施例还公开了一种网页组件编辑装置，包括：检测模块，用于检测网页中的第一组件、标签是否被选中；标签编辑界面显示模块，用于显示标签编辑界面；代码关联模块，用于关联所述标签和所述关联组件代码。本专利技术实施例还公开了一种网页组件编辑设备，包括：至少一个处理器，以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行所述的一种网页组件编辑方法。本专利技术实施例还公开了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行所述的网页组件编辑方法。上面结合附图对本专利技术实施例作了详细说明，但是本专利技术不限于上述实施例，在所属
普通技术人员所具备的知识范围内，还可以在不脱离本专利技术宗旨的前提下作出各种变化。此外，在不冲突的情况下，本专利技术的实施例及实施例中的特征可以相互组合。本文档来自技高网...

【技术保护点】
1.一种网页组件编辑方法，其特征在于，包括：/n当检测到网页中的第一组件被选中时，显示可选择与所述第一组件关联的待选组件，所述第一组件包括多个标签；/n检测到所述标签被选择时，显示标签编辑界面；/n检测关联组件被拖拽到所述标签编辑界面的预设区域时，将所述关联组件和所述标签的代码关联，所述关联组件来自所述待选组件。/n

【技术特征摘要】
1.一种网页组件编辑方法，其特征在于，包括：
当检测到网页中的第一组件被选中时，显示可选择与所述第一组件关联的待选组件，所述第一组件包括多个标签；
检测到所述标签被选择时，显示标签编辑界面；
检测关联组件被拖拽到所述标签编辑界面的预设区域时，将所述关联组件和所述标签的代码关联，所述关联组件来自所述待选组件。


2.根据权利要求1所述的一种网页组件编辑方法，其特征在于，当所述标签被选中时，所述关联组件显示于网页预设位置。


3.根据权利要求1所述的一种网页组件编辑方法，其特征在于，还包括关联组件编辑步骤，通过预设模板更改所述关联组件的属性。


4.根据权利要求3所述的一种网页组件编辑方法，其特征在于，所述属性包括所述关联组件的位置、大小、字体、颜色。


5.根据权利要求1所述的一种网页组件编辑方法，其特征在于，所述标签编辑界面包括预览按钮，<...

【专利技术属性】
技术研发人员：赵黎莉，
申请(专利权)人：卓望数码技术深圳有限公司，
类型：发明
国别省市：广东;44