Question

构建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>

带有复选框的Jquery Mobile多选列表

1 个答案: