Section Changer

The section changer component provides an application architecture, which has multiple sections on one page.
With Section changer on one page, you can scroll the <section> elements horizontally or vertically without changing current page to another.

It gets to have a virtue of needlessness of changing page and the existance of same header within multiple <section> elements.


Table of Contents

  1. How to Create Section Changer
  2. Options
  3. Events
  4. Methods
    1. setActiveSection
    2. getActiveSectionIndex
    3. refresh

How to Create Section Changer

To add a section changer component to the application, use the following code:

HTML code:

<div id="hasSectionchangerPage" class="ui-page">
   <header class="ui-header">
      <h2 class="ui-title">SectionChanger</h2>
   </header>
   <div id="sectionchanger" class="ui-content">
      <!--Section changer has only one child-->
      <div>
         <section>
            <h3>LEFT1 PAGE</h3>
         </section>
         <section class="section-active">
            <h3>MAIN PAGE</h3>
         </section>
         <section>
            <h3>RIGHT1 PAGE</h3>
         </section>
      </div>
   </div>
</div>

JS code:

(function()
{
   var page = document.getElementById("hasSectionchangerPage"),
       element = document.getElementById("sectionchanger"),
       sectionChanger, idx=1;

   page.addEventListener("pageshow", function()
   {
      /* Create the SectionChanger object */
      sectionChanger = tau.widget.SectionChanger(element,
      {
         circular: true,
         orientation: "horizontal",
         useBouncingEffect: true
      });
   });

   page.addEventListener("pagehide", function()
   {
      /* Release the object */
      sectionChanger.destroy();
   });
})();

Options

Option Input type Default value Description
orientation "horizontal"|"vertical" "horizontal"

Sets the section changer orientation
circular Boolean false Presents the sections in a circular scroll fashion.
useBouncingEffect Boolean false Shows a scroll end effect on the scroll edge.
Items String "section" Defines the section element selector.
activeClass String "section-active" Specifies the CSS classes which define the active section element.
Add the specified class (section-active) to a <section> element to indicate which section must be shown first.
By default, the first section is shown first.
fillContent Boolean true Declares width of section tag to fill content or not. If fillContent value is set to false, you must set the width of each section tag.

Events

Name Description
sectionchange

Triggered when the section is changed.

To use the sectionchange event, use the following code:

(function()
{
   var changer = document.getElementById("sectionchanger");
   changer.addEventListener("sectionchange", function(evt)
   {
      console.debug(evt.detail.active + " section is active.");
   });
})();

Methods

Summary

Method Description 
setActiveSection(number index)

Changes the currently active section element (index).
For smooth scrolling, the duration parameter must be in milliseconds.

 
number getActiveSectionIndex()

Gets the currently active section element's index.
The return value is a number (activeIndex).

 
refresh()

Updates the section changer form.
When you add new section dynamically through JavaScript, you must call the refresh() method to update section information.
setActiveSection

Changes the currently active section element (index).
For smooth scrolling, the duration parameter must be in milliseconds.

setActiveSection(number index)

Parameters:

Parameter Type Required / optional Default value Description
index number required index which is set be active state.

Return value:

No Return Value
getActiveSectionIndex

Gets the currently active section element's index.
The return value is a number (activeIndex).

number getActiveSectionIndex()

Return value:

Type Description
number index of active section
refresh

Updates the section changer form.
When you add new section dynamically through JavaScript, you must call the refresh() method to update section information.

refresh()

Return value:

No Return Value