Question

我正在使用Firefox OS，根据客户要求我不能使用JavaScript框架（如JQuery），即一切都必须是html，css和JS。

我必须执行下拉菜单，其副作用与我们在JQuery Mobile中看到的“推送页面”（this one）相同。

他们知道我怎么能做到这一点吗？

非常感谢

Answer 1

执行此操作的基本方法是创建一个div框（页面）并将z-index设置为低于主页面，以使其始终位于主页面后面。然后使用css，您可以上下移动主页面以显示后面的页面。

CSS

#page {
    z-index: 999;
    width:100%;
    height:100%;
    background-color:white;
    position:fixed;
    top:0;
    left: 0;
    -webkit-transition: all .5s ease;
}

.box {
    position:fixed;
    top:0;
    left: 0;
    height:100%;
    background-image: linear-gradient(#ddd, #ccc);
    width: 100%;
    display: block;
    z-index:1;
}

.move {
    top: 0em;
    margin-top:10em;
}
.moveb {
    top: 0em;
    margin-top:0em;
}

<强>的JavaScript

function doMove() {
 var element = document.getElementById("page");
 element.classList.remove("move");
 element.classList.remove("moveb");
 element.classList.add("move");
}

function doMoveb() {
 var element = document.getElementById("page");
 element.classList.remove("move");
 element.classList.remove("moveb");
 element.classList.add("moveb");
}

演示

http://jsfiddle.net/cut3y0sq/

像JQuery Mobile这样的Javascript菜单

1 个答案: