Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

You can add different modules to the Aptify Mobile for Members Application as per your organization's requirements. In the example below, the Discussion Forum module will be added. Image Removed
Figure 13 - Adding Modules on the Home Screen


Adding Modules on the Home ScreenImage Added

Follow the steps below to add a new module to the Application Home Screen:

  1. Add the <div> to the Home HTML page.

...


  1. Example: index.html

...

  1. No Format
    nopaneltrue
    <div class="ui-block-a ui-menu"

...

  1. ><a href="DiscussionForum.html" class="DiscussionForum"></

...

  1. a><span class="ui-menu-label"

...

  1. >Discussion Forum</span> </div>
  2. Add the required image for any module change to the image sub folder in the styles folder. 

    You will have to create a separate class for styling the module in Aptify.Mobile.CSS.

...


  1. Example: css

    No Format
    nopaneltrue
    .DiscussionForum {background:url('images/Discussion.jpg') no-repeat left top;-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

...

  1.  
     .DiscussionForum:active, .DiscussionForum-active-fake {background:url('images/Discussion.jpg') no-repeat left bottom;-webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
    Note

...

  1. Add the below steps in

...

  1. the Aptify.touchevents.js

...

  1.  file. This script support mobiles with the touch-screen facility.

    No Format
    nopaneltrue
    $( DiscussionForum).live("touchstart", function () {

...

  1.  
     $(this).addClass("home-icon-active-fake");

...

  1.  
     })

...

  1.  
     $( DiscussionForum).live("touchend", function () {

...

  1.  
     $(this).removeClass("home-icon-active-fake");

...

  1.  
     })

...

  1.  
     $( DiscussionForum).live("touchcancel", function () {

...

  1.  
     $(this).removeClass("home-icon-active-fake");

...

  1.  
     })