Given example is a small tip on how to add icon on menuitem/button in Hybrid Web Container apps in SAP Mobile Platform (formerly SUP).
The JQuery Mobile framework includes a selected set of icons most often needed for mobile apps. It includes a single white icon sprite, and automatically adds a semi-transparent black circle to ensure that it has good contrast on any background color.
An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display. For example, the following markup:
<a href="index.html" data-role="button" data-icon="refresh">My button</a>
Creates this button with an icon:
In this example the icon on a button is added dynamically with few lines of jQuery code. Open the file workflow_jQueryMobileLookAndFeel.html
Find below codes inside the file that represents menu buttons in an IOS.
// Back button
<a href="javascript:void(0)" id="Time_Sheet_Day_DetailsScreenDivBack" name="Back" onclick="menuItemCallbackTime_Sheet_Day_DetailsScreenDivBack();"> Back</a>
// Refresh button
<a href="javascript:void(0)" id="Purchase_RequisitionsScreenDivRefresh" name="Refresh" onclick="menuItemCallbackPurchase_RequisitionsScreenDivRefresh();"> Refresh</a>
To make these menu buttons with icons on it, add below code to the function customBeforeNavigateForward
function customBeforeNavigateForward(screenKey, destScreenKey) {
$("#Time_Sheet_Day_DetailsScreenDivBack").attr('data-icon','back');
$("#Purchase_RequisitionsScreenDivRefresh").attr('data-icon','refresh');
return true;
}
A view from ipad after adding refresh icon on a button:
Midhun VP
@midhunvptwit
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
10 | |
7 | |
6 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |