Question

我正在使用移动jquery实现购物清单应用程序。基本结构如下：

<div>
<canvas id="header"></canvas>
<ul id="list">
    <li> ... </li>
    ...
</ul>
</div>

画布是手机顶部的标题。 “li”列表将在运行时使用jquery添加到DOM中。

我有以下两个要求： 1.滚动ul时，标题应保留在同一位置。 2.整个div的大小应与显示大小相同，而不是li的数量。也就是说，滚动时，li应该会动态显示和消失。

移动jquery有可能吗？非常感谢你。

Answer 1

是的，有不同的方法来实现这一目标。以下是一种方式的演示： http://jsfiddle.net/ezanker/VE9XM/2/

我将你的标记修改为一个jQM页面div，然后是一个容器div，它将根据设备的大小调整：

<div data-role="page" id="page1">
    <div id="contDiv">
        <canvas id="header"></canvas>
        <div id="listDiv">
            <ul id="list" data-role="listview">
                <li>...</li>
                <li>...</li>
            </ul>
        <div>
    </div>
</div>

然后我设置CSS以使标题画布绝对位于顶部，并且列表容器填充页面的其余部分并允许在列表长于可用高度时滚动：

html, body, #page1, #contDiv {
    margin: 0;
    padding : 0;
}
#header {
    position: absolute;
    top:  0px;
    left: 0px;
    width: 100%;
    height: 48px;
    background-Color: #555;
}
#listDiv {
    position: absolute;
    top: 0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    margin-top: 48px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

最后，我有一些javascript将容器div的大小调整到显示，并捕获调整大小和方向更改事件以使div保持正确的大小。

function ScaleContentToDevice() {
    scroll(0, 0);
    var viewportHeight = $(window).height();
    var content = $("#contDiv");
    var contentMargins = content.outerHeight() - content.height();
    var contentheight = viewportHeight - contentMargins;
    content.height(contentheight);
};

$(document).on("pageshow", function () {
    ScaleContentToDevice();
});
$(window).on('resize orientationchange', function () {
    ScaleContentToDevice()
});

P.S。不要忘记视口的元标记：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">

Answer 2

只需将ul和style属性添加到ul样式即可。适用于jquery mobile。

if(isset($_POST['newsletter']) && 
   $_POST['newsletter'] == 'Yes') 
{
    echo "Need newsletter access.";
}
else
{
    echo "Do not Need newsletter access.";
}    

?>

移动HTML5 / Jquery中的可滚动Listview

2 个答案: