Collapsible List on Mobile Form

[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.

Regards

Ali Qazi

[Gabi Boros]

here are the steps to use the collapsible from JQM (http://demos.jquerymobile.com/1.3.2/wid ... lapsibles/)

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

<div data-role="mycollapsible">
</div>

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>');

$('[data-role="mycollapsible"]').trigger('create');

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.