如何实现手机版汉堡配菜单的设计

Question

用Famous实现这些众所周知的手机应用设计模式的最佳方法是什么?

!)"汉堡包"和侧菜单，像这个简单的例子吗?

2)Table-View，过渡到全屏详情页面，有点像:http://goratchet.com/examples/app-movies/

谢谢!

Answer 1

您应该知道famo。美国大学音色菜单课程现已开放。这是我很久以前做的一个版本。与27类版本相比，这里的关键问题实现更多的是一个文件。在此之后，我最终将菜单抽象为一个通用的工具。下面的菜单和标准(一层深)菜单实际上没有什么区别，除了你使用的过渡。这是一个拖拽菜单。当然，你也可以通过点击来触发打开和/或关闭。您也可以在codefamo.us查看代码并现场播放。

/*globals define*/
define(function(require, exports, module) {
    'use strict';
    // import dependencies
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var EventHandler = require('famous/core/EventHandler');
var MouseSync = require('famous/inputs/MouseSync');
var TouchSync = require('famous/inputs/TouchSync');
var Draggable = require('famous/modifiers/Draggable');
    var mainContext = Engine.createContext();

    // Content Page...
    var coverState = true; 
    var coverPos = 0;

    //var coverMod = new StateModifier();
    var coverDrag = new Draggable({
        projection: 'x'
    });
    var coverSurface = new Surface({
        size:[undefined,undefined],
        content:'click to open',
        properties:{
            color:'white',
            backgroundColor:'#44f',
            zIndex:'3'
        }
    });
    //mainContext.add(coverMod).add(coverDrag).add(coverSurface);
    mainContext.add(coverDrag).add(coverSurface);
    coverDrag.activate();
    function coverReset() {
        coverDrag.setPosition([0,0],    
            { duration : 100, curve: 'easeInOut' },
            function() { 
                coverSurface.setContent('drag to open');
                coverPos = 0;
            }
        );
        coverState = true;
    }
    function coverDrawOut() {
        coverDrag.setPosition([200,0],
            { duration : 600, curve: 'easeInOut' },
            function() { 
                coverSurface.setContent('drag to close');
                coverPos = 200;
            }
        );
        coverState=false;
    }
    coverDrag.on('update',function(data) {
        //console.log(data);
        if(data.position[0]>60) {
            menuFadeIn();
        }
    });
    coverDrag.on('end',function(data) {
        if(data.position[0]<100) {
            coverReset();
            menuFadeOut();
        }else  {
            coverDrawOut();
            menuFadeIn();
        }
    });
    coverSurface.pipe(coverDrag);

    // Menu Items...
    var todaysSpecials = ['pizza','hamburger','french fries','ice cream'];
    var itemSurfs = [];
    var itemMod1 = [];
    var itemMod2 = [];
    // Create menu item surfaces, modifiers, etc.
    for (var i=0;i<todaysSpecials.length;i++) {
         itemSurfs[i] = new Surface({
              size: [150, 30],
              content: '<span class="entypo">&#9776;</span>'+todaysSpecials[i],
              properties: {
                color: 'white',
                textAlign: 'center',
                backgroundColor: '#FA5C4F',
                zIndex:'1'
            }
        });
        itemSurfs[i].menuData = {
            id:i,
            text: todaysSpecials[i]
        };
        //console.log(itemSurfs[i]);
        itemMod1[i] = new StateModifier();
        itemMod2[i] = new StateModifier();
        mainContext.add(itemMod1[i]).add(itemMod2[i]).add(itemSurfs[i]); 
        itemSurfs[i].on('click',function(mouseEventArgs){
            alert('Buy some really good '+mouseEventArgs.origin.menuData.text);
        });
    };
var menuState=true;
// make menu go away
function menuFadeOut() {
    if(menuState) {
    for (var i=0;i<todaysSpecials.length;i++) {
        itemMod1[i].setTransform(Transform.translate(-150, 200+i*40, 0));
        itemMod2[i].setTransform(Transform.rotateZ(-Math.PI/5.5));
    }
    menuState=false;
}
}
// bring menu in
function menuFadeIn() {
    if(!menuState) {
    for (var i=0;i<todaysSpecials.length;i++) {
        itemMod1[i].setTransform(Transform.translate(0,100+i*40, -1),{ duration : 300+i*200, curve: 'easeInOut' });
        itemMod2[i].setTransform(Transform.rotateZ(-Math.PI/5.5));
    }
    menuState=true;
}
}
    // app initial conditions...
    coverReset();
    menuFadeOut();

});