Adding Modules on Home Screen

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.

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

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

   Example: index.html

   <div class="ui-block-a ui-menu"><a href="DiscussionForum.html" class="DiscussionForum"></a><span class="ui-menu-label">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.
   
   Example: css

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

   
   
   

   Add the below steps in the Aptify.touchevents.js file. This script support mobiles with the touch-screen facility.

   $( DiscussionForum).live("touchstart", function () { 
    $(this).addClass("home-icon-active-fake"); 
    }) 
    $( DiscussionForum).live("touchend", function () { 
    $(this).removeClass("home-icon-active-fake"); 
    }) 
    $( DiscussionForum).live("touchcancel", function () { 
    $(this).removeClass("home-icon-active-fake"); 
    })