Hi,
i'm trying to create dynamic listview with Jquery widget, in the image, the top list view 'dynamic list' was from my code, and the bottom 'Original List' was the original code from jquery widget example.
My code
» Click to show Spoiler - click again to hide... «
CODE
<script type="text/javascript">
function generateList()
{
var YourArray = ['United States', 'Canada', 'Argentina'];
var ObjUl = $('<ul></ul>');
for (i = 0; i < YourArray.length; i++)
{
var Objli = $('<li></li>');
var Obja = $('<a></a>');
var Objh2 = $('<h2></h2>');
ObjUl.attr("data-role", "listview");
ObjUl.attr("data-split-theme", "a");
ObjUl.attr("data-inset", "true");
Obja.attr("href", "#");
Objh2.text(YourArray[i]);
Obja.append(Objh2);
Objli.append(Obja);
ObjUl.append(Objli);
}
$('#list').append(ObjUl);
}
</script>
<body bgcolor=white onload="generateList()">
<div id="body">
<div data-role="collapsible">
<h3>Dynamic List</h3>
<button type="button">Edit</button>
<div id = "list"/>
</div>
</div>
Original Code
» Click to show Spoiler - click again to hide... «
CODE
<div data-role="collapsible">
<h3>Original List</h3>
<button type="button">Edit</button>
<ul data-role="listview" data-split-theme="a" data-inset="true">
<li>
<a href="#">
<h2>United States</h2>
</a>
</li>
<li>
<a href="#">
<h2>Canada</h2>
</a>
</li>
<li>
<a href="#">
<h2>Argentina</h2>
</a>
</li>
</ul>
</div>
HTML generated from both code:
My Code
» Click to show Spoiler - click again to hide... «
CODE
<h3 class="ui-collapsible-heading">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-btn-inherit ui-icon-minus">Dynamic List<span class="ui-collapsible-heading-status"> click to collapse contents</span>
</a></h3>
<div aria-hidden="false" class="ui-collapsible-content ui-body-inherit">
<button class=" ui-btn ui-shadow ui-corner-all" type="button">Edit</button>
<div id="list">
<ul data-inset="true" data-split-theme="a" data-role="listview">
<li>
<a href="#">
<h2>United States</h2>
</a>
</li>
<li>
<a href="#">
<h2>Canada</h2>
</a>
</li>
<li>
<a href="#">
<h2>Argentina</h2>
</a>
</li>
</ul>
</div>
</div>
Original Code:
» Click to show Spoiler - click again to hide... «
CODE
<h3 class="ui-collapsible-heading">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-btn-inherit ui-icon-minus">Original List<span class="ui-collapsible-heading-status"> click to collapse contents</span>
</a></h3>
<div aria-hidden="false" class="ui-collapsible-content ui-body-inherit">
<button class=" ui-btn ui-shadow ui-corner-all" type="button">Edit</button>
<ul class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-split-theme="a" data-inset="true">
<li class="ui-first-child">
<a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">
<h2>United States</h2>
</a>
</li>
<li>
<a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">
<h2>Canada</h2>
</a>
</li>
<li class="ui-last-child">
<a class="ui-btn ui-btn-icon-right ui-icon-carat-r" href="#">
<h2>Argentina</h2>
</a>
</li>
</ul>
</div>
For the original result, can see that's additional class added on which is not inside the original code, where my dynamic code just presented as how its look like literally. How to get those additional class to attach on it? If i copy the class and attach by my self doesn't seems proper? Since its generated automatically from the example.
This post has been edited by ragk: Nov 11 2015, 11:58 AM Attached thumbnail(s)