Page 1 of 1

Collapsible List on Mobile Form

PostPosted: Tue Oct 20, 2015 3:55 am
by aliqazi01
Hi All,

We need to implement collapsible list For our Project. Do not have the default widget available. Is there any way we can inject the jquery mobile widgets which are not available by default.


Ali Qazi

Re: Collapsible List on Mobile Form

PostPosted: Fri Oct 30, 2015 10:19 am
by Gabi Boros
here are the steps to use the collapsible from JQM ( ... lapsibles/)

1. add a bean component to the form and set the 'innerHTML' in the properties view to :

<div data-role="mycollapsible">

2. initialize the collapsible in the 'onShow' callback of the form, add the following lines :

$('[data-role="mycollapsible"]').append('<div data-role="collapsible" data-theme="b" data-content-theme="c" id="collapsible2"></div>');
$("#collapsible2").append('<h2>Choose a car model...</h2>');
$("#collapsible2").append('<ul data-role="listview" id="test-listview"></ul>');
$("#test-listview").append('<li><a href="javascript:globals.onListItemClick(\'Acura\')">Acura</a></li>');
$("#test-listview").append('<li><a href="javascript:globals.onListItemClick(\'Audi\')">Audi</a></li>');
$("#test-listview").append('<li><a href="javascript:globals.onListItemClick(\'BMW\')">BMW</a></li>');


3. as you see in the previous code, there is also a callback added to the list item click, a function from the globals scope.