像JQuery Mobile这样的Javascript菜单 [英] Javascript Menu like JQuery Mobile

问题描述

我正在使用Firefox OS，但根据客户要求，我无法使用JavaScript框架(例如JQuery)，即所有内容都必须是html，css和JS.

I'm working with Firefox OS, on customer requirements I can not use frameworks for JavaScript (like JQuery), ie everything must be html, css and JS.

我必须具有与推动页面"相同的副作用的下拉菜单(

I have to do the pull-down menu with the same side effect of "pushing the page" (this one) we've seen in JQuery Mobile.

他们知道我该怎么做?

非常感谢

推荐答案

一种基本方法是创建一个div框(页面)，并将z-index设置为低于主页，使其始终位于主页后面.然后，使用css可以上下移动主页以显示后面的页面.

A basic way of doing this is to create a div box (page) and set a z-index lower than the main page so its always behind the main page. Then using css you can move the main page up and down to reveal the page behind.

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菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！