如何實現移動設計漢堡的側面菜單與着名？

Question

Famous是如何實現這些衆所周知的移動應用程序設計模式的最佳方式？

！）「漢堡包」和側邊菜單like this jasny example？

2）表視圖，過渡到全屏幕的詳細信息頁面，有點像： http://goratchet.com/examples/app-movies/

謝謝！

Answer 1

你應該知道，famo.us大學音色菜單課程現在可用。這是我在很久之前發佈的一個版本。這是更多的一個文件這裏是關鍵問題的實施比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(); 


});