famo.us - モバイルデザインのハンバーガーサイドメニューを有名に実装するには?

Question

これらのよく知られているモバイル アプリのデザイン パターンを実装するために、Famous を使用する最善の方法は何ですか?

!)この jasny の例のような「ハンバーガー」とサイド メニュー?

2 )Table-View、全画面表示の詳細ページに遷移、少し似ています: http://goratchet.com/examples/app-movies/

ありがとう！

Answer 1

famo.usの大学の音色メニューのレッスンが利用可能になったことに注意してください。これは、それが出るずっと前に私が行ったバージョンです。ここにあるのは、27 クラス バージョンよりも重要な問題の実装である 1 つのファイルです。これに続いて、私は最終的にメニューの抽象化を一般化されたツールに作成しました。以下のメニューと標準 (1 レベルの深さ) メニューの間には、使用するトランジションを除いてほとんど違いはありません。これは、ドラッグして表示するメニューです。もちろん、クリックで開閉をトリガーすることもできます... 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();


});