Intel XDK: Controls 13: ACCORDION Control in App Designer 7
In this post I will be considering the most basic implementation of the ACCORDION control in an Intel XDK App Framework 7 project.
I had described the accordion control years ago while using the DOJO framework, another framework that worked splendidly.
You can create a project with an ACCORDION control on the web page.
You launch Intel XDK (Version3522) and create a Standard HTML5 project and choose to use the App Framework 7. This creates a single page application and the DESIGN features will be available.
I just placed a HEADER and replaced its title to My Books. The ACCORDION control is available under CONTROLS as shown.
Accordion_00
For this post I tried dragging and dropping this control on to the page and it does not work, probably by design. What you need to do is to drop the following HTML fragment for this control on the page.
Accordion_01
This is where you would place this code:
Accordion_02
This will generate an accordion control with three accordion items, the second of which is displayed expanded in SIMULATION (very faint ellipsis at the left edge of displayed area below 'My Books'..
Accordion_03
The first three ellipsis in the display belong to the three acordion items and the last ellipsis is what is shown in the fragment.
The second fragment is shown here and it shows a toggle and also the content it will toggle to.
Accordion_04
Now I added some content to replace the ellipsis in the HTML fragment as shown. The changes are as shown. In the content area insert your content which may include images, etc.
Accordion_05
With the above, the DESIGN page looks like this:
Accordion_06
The displayed page appears as shown with the first item in Clicked state. You can click the other accordion items which will close the one that is open and opens the one that is clicked.
Accordion_07
I apologize in inserting pictures of code instead of the code itself as the blogger does not support the 'pre' tags.
I had described the accordion control years ago while using the DOJO framework, another framework that worked splendidly.
You can create a project with an ACCORDION control on the web page.
You launch Intel XDK (Version3522) and create a Standard HTML5 project and choose to use the App Framework 7. This creates a single page application and the DESIGN features will be available.
I just placed a HEADER and replaced its title to My Books. The ACCORDION control is available under CONTROLS as shown.
Accordion_00
For this post I tried dragging and dropping this control on to the page and it does not work, probably by design. What you need to do is to drop the following HTML fragment for this control on the page.
This is where you would place this code:
Accordion_02
This will generate an accordion control with three accordion items, the second of which is displayed expanded in SIMULATION (very faint ellipsis at the left edge of displayed area below 'My Books'..
Accordion_03
The first three ellipsis in the display belong to the three acordion items and the last ellipsis is what is shown in the fragment.
The second fragment is shown here and it shows a toggle and also the content it will toggle to.
Accordion_04
Now I added some content to replace the ellipsis in the HTML fragment as shown. The changes are as shown. In the content area insert your content which may include images, etc.
Accordion_05
With the above, the DESIGN page looks like this:
Accordion_06
The displayed page appears as shown with the first item in Clicked state. You can click the other accordion items which will close the one that is open and opens the one that is clicked.
Accordion_07
I apologize in inserting pictures of code instead of the code itself as the blogger does not support the 'pre' tags.
Comments