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.

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.

e.g. 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>

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.

e.g. 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); }

Note: 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");
})

If you have a comment on this topic, contact Aptify Documentation. If you want to return to the Aptify Community Site, please click here.

Adding Modules on Home Screen