notes of Electron Api Demo

section&category

1. add a new section to program

A category is consist of several sections, and the section is a part that contains a individual page

To create a new section in code, add following code in index.html

1	<button type="button" id="xxx2" data-section="xxx2" class="nav-button">Use system <em>dialogs</em></button>

in this pice of code, the real important element is (1)data-section=" " and (2)class=" "

(1)data-section=" " is relevant to template file to the file of the import links in the head of index.html. for example:
1
<link rel="import" href="sections/native-ui/dialogs.html">
the file name is of no use in fact(you can choose no matter what), but it can tell what the file’s content is. The real thing makes the Electron knows what to render is this data-section="xxx2" in index.html and the id="xxx2-section" in template file’s <section> tag.
when you make xxx2 the same in two files, then the Electron can render the correct html for section
(2)class=" " is about the style of the section looking like. In css file, it will all be defined.

2.add a demo

We can just copy a demo code of <div class="demo"> and paste to get a new demo, but the process of this demo must contain new JS action code different from the old demo.Or the new demo will just can be clicked but do nothing.

We can find that when the section code be imported by the head lines in index.html, the JS code used in the section code also is imported together.So the same JS code will just be imported once and just for the first section