Insert listview into Panel

jQuery Mobile

by Omar X

HTML

<section id="mainPage" data-role="page" class="type-home">
    <header data-role="header" data-position="absolute" data-theme="a">
         <h1>View Skills</h1>
 <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>

    </header>
    <div data-role="content">
        <nav>Skills collapsible set in left menu loses CSS styling...</nav>
    </div>
    <footer data-role="footer" data-position="absolute" data-theme="a"></footer>
    <!-- Starting our left side menu panel -->
    <div data-role="panel" id="left-panel" data-theme="a">
        <ul data-role="listview" data-theme="a">
            <li data-icon="back"><a href="#" data-rel="close">Back Home</a>

            </li>
        </ul>
        <br />
        <div class="ui-header ui-bar-a" data-theme="a">Settings</div>
        <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
             <h3>Optimization Settings</h3>

            <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
                <ul data-role="listview">
                    <li><a href="#" data-rel="close">Colors</a>

                    </li>
                    <li><a href="#" data-rel="close">Preferences</a>

                    </li>
                </ul>
            </div>
            <!-- /collapsible-set -->
        </div>
        <!-- /collapsible -->
        <div class="ui-header ui-bar-a" data-theme="a">Skills Menu</div>
        <div id="skillsList"></div>
        <div class="ui-header ui-bar-a" data-theme="a">Saved</div>
        <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
             <h3>Saved Searches</h3>

            <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
                <ul data-role="listview">
                   ...

JavaScript

var skills = ['skating', 'drinking', 'mining', 'flying', 'healing'];
CreateSkillsList(skills);

function CreateSkillsList(skills) {
    var skillsDiv = $('#skillsList');
    var html = "<div data-content-theme=\"a\" data-theme=\"a\" data-iconpos=\"right\" data-inset=\"false\" data-role=\"collapsible\"><h3>Skills</h3><div data-role=\"collapsible-set\" data-inset=\"false\" data-iconpos=\"right\" data-theme=\"a\" data-content-theme=\"a\">";
    html += "<ul data-role='listview'>";

    var size = skills.length;
    for (i = 0; i < size; i++) {
        html += "<li><a href=\"#\" data-rel=\"close\"><div id='Skill" + i + "'></div></a></li>";
    }

    html += "</ul></div></div>";
    skillsDiv.html(html);


    size = skills.length;
    for (i = 0; i < size; i++) {
        var divString = "#Skill" + i;
        $(divString).append(skills[i]);
    }
}

///// nothing but this //////
$('[data-role=page]').trigger('pagecreate');