We are so far in the process of implementing the add/remove function of small steps and perfectly correlating the execution order field.
In this section, we build its editing function. Editing features we plan to include on various Settings.
The effect is that the right side of the screen slides out of a div that is symmetric with the left div. Then click on the different steps and do a similar quick switch.
And then there’s the cancel, save button.
Ok, let’s open p_case.html and write a right_div just like we did with left_div, but with the opposite position animation parameters.
Then there is the corresponding show/hide js function:
The show_step function will be activated when you click any small step
In the figure above, as we all know, the list generation of our small steps is in the function refresh_left_div. We found the specific step button in the generated list. The step we designed is itself a long button. Now add the onclick property to it.
The content passed in is the step ID and name.
Let’s refresh the page to see what looks like:
Click on the right side of any small step will pop up the whiteboard, click on other steps, the whiteboard will quickly go back and pop up again.
Okay, so let’s start filling it in.
The first is to give the ids of the small steps, with their names at the bottom, in accordance with our custom of left-right symmetry, and the code follows the span of the large use case on the left:
As shown above, be careful not to miswrite case during data flow.
Refresh the page to see if it succeeded:
Once successful, we continue to write the top two buttons, cancel/save.
We call close_right_div for both buttons. So let’s do this step first, notice the left/right application here and there. Then try it out:
Click Save/Cancel and the div on the right disappears.
Look at the buttons:
Then we save/cancel both call the same function, so how do we tell the difference?
That is, we pass them different parameters to distinguish:
One passes “save” and one passes an empty string.
Then use if in the closing function:
About this saved script code, in fact, is simple to get the content of a bunch of input boxes in the right div, add the step ID, pass to the background, let the background update to the database.
That’s the end of this section. Welcome to keep watching