1

我正在使用 jQuery Mobile、iScrollview 和 Google 地图制作网页。当地图被初始化时，它将加载一组带有包含图像的信息窗口的标记。单击图像时，它将加载带有列表的 jQM 弹出窗口的内容并显示弹出窗口。

我有两个问题：

1) 如何为 jQM 弹出窗口的内容设置高度（例如 150 像素）？使用 iScrollview，内容的高度会被覆盖并变大。使用文档中指定的refresh()没有效果（或者我用错了吗？）。

2) 有没有办法让我只在列表超过内容高度时才显示滚动条？目前，它总是显示一个滚动条。

HTML

<div style="display: none;">
    <div class="popup">
        <div class="header" data-role="header">
            <h1>Products</h1>
        </div>
        <div class="content" data-role="content" data-iscroll>
    </div>
        <div class="footer" data-role="footer">
            <a class="close" href="#" data-rel="back" data-role="button">Close</a>
        </div>
    </div>
</div>

CSS

.popup {
    width: 175px;
}
.popup .content {
    height: 150px; /* has no effect */
    padding: 10px;
}
.popup .content ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
} 
.popup .content ul li {
    height: 23px;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JavaScript 

var markers = [];

function addMarker(i, retailer) {
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(retailer.lat, retailer.lng),
        products: retailer.products // array of strings of unknown length
    });

    var infobox = new InfoBox({
        boxClass: 'infobox',
        closeBoxURL: '',
        content: '\
            <img class="detail" src="img/arrow_light.png" alt="" onclick="openPopup('+ parseInt(i) +');" />\
            <div class="name"><span>' + retailer.name + '</span></div>\
            <div class="address"><span>' + retailer.address + '</span></div>\
            <div class="arrow"></div>',
        maxWidth: 500,
        pixelOffset: new google.maps.Size(0, -110)
    });

    markers.push(marker);
}

function openPopup(i) {
    var items = [];
    // create list
    $.each(markers[i].products, function(i, name) {
        items.push('<li>' + name + '</li>');
    });
    // set popup's content
    $('.popup .content')
        .empty()
        .append('<ul class="list">' + items.join('') + '</ul>')
        .iscrollview('refresh');
    // show popup
    $('.popup').popup({ history: false, transition: 'pop' }).popup('open');
}
4

1 回答 1

3

您唯一需要做的就是覆盖弹出内容高度并像这样强制它：

.ui-popup .ui-content {
    height: 150px !important;
}

如果要覆盖类 css，请记住使用 !important。!important 仅在使用类时才需要。例如，如果您通过 id (#) 初始化 css，则不需要 !important。

工作示例：http: //jsfiddle.net/Gajotres/N28Vg/

于 2013-09-18T12:13:13.503 回答