Collapsible List on Mobile Form

Home for older / inactive topics

Collapsible List on Mobile Form

Postby aliqazi01 » Tue Oct 20, 2015 3:55 am

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
Posts: 14
Joined: Mon Nov 04, 2013 7:35 am

Re: Collapsible List on Mobile Form

Postby Gabi Boros » Fri Oct 30, 2015 10:19 am

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.
Gabi Boros
Gabi Boros
Posts: 377
Joined: Tue Jun 26, 2007 4:03 pm
Location: Timisoara, Romania

Return to Archive

Who is online

Users browsing this forum: No registered users and 1 guest