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.
Figure 13 - Adding Modules on the Home Screen
Follow the steps below to add a new module to the Application Home Screen:
Add the <div> to the Home HTML page.
...
Example: index.html
...
No Format nopanel true <div class="ui-block-a ui-menu"
...
><a href="DiscussionForum.html" class="DiscussionForum"></
...
a><span class="ui-menu-label"
...
>Discussion Forum</span> </div>
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: cssNo Format nopanel true .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); }
Note
...
Add the below steps in
...
the Aptify.touchevents.js
...
file. This script support mobiles with the touch-screen facility.
No Format nopanel true $( 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");
...
})