CN111258569A - 网页组件编辑方法、装置、设备和计算机可读存储介质 - Google Patents

网页组件编辑方法、装置、设备和计算机可读存储介质 Download PDF

Info

Publication number
CN111258569A
CN111258569A CN202010020531.2A CN202010020531A CN111258569A CN 111258569 A CN111258569 A CN 111258569A CN 202010020531 A CN202010020531 A CN 202010020531A CN 111258569 A CN111258569 A CN 111258569A
Authority
CN
China
Prior art keywords
component
editing
label
web page
association
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010020531.2A
Other languages
English (en)
Inventor
赵黎莉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Aspire Digital Technologies Shenzhen Co Ltd
Original Assignee
Aspire Digital Technologies Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Aspire Digital Technologies Shenzhen Co Ltd filed Critical Aspire Digital Technologies Shenzhen Co Ltd
Priority to CN202010020531.2A priority Critical patent/CN111258569A/zh
Publication of CN111258569A publication Critical patent/CN111258569A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

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

Claims (8)

1.一种网页组件编辑方法，其特征在于，包括：
当检测到网页中的第一组件被选中时，显示可选择与所述第一组件关联的待选组件，所述第一组件包括多个标签；
检测到所述标签被选择时，显示标签编辑界面；
检测关联组件被拖拽到所述标签编辑界面的预设区域时，将所述关联组件和所述标签的代码关联，所述关联组件来自所述待选组件。
2.根据权利要求1所述的一种网页组件编辑方法，其特征在于，当所述标签被选中时，所述关联组件显示于网页预设位置。
3.根据权利要求1所述的一种网页组件编辑方法，其特征在于，还包括关联组件编辑步骤，通过预设模板更改所述关联组件的属性。
4.根据权利要求3所述的一种网页组件编辑方法，其特征在于，所述属性包括所述关联组件的位置、大小、字体、颜色。
5.根据权利要求1所述的一种网页组件编辑方法，其特征在于，所述标签编辑界面包括预览按钮，
当检测到所述预览按钮被选中时，所述标签编辑界面隐藏，显示所述标签与所述关联组件的关联状态。
6.一种网页组件编辑装置，其特征在于，包括：
检测模块，用于检测网页中的第一组件、标签是否被选中；
标签编辑界面显示模块，用于显示标签编辑界面；
代码关联模块，用于关联所述标签和所述关联组件代码。
7.一种网页组件编辑设备，其特征在于，包括：
至少一个处理器，以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至5任一项所述的一种网页组件编辑方法。
8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行如权利要求1至5任一项所述的网页组件编辑方法。
CN202010020531.2A 2020-01-09 2020-01-09 网页组件编辑方法、装置、设备和计算机可读存储介质 Pending CN111258569A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010020531.2A CN111258569A (zh) 2020-01-09 2020-01-09 网页组件编辑方法、装置、设备和计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010020531.2A CN111258569A (zh) 2020-01-09 2020-01-09 网页组件编辑方法、装置、设备和计算机可读存储介质

Publications (1)

Publication Number Publication Date
CN111258569A true CN111258569A (zh) 2020-06-09

Family

ID=70945141

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010020531.2A Pending CN111258569A (zh) 2020-01-09 2020-01-09 网页组件编辑方法、装置、设备和计算机可读存储介质

Country Status (1)

Country Link
CN (1) CN111258569A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111913637A (zh) * 2020-08-28 2020-11-10 平安国际智慧城市科技股份有限公司 组件操作控制方法、装置及存储介质
CN113821203A (zh) * 2020-06-20 2021-12-21 华为技术有限公司 App开发平台、app开发方法及电子设备
CN114625365A (zh) * 2022-03-11 2022-06-14 北京金堤科技有限公司 网页编辑界面、网页编辑方法、电子设备和存储介质

Citations (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103019538A (zh) * 2012-11-19 2013-04-03 北京奇虎科技有限公司 一种在终端中实现应用界面的方法和系统
US20130326345A1 (en) * 2012-06-04 2013-12-05 Aphotofolio.Com Editor for website and website menu
CN103955364A (zh) * 2014-04-15 2014-07-30 南威软件股份有限公司 一种适用于手机的前端组件方法
US20140337767A1 (en) * 2013-05-07 2014-11-13 Axure Software Solutions, Inc. Design environment for responsive graphical designs
US20150205450A1 (en) * 2014-01-21 2015-07-23 Apptimize, Inc. User interface modification and usage tracking
CN105022615A (zh) * 2014-04-21 2015-11-04 大唐软件技术股份有限公司 一种界面的生成方法和系统
US20160092049A1 (en) * 2014-09-26 2016-03-31 Oracle International Corporation Generic editor layout using intrinsic persistence metadata
CN105630665A (zh) * 2014-11-07 2016-06-01 卓望数码技术（深圳）有限公司 一种基于安卓系统的应用程序调试方法及终端设备
CN106131630A (zh) * 2016-06-27 2016-11-16 乐视控股（北京）有限公司 基于电视机的网页浏览控制方法及相关装置
CN108304113A (zh) * 2017-12-28 2018-07-20 深圳市创梦天地科技股份有限公司 一种界面交互配置方法及终端
CN108345456A (zh) * 2018-03-07 2018-07-31 平安普惠企业管理有限公司 页面代码生成方法、装置、计算机设备和存储介质
CN108595965A (zh) * 2018-04-28 2018-09-28 北京字节跳动网络技术有限公司 防止界面控件的属性信息被窃取的方法及其装置
CN109725806A (zh) * 2018-12-28 2019-05-07 北京小米移动软件有限公司 站点编辑方法及装置
CN110020292A (zh) * 2017-10-13 2019-07-16 华为技术有限公司 网页内容提取方法以及终端设备
CN110286896A (zh) * 2019-06-28 2019-09-27 百度在线网络技术（北京）有限公司 可视化编辑方法、装置、设备及存储介质

Patent Citations (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130326345A1 (en) * 2012-06-04 2013-12-05 Aphotofolio.Com Editor for website and website menu
CN103019538A (zh) * 2012-11-19 2013-04-03 北京奇虎科技有限公司 一种在终端中实现应用界面的方法和系统
US20140337767A1 (en) * 2013-05-07 2014-11-13 Axure Software Solutions, Inc. Design environment for responsive graphical designs
US20150205450A1 (en) * 2014-01-21 2015-07-23 Apptimize, Inc. User interface modification and usage tracking
CN103955364A (zh) * 2014-04-15 2014-07-30 南威软件股份有限公司 一种适用于手机的前端组件方法
CN105022615A (zh) * 2014-04-21 2015-11-04 大唐软件技术股份有限公司 一种界面的生成方法和系统
US20160092049A1 (en) * 2014-09-26 2016-03-31 Oracle International Corporation Generic editor layout using intrinsic persistence metadata
CN105630665A (zh) * 2014-11-07 2016-06-01 卓望数码技术（深圳）有限公司 一种基于安卓系统的应用程序调试方法及终端设备
CN106131630A (zh) * 2016-06-27 2016-11-16 乐视控股（北京）有限公司 基于电视机的网页浏览控制方法及相关装置
CN110020292A (zh) * 2017-10-13 2019-07-16 华为技术有限公司 网页内容提取方法以及终端设备
CN108304113A (zh) * 2017-12-28 2018-07-20 深圳市创梦天地科技股份有限公司 一种界面交互配置方法及终端
CN108345456A (zh) * 2018-03-07 2018-07-31 平安普惠企业管理有限公司 页面代码生成方法、装置、计算机设备和存储介质
CN108595965A (zh) * 2018-04-28 2018-09-28 北京字节跳动网络技术有限公司 防止界面控件的属性信息被窃取的方法及其装置
CN109725806A (zh) * 2018-12-28 2019-05-07 北京小米移动软件有限公司 站点编辑方法及装置
CN110286896A (zh) * 2019-06-28 2019-09-27 百度在线网络技术（北京）有限公司 可视化编辑方法、装置、设备及存储介质

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113821203A (zh) * 2020-06-20 2021-12-21 华为技术有限公司 App开发平台、app开发方法及电子设备
CN111913637A (zh) * 2020-08-28 2020-11-10 平安国际智慧城市科技股份有限公司 组件操作控制方法、装置及存储介质
CN111913637B (zh) * 2020-08-28 2024-01-02 平安国际智慧城市科技股份有限公司 组件操作控制方法、装置及存储介质
CN114625365A (zh) * 2022-03-11 2022-06-14 北京金堤科技有限公司 网页编辑界面、网页编辑方法、电子设备和存储介质
CN114625365B (zh) * 2022-03-11 2024-01-19 北京金堤科技有限公司 网页编辑系统、网页编辑方法、电子设备和存储介质

Similar Documents

Publication Publication Date Title
US10606533B2 (en) Editing an image on a medium using a template including attribute information of an object in the image
US7272818B2 (en) Creation of an object within an object hierarchy structure
KR101733943B1 (ko) 계층적-체계화된 컨트롤 갤러리 제공 기법
CN111258569A (zh) 网页组件编辑方法、装置、设备和计算机可读存储介质
US8438531B2 (en) Visualization and information display for shapes in displayed graphical images
US20050183005A1 (en) Systems and methods for freeform annotations
US8645901B2 (en) Visualization and information display for shapes in displayed graphical images based on a cursor
US20120092269A1 (en) Computer-implemented method for manipulating onscreen data
AU2019229348B2 (en) Pre-filtering for visual object searching of documents
AU2013332591A1 (en) User terminal device and control method thereof
US10210141B2 (en) Stylizing text by replacing glyph with alternate glyph
US8533626B2 (en) Visualization and information display for shapes in displayed graphical images based on user zone of focus
US8635523B2 (en) Layout editing device and computer program product
JP6237135B2 (ja) 情報処理装置及び情報処理プログラム
US8737746B2 (en) Method for multiple pass symbol and components-based visual object searching of documents
CN113515221B (zh) 基于电子文档的图片和文字对照展示方法及装置
JP2015135596A (ja) 情報処理装置及び情報処理プログラム
US10437464B2 (en) Content filtering system for touchscreen devices
US11430166B1 (en) Facilitating generation of number-bullet objects
US20150339284A1 (en) Design management apparatus, design management method, and non-transitory computer readable medium
US8504916B2 (en) Managing presentation and storing of multi-language fonts
JP7135653B2 (ja) 情報処理装置及びプログラム
CN116992852A (zh) 一种富文本内容对比的方法、装置、电子设备和存储介质
CN115994009A (zh) 一种页面截图方法及装置
JP6171735B2 (ja) 情報処理装置、情報処理方法およびプログラム

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20200609