JQuery Mobile Multi Select список с флажками

Question

• Приложение Building JQM
• Необходимо отобразить прокручиваемый список из почти 200 элементов с флажками рядом с каждым, который будет проверять / снимать флажок, когда пользователь делает свой выбор.
• ищет чистый способ реализации указанного списка с использованием JQM, если это возможно, но я не вижу ничего в их документации / демонстрациях.
• есть ли что-то полезное в JQM или я должен просто свернуть свой собственный?

Спасибо.

Answer 1

Пример:

• http://jsfiddle.net/qvx85/14/

JS

// Add 200 list items
for( i=0; i < 200; i++){
    createListItems(i, 'hello-'+i);
}

// add jQM markup
$('#theList').trigger('create');

// refresh the list
$('#theList').listview('refresh');

function createListItems(number, option) {
    var item = '<li><h3>Question '+number+' using Checkbox Options</h3><p><strong>Do you '+option+'?</strong></p><p>Please select an option</p><p class="ui-li-aside"><fieldset data-role="controlgroup" data-type="horizontal"><input type="checkbox" name="q'+number+'" id="q'+number+'-'+option+'" class="custom" /><label for="q'+number+'-'+option+'">'+option+'</label></fieldset></p></li>';

    $('#theList').append(item);
}

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <h2>List of Questions</h2>
        <ul data-role="listview" data-inset="true" id="theList">
            <li>
                <h3>Question 1 using Radio Options</h3>
                <p><strong>Do you agree?</strong></p>
                <p>Please select an option</p>
                <p class="ui-li-aside">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <input type="radio" name="q1" id="q1-agree" value="agree"  />
                        <label for="q1-agree">Agree</label>
                        <input type="radio" name="q1" id="q1-disagree" value="disagree"  />
                        <label for="q1-disagree">Disagree</label>
                    </fieldset>
                </p>
            </li>
            <li>
                <h3>Question 2 using Radio Options</h3>
                <p><strong>Another question</strong></p>
                <p>Please select an answer</p>
                <p class="ui-li-aside">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <input type="radio" name="q2" id="q2-agree" value="agree"  />
                        <label for="q2-agree">Agree</label>
                        <input type="radio" name="q2" id="q2-disagree" value="disagree"  />
                        <label for="q2-disagree">Disagree</label>
                    </fieldset>
                </p>
            </li>
            <li>
                <h3>Question 3 using Checkbox Options</h3>
                <p><strong>Do you agree?</strong></p>
                <p>Please tap to select the option</p>
                <p class="ui-li-aside">
                    <fieldset data-role="controlgroup" data-type="horizontal">                        
                        <input type="checkbox" name="q3" id="q3-agree" class="custom" />
                        <label for="q3-agree">Agree</label>    
                    </fieldset>
                </p>
            </li>
        </ul>

    </div>
</div>