Editing method and device of page elements, storage medium and terminal

文档序号:7170 发布日期:2021-09-17 浏览:47次 中文

1. A method for editing page elements, comprising:

when a target page element is selected on the first page, displaying the shear plate through the display unit;

acquiring a target code of the target page element, and generating a target picture according to the target page element;

adding the target picture into the clipboard, storing the target code, and establishing a corresponding relation between the target picture and the target code;

responding to a dragging instruction aiming at the target picture in the shear plate, and determining a target code corresponding to the target picture according to the corresponding relation;

inserting the target code into a code set of a second page, and rendering on the second page according to the target code.

2. The method of claim 1, wherein displaying a clipboard when the target page element is selected on the first page comprises:

displaying a page editing menu through a display unit in response to a selection instruction on a target page element in a first page; wherein the page editing menu comprises a save button;

and responding to a trigger instruction on the saving button, and displaying a shear plate through the display unit.

3. The method according to claim 1 or 2, wherein before displaying the clipboard when the target page element is selected on the first page, further comprising:

dividing the first page into a plurality of page elements;

displaying a highlight mark on the page element when the cursor is detected to move to the page element.

4. The method according to claim 1 or 2, wherein the generating a target picture according to the target page element comprises:

screenshot is carried out on the target page element to obtain a first picture;

and cutting and compressing the first picture to obtain a target picture.

5. The method of claim 4, further comprising:

counting the calling times of each picture in the shear plate;

and arranging the pictures in a descending mode of the calling times.

6. The method of claim 5, further comprising:

and responding to the editing instruction of the clipboard, and deleting and moving the selected picture.

7. The method of claim 1 or 2 or 5 or 6, wherein inserting the object code into a code set of a second page and rendering on the second page according to the object code comprises:

acquiring the end position of the dragging instruction in the second page;

inserting the target code into a code set of the second page according to the end position;

and rendering according to the target code to obtain target page elements, and laying out the target page elements according to the end position.

8. A data processing apparatus for a time series database, comprising:

the selection unit is used for displaying the shear plate through the display unit when the target page element is selected in the first page;

the generating unit is used for acquiring a target code of the target page element and generating a target picture according to the target page element;

the establishing unit is used for adding the target picture into the clipboard, storing the target code and establishing a corresponding relation between the target picture and the target code;

a determining unit, configured to determine, in response to a dragging instruction for the target picture in the clipboard, a target code corresponding to the target picture according to the correspondence;

and the calling unit is used for inserting the target code into a code set of a second page and rendering the target code on the second page according to the target code.

9. A terminal comprising a processor and a memory, wherein the memory is configured to store a computer program comprising program instructions, and wherein the processor is configured to invoke the program instructions to perform the method of any of claims 1-7.

10. A computer-readable storage medium, characterized in that the computer storage medium stores a computer program comprising program instructions that, when executed by a processor, cause the processor to perform the method according to any of claims 1-7.

Background

In server/browser communication, a page designed for man-machine interaction is required, and the page includes various page elements, such as: in a complex page design, a developer needs to design a large number of page elements, and how to improve the development efficiency of a page is a problem to be solved urgently at present.

Disclosure of Invention

The embodiment of the application provides a method and a device for editing page elements, a storage medium and a terminal, and the efficiency of page development is improved through multiplexing of the page elements. The technical scheme is as follows:

in a first aspect, an embodiment of the present application provides a method for editing a page element, where the method includes:

when a target page element is selected on the first page, displaying the shear plate through the display unit;

acquiring a target code of the target page element, and generating a target picture according to the target page element;

adding the target picture into the clipboard, storing the target code, and establishing a corresponding relation between the target picture and the target code;

responding to a dragging instruction aiming at the target picture in the shear plate, and determining a target code corresponding to the target picture according to the corresponding relation;

inserting the target code into a code set of a second page, and rendering on the second page according to the target code.

In a second aspect, an embodiment of the present application provides an apparatus for editing a page element, where the apparatus includes:

the selection unit is used for displaying the shear plate through the display unit when the target page element is selected in the first page;

the generating unit is used for acquiring a target code of the target page element and generating a target picture according to the target page element;

the establishing unit is used for adding the target picture into the clipboard, storing the target code and establishing a corresponding relation between the target picture and the target code;

a determining unit, configured to determine, in response to a dragging instruction for the target picture in the clipboard, a target code corresponding to the target picture according to the correspondence;

and the calling unit is used for inserting the target code into a code set of a second page and rendering the target code on the second page according to the target code.

In a third aspect, embodiments of the present application provide a computer storage medium storing a plurality of instructions adapted to be loaded by a processor and to perform the above-mentioned method steps.

In a fourth aspect, an embodiment of the present application provides a terminal, which may include: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and to perform the above-mentioned method steps.

The beneficial effects brought by the technical scheme provided by some embodiments of the application at least comprise:

in the page editing process, the selected page picture is added into the clipboard, the corresponding relation between the page code and the picture is stored, then the code corresponding to the picture in the clipboard is added into the page code set in response to the dragging instruction of the user, then the code is rendered on the page, the multiplexing of page elements is realized, and the user can conveniently and quickly introduce the page elements into the page by using the clipboard, so that the page editing efficiency can be improved.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

Fig. 1 is a schematic flowchart of a method for editing a page element according to an embodiment of the present application;

fig. 2 is another schematic flowchart of a method for editing a page element according to an embodiment of the present application;

3-6 are schematic diagrams of improved user interfaces of embodiments of the present application;

fig. 7 is a schematic structural diagram of an apparatus for editing a page element according to an embodiment of the present application;

fig. 8 is a schematic structural diagram of a terminal according to an embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more clear, embodiments of the present application will be described in further detail below with reference to the accompanying drawings.

When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the application, as detailed in the appended claims.

In the description of the present application, it is to be understood that the terms "first," "second," and the like are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. The specific meaning of the above terms in the present application can be understood in a specific case by those of ordinary skill in the art. Further, in the description of the present application, "a plurality" means two or more unless otherwise specified. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.

The following describes in detail an editing method for a page element provided in an embodiment of the present application with reference to fig. 1 to 6. The method may be implemented in dependence on a computer program, executable on an editing device based on page elements of the von neumann architecture. The computer program may be integrated into the application or may run as a separate tool-like application. The page element editing apparatus in the embodiment of the present application may be a terminal, including but not limited to a smartphone, a personal computer, a tablet computer, a handheld device, an in-vehicle device, a wearable device, a computing device, or other processing device connected to a wireless modem.

Please refer to fig. 1, which is a flowchart illustrating a method for editing a page element according to an embodiment of the present application. As shown in fig. 1, the method of the embodiment of the present application may include the steps of:

s101, when the target page element is selected on the first page, the clipboard is displayed through the display unit.

Wherein, the first page contains one or more page elements, the page elements are UI elements visible to the user, and the page elements may be elements with interactive functions, such as: the user clicks the element to realize skipping or page turning; or elements with no interactive functionality; each page element corresponds to a piece of code, for example: HTML code, which may represent the shape, size, and display of the page element, etc. The editing apparatus firstly displays a first page including a plurality of page elements through a display unit, and a user can perform a selection operation on the first page, where the selection operation is generated by an input device such as a mouse, a keyboard, or a touch screen, for example: the method comprises the steps that a user executes selection operation on a first page through a mouse, an editing device triggers a selection instruction according to the selection operation, a target page element selected by the user is determined according to the selection instruction, then a shear plate is displayed through a display unit, the shear plate is a panel or a floating layer located on the upper layer of the first page, and the shear plate comprises one or more pictures corresponding to interface elements.

S102, acquiring a target code of the target page element, and generating a target picture according to the target page element.

The object code is used for controlling the position, shape, size and display mode of the object page element on the first page, and the type of the code can be HTML code. The target picture is picture data generated based on display contents of target page elements on the first page, the target code can be rendered based on canvas to generate the target picture, or screenshot processing is carried out on the target page elements, and then the intercepted picture is cut and compressed to obtain the target picture.

S103, adding the target picture into the clipboard, storing the target code, and establishing a corresponding relation between the target picture and the target code.

The editing device adds the target picture into the clipboard, the pictures in the clipboard can be arranged from top to bottom in a list mode, when the pictures exist in the clipboard, the target picture can be added to the rearmost side of the clipboard, the target code is stored in the memory, and then the corresponding relation between the target picture and the target code is established.

And S104, responding to the dragging instruction aiming at the target picture in the shear plate, and determining the target code corresponding to the target picture according to the corresponding relation.

When the user needs to multiplex the codes, the user performs dragging operation on the shear plate, the editing device generates a dragging instruction according to the dragging operation, and the dragging operation can be generated by input equipment such as a mouse, a keyboard or a touch screen. For example: the user moves the cursor to the target picture by using the mouse, presses the left mouse button to move the mouse to drag the target picture, and releases the left mouse button to finish dragging operation when the mouse is dragged to the target position; or the user drags the target picture through the touch pad, the finger of the user presses the target picture to drag the target picture to a specified position, and the dragging operation is completed after the finger is released. And when the editing device determines the target picture selected in the clipboard, inquiring the target code associated with the target picture according to the preset corresponding relation.

Further, the editing apparatus may automatically sort the pictures in the clipboard, for example: the editing device counts the calling times of each picture (namely the times of multiplexing of codes corresponding to the pictures) within a preset time length, sorts the pictures in a descending mode according to the calling times, the pictures with larger calling times are arranged at the positions closer to the front, the pictures with smaller calling times are arranged at the positions closer to the back, and therefore a user can place the pictures frequently used by the user at the positions closer to the front, and the time of searching the pictures by the user is reduced.

Furthermore, the user can also manually sort or delete the pictures in the clipboard, and the user moves the positions of the pictures up or down, or deletes the pictures in the clipboard, and the codes of the deleted pictures are correspondingly deleted, so that redundant pictures in the clipboard are reduced.

And S105, inserting the target code into the code set of the second page, and rendering in the second page according to the target code.

The second page comprises a plurality of page elements, each page element corresponds to one code, the target codes are inserted into the code set of the second page, then the target page elements are obtained by rendering in the second page according to the target codes according to the position indicated by the dragging instruction, and the target page elements are laid out in the second page. It should be noted that the first page and the second page may be the same page, that is, the target element is copied and pasted in the same page, so as to implement multiplexing of the target element.

In the embodiment of the application, in the page editing process, the selected page picture is added into the clipboard, the corresponding relation between the page code and the picture is stored, then the drag instruction of the user is responded, the code corresponding to the picture in the clipboard is added into the page code set, then the code is rendered on the page, the multiplexing of the page elements is realized, and the user can conveniently and quickly introduce the page elements into the page by using the clipboard, so that the page editing efficiency can be improved.

Fig. 6 is a schematic flowchart of a method for editing a page element according to an embodiment of the present application. The method for editing the page element can comprise the following steps:

s201, dividing the first page into a plurality of page elements.

The editing apparatus may divide the first page into a plurality of page elements in advance, where the page elements are reusable page elements with a minimum granularity, and the page elements are UI elements, for example: an HTML DOM element.

S202, when the cursor is detected to move to the page element, displaying a highlight mark on the page element.

The shape of the page element is generally a rectangle or a circle, and has a certain boundary range, when it is detected that the cursor moves onto the page element, a highlight mark and a prompt tone are displayed on the page element, and the highlight mark may be a thick line frame displayed on a frame of the page element, which indicates that the page element is in a selectable state. It will be appreciated that when a user interacts through the touch screen, a highlight mark is displayed on a page element when the user's finger is detected to move within the boundaries of the page element.

S203, responding to a selection instruction on a target page element in the first page, and displaying a page editing menu through the display unit.

The user may select one or more page elements from the plurality of page elements included in the first page as target page elements, the selection may be performed by clicking or frame selection, the selected target page elements include one or more page elements with the smallest granularity, and highlight marks are displayed on the selected target page elements, for example: the dashed box. The editing device responds to a selection instruction of a user, displays a page editing menu on the display unit, wherein the page editing menu comprises a saving button, the saving button is triggered by the user to add the picture of the selected target page element into the clipboard, and the page editing menu comprises other controls for editing the webpage besides the saving button, such as: code editing controls, code debugging controls, and the like.

And S204, responding to a trigger instruction on the save button, and displaying the shear plate through the display unit.

Wherein, the trigger instruction is generated by the user based on the trigger operation, for example: after the user clicks the save button with a mouse, the clipboard is displayed.

S205, acquiring the target code of the target page element.

Wherein the type of the target code may be one or more of HTML code, CSS code, and Java code, and represents relevant attributes of the target page element, such as: font, location, color and display mode.

And S206, screenshot is carried out on the target page element to obtain a first picture.

And S207, cutting and compressing the first picture to obtain a target picture.

The size and the dimension of the first picture may not meet the requirements of the cropping plate, so the first picture is cropped to obtain a specified dimension, and the first picture is compressed to obtain a target picture with the specified dimension.

S208, adding the target picture into the clipboard, storing the target code, and establishing a corresponding relation between the target picture and the target code.

Wherein the target picture is added to the clipboard, for example: and adding the target picture to the forefront of the clipboard, storing the target code into a memory, and then establishing a corresponding relation between the target picture and the target code.

It is easily understood that the present application may also add the picture to the clipboard directly, without displaying the clipboard, before adding the picture to the clipboard.

S209, responding to the dragging instruction aiming at the target picture in the shear plate, and determining the target code corresponding to the target picture according to the corresponding relation.

When the editing device needs to edit the second page, the cutting board is displayed on the second page, then dragging operation is executed on the cutting board, and the target picture in the cutting board is dragged to any position of the second page.

And S210, acquiring the end position of the dragging instruction in the second page.

Wherein the end position is a position where the drag operation ends on the second page, for example: and when the left mouse button is used for pressing the dragged target picture, the position of the left mouse button when the left mouse button is released is the end position of the dragging instruction.

And S211, inserting the target code into the code set of the second page according to the end position.

S212, target page elements are obtained according to the target code rendering, and the target page elements are laid out according to the end positions.

The following describes the editing method of the page element in detail with respect to several specific examples:

referring to fig. 3, after the user selects the target page element in the first page, a page editing menu is displayed, the page editing menu includes a save button, when the cursor moves to the save button, a prompt message of "temporarily storing to the clipboard" is displayed, the prompt message prompts the function of the save button by the user,

referring to fig. 4, after the user clicks the save button, the clipboard is displayed, the editing device obtains the target code of the target page element and the target picture corresponding to the target page element, establishes a corresponding relationship between the target picture and the target code, and adds the target picture to the clipboard. And after the click operation on the delete button is detected, the editing device can delete the target picture. In addition, when the cursor moves to the target picture in the clipboard, the rendering effect of the target picture in the page is previewed.

Referring to fig. 5, when the second page needs to be edited, a clipboard is displayed on the second page, and the clipboard contains the target picture added previously.

Referring to fig. 6, a user drags the target picture in the clipboard, drags the target picture to the position of the upper left corner of the second page, the editing device obtains the target code of the target picture according to the corresponding relationship, inserts the code into the specified position of the code set of the second page, and renders the target code on the second page to obtain a page element.

In the embodiment of the application, the voice data of the current call is collected, the voice data is converted into the text data, when the text data is identified to comprise the preset keywords, the fraud case associated with the preset keywords is inquired, and the fraud case is displayed through the display unit. Therefore, the fraud telephone can be identified through the content of the current call, the fraud case is displayed, and the user can recognize the geiger of the fraud molecule by reading the reminding of the fraud case, so that the risk of being cheated is reduced.

The following are embodiments of the apparatus of the present application that may be used to perform embodiments of the method of the present application. For details which are not disclosed in the embodiments of the apparatus of the present application, reference is made to the embodiments of the method of the present application.

Referring to fig. 7, a schematic structural diagram of an apparatus for editing a page element according to an exemplary embodiment of the present application is shown. The page element editing means may be implemented as all or part of the terminal in software, hardware or a combination of both. The device 7 comprises: a selection unit 701, a generation unit 702, a creation unit 703, a determination unit 704, and a calling unit 705.

A selecting unit 701 configured to display the clipboard through the display unit when the target page element is selected in the first page;

a generating unit 702, configured to obtain a target code of the target page element, and generate a target picture according to the target page element;

an establishing unit 703, configured to add the target picture to the clipboard, store the target code, and establish a correspondence between the target picture and the target code;

a determining unit 704, configured to determine, in response to a dragging instruction for the target picture in the clipboard, a target code corresponding to the target picture according to the correspondence;

a calling unit 704, configured to insert the target code into a code set of a second page, and render on the second page according to the target code.

When the target page element is selected in the first page, the clipboard is displayed, including:

displaying a page editing menu through a display unit in response to a selection instruction on a target page element in a first page; wherein the page editing menu comprises a save button;

and responding to a trigger instruction on the saving button, and displaying a shear plate through the display unit.

In one or more possible embodiments, before displaying the clipboard when the target page element is selected in the first page, the method further includes:

dividing the first page into a plurality of page elements;

displaying a highlight mark on the page element when the cursor is detected to move to the page element.

In one or more possible embodiments, the generating a target picture according to the target page element includes:

screenshot is carried out on the target page element to obtain a first picture;

and cutting and compressing the first picture to obtain a target picture.

In one or more possible embodiments, the method further comprises:

the sorting unit is used for counting the calling times of each picture in the shear plate; and arranging the pictures in a descending mode of the calling times.

In one or more possible embodiments, the method further comprises:

and the editing unit is used for responding to the editing instruction of the clipboard and deleting and moving the selected picture.

In one or more possible embodiments, the inserting the object code into a code set of a second page and rendering on the second page according to the object code includes:

acquiring the end position of the dragging instruction in the second page;

inserting the target code into a code set of the second page according to the end position;

and rendering according to the target code to obtain target page elements, and laying out the target page elements according to the end position.

It should be noted that, when the editing apparatus for page elements provided in the foregoing embodiment executes the method for editing page elements, only the division of the above functional modules is taken as an example, and in practical applications, the functions may be distributed by different functional modules according to needs, that is, the internal structure of the device may be divided into different functional modules, so as to complete all or part of the functions described above. In addition, the apparatus for recovering user data provided by the above embodiment and the editing method embodiment of the page element belong to the same concept, and details of the implementation process are found in the method embodiment, and are not described herein again.

The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.

An embodiment of the present application further provides a computer storage medium, where the computer storage medium may store a plurality of instructions, where the instructions are suitable for being loaded by a processor and executing the method steps in the embodiments shown in fig. 1 to 6, and a specific execution process may refer to specific descriptions of the embodiments shown in fig. 1 to 6, which are not described herein again.

Please refer to fig. 8, which provides a schematic structural diagram of a terminal according to an embodiment of the present application. As shown in fig. 8, the terminal 800 may include: at least one processor 801, at least one network interface 804, a user interface 803, a memory 805, at least one communication bus 802.

Wherein a communication bus 802 is used to enable connective communication between these components.

The user interface 803 may include a Display screen (Display) and a Camera (Camera), and the optional user interface 803 may also include a standard wired interface and a wireless interface.

The network interface 804 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface).

Processor 801 may include one or more processing cores, among other things. The processor 801 connects various parts within the overall terminal 800 using various interfaces and lines, performs various functions of the terminal 800 and processes data by executing or executing instructions, programs, code sets, or instruction sets stored in the memory 805, and calling data stored in the memory 805. Alternatively, the processor 801 may be implemented in at least one hardware form of Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), and Programmable Logic Array (PLA). The processor 801 may integrate one or more of a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), a modem, and the like. Wherein, the CPU mainly processes an operating system, a user interface, an application program and the like; the GPU is used for rendering and drawing the content required to be displayed by the display screen; the modem is used to handle wireless communications. It is to be understood that the modem may not be integrated into the processor 801, but may be implemented by a single chip.

The Memory 805 may include a Random Access Memory (RAM) or a Read-Only Memory (Read-Only Memory). Optionally, the memory 805 includes a non-transitory computer-readable medium. The memory 805 may be used to store instructions, programs, code sets, or instruction sets. The memory 805 may include a stored program area and a stored data area, wherein the stored program area may store instructions for implementing an operating system, instructions for at least one function (such as a touch function, a sound playing function, an image playing function, etc.), instructions for implementing the various method embodiments described above, and the like; the storage data area may store data and the like referred to in the above respective method embodiments. The memory 805 may optionally be at least one memory device located remotely from the processor 801 as previously described. As shown in fig. 8, the memory 805, which is a type of computer storage medium, may include an operating system, a network communication module, a user interface module, and a fraud telephone identification application.

In the terminal 800 shown in fig. 8, the user interface 803 is mainly used for providing an input interface for a user to obtain data input by the user; and the processor 801 may be used to invoke the identification application of the fraudulent phone stored in the memory 805 and to specifically execute the method shown in fig. 1 or fig. 2.

The embodiment of the present application and the embodiment of the method in fig. 1 or fig. 2 belong to the same concept, and the technical effects thereof are also the same, and the specific process may refer to the description in fig. 1 or fig. 2, and will not be described again here.

In the embodiment of the application, in the page editing process, the selected page picture is added into the clipboard, the corresponding relation between the page code and the picture is stored, then the drag instruction of the user is responded, the code corresponding to the picture in the clipboard is added into the page code set, then the code is rendered on the page, the multiplexing of the page elements is realized, and the user can conveniently and quickly introduce the page elements into the page by using the clipboard, so that the page editing efficiency can be improved.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a read-only memory or a random access memory.

The above disclosure is only for the purpose of illustrating the preferred embodiments of the present application and is not to be construed as limiting the scope of the present application, so that the present application is not limited thereto, and all equivalent variations and modifications can be made to the present application.

完整详细技术资料下载
上一篇:石墨接头机器人自动装卡簧、装栓机
下一篇:一种软件开发方法及装置

网友询问留言

已有0条留言

还没有人留言评论。精彩留言会获得点赞!

精彩留言,会给你点赞!