Question

我正在尝试设置类似的列表视图：

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-thumbnails.html

我dinamicly生成我的代码

$('#calendarPage').live('pagebeforeshow', function(event) {
    $('#calendarPage').live('pageshow', function(event) {
        application.prev = 'menu.html';
        //get the actu
        application.readFile('calendar.json',function(data){
            data = JSON.parse(data);

            var listview = '<ul data-role="listview" class="ui-listview"  id="calendarList" >';
            for(elem in data){
                var date = new Date(data[elem].date);
                var day = date.getDate();
                var month = date.getMonth() + 1;
                var year = date.getYear();
                var hours = date.getHours();
                var min = date.getMinutes();
                var s = date.getSeconds();
                listview += '<li>';
                listview += '<img src="'+application.api+data[elem].img+'" /><a href="actuOne.html?id='+elem+'" ><h3>'+data[elem].title+'</h3><p>'+day+'/'+month+'/'+year+' '+hours+':'+min+':'+s+'</p></a>';
                listview += '</li>';
            }
            listview += '</ul>';
            $('#calendarPage .content').html(listview);
            $('#calendarList').listview();
        });
    });
});

创建列表视图，但图像未调整大小

我尝试添加class =“ui-li-thumb”，但效果不佳

由于

Answer 1

您的示例中存在错误， img 标记必须位于 a 标记内，然后才会调整其大小。

看一下这个例子：http://jsfiddle.net/Gajotres/w5bcS/

        <ul data-role="listview">
            <li><a href="index.html">
                <img src="http://www.warrenphotographic.co.uk/photography/bigs/05852-Retriever-puppy-yawning-white-background.jpg" title="sample"/>
                <h3>Sample image</h3>
                <p>Sample</p>
            </a></li>
            <li><a href="index.html">
                <img src="http://www.warrenphotographic.co.uk/photography/bigs/05852-Retriever-puppy-yawning-white-background.jpg" title="sample"/>
                <h3>Sample image</h3>
                <p>Sample 2</p>
            </a></li>
        </ul>

图像大小listview jquerymobile

1 个答案: