Question

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

我有两个问题：

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。！只有在使用课程时才需要。例如，如果您通过id（＃）初始化您的css！则不需要重要。

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

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

1 个答案: