如何使用 iScrollview 将滚动条正确添加到 jQuery Mobile 弹出窗口

Question

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

我有 2 个问题：

1） 如何为 jQM 弹出窗口的内容设置高度（例如 150px）？使用 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');
}

Answer 1

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

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

如果要覆盖类 css，请记住使用 ！important。 ！important仅在使用类时需要。例如，如果您通过 id （#） 初始化 css！则不需要重要。

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