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.

Regards

Ali Qazi
aliqazi01
 
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 (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.
Gabi Boros
Servoy
Gabi Boros
 
Posts: 399
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 3 guests