如何在jQuery Mobile上實現ResideMenu？

Question

我想實現一個ResideMenu就像圖像，這裏是鏈接：

http://d13yacurqjgara.cloudfront.net/users/107759/screenshots/1114754/social_feed_ios7.gif

請，任何幫助或組件？

謝謝。

Answer 1

要做到這一點，你需要設置如下：

1. 過渡CSS3類transform3d，scale3d和transition。
2. 創建一個div與內容任何地方在外部頁div div。
3. 在活動頁面上應用更改預先動畫並恢復後動畫的所有默認值。

---

1. ResideMenu內容股利和相關風格：

   創建一個DIV，並將其放在身上。請確保position: absolute;和低z-index: -9999;，因爲即使它的隱藏不應該可見/可點擊。

   HTML

   <div id="content"> 
       <!-- content --> 
   </div> 
   

   CSS

   #content { 
       height: 100%; 
       width: 50%; 
       position: absolute; 
       top: 5px; 
       left: 5px; 
       z-index: -9999; 
   } 
   

2. 轉型和動畫：

   創建三個類別;顯示，隱藏和動畫的上述步驟。

   動畫課 - 您可以使用動畫速度500ms玩。

   .panel-animate { 
       -webkit-transition: all 500ms ease; 
       -moz-transition: all 500ms ease; 
       -ms-transition: all 500ms ease; 
       -o-transition: all 500ms ease; 
       transition: all 500ms ease; 
   } 
   

   菜單顯示/揭示類 - 頁面上X軸移動和60%縮小由它的寬度和高度的60%。你也可以玩這些值。

   .panel-open { 
       -webkit-transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1); 
       -moz-transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1); 
       -ms-transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1); 
       -o-transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1); 
       transform: translate3d(60%, 0, 0) scale3d(0.6, 0.6, 1); 
   } 
   

   菜單隱藏類。

   .panel-close { 
       -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 
       -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 
       -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 
       -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 
       transform: translate3d(0, 0, 0) scale3d(1, 1, 1); 
   } 
   

3. 代碼顯示/隱藏菜單：

   第一步，如果ResideMenu包含任何jQuery Mobile的部件，他們需要手動自駐留外頁 DIV初始化。要手動初始化/創建jQM小部件，請在父div上調用.enhanceWithin()，然後隱藏 ResideMenu div。

   $("#content").enhanceWithin().hide(); 
   

   顯示ResideMenu - 由四個步驟組成。

   1）隱藏Y軸溢出上體避免滾動一次被示出菜單。 2）更新頁面的高度根據視口的高度。如果在該頁面中使用工具欄（頁眉/頁腳），則應從視口的高度中減去88px（top top & bottom padding）。如果使用頁眉或頁腳，則減去44px。 3）應用動畫類來顯示菜單。 4）取消隱藏菜單div。

   $(".panel").on("click", function() { 
       $("body").css({ "overflow-y": "hidden" }); 
       $(".ui-page-active").height($(window).height() - 88); 
       $(".ui-page-active").addClass("panel-animate panel-open"); 
       $("#content").show(); 
   }); 
   

   隱藏ResideMenu - 簡單的步驟，只需刪除開放類和添加閉幕類。但是，請注意菜單的z-index應該再次更改爲低值。因爲當它顯示時，z-index被設置爲高值，下一個setp會解釋。

   $(".panel-close-btn").on("click", function() { 
       $(".ui-page-active").addClass("panel-close").removeClass("panel-open"); 
       $("#content").css("z-index", "-9999"); 
   }); 
   

   在前兩步之間進行更改。這些更改應在動畫/轉換完成後通過聽取事件來應用。

   1）如果顯示菜單，則應將其'z-index設置爲高值以便變得可點擊/可觸摸。 2）如果菜單被關閉/隱藏，在轉換完成後應該隱藏。 3）刪除所有應用於主體和活動頁面的自定義CSS。 4）加回頁眉/頁腳88px填充至活動頁面並刪除關閉&動畫類。 5）由於活動頁面的高度在顯示菜單之前進行了修改，因此應通過調用$.mobile.resetActivePageHeight()來返回以前的狀態。

   $(document).on("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd", ".panel-open, .panel-close", function (e) { 
       if ($(this).hasClass("panel-open")) { 
        $("#content").css("z-index", "9999"); 
       } 
       if ($(this).hasClass("panel-close")) { 
        $("#content").hide(); 
        $("body, .ui-page-active").removeAttr("style"); 
        $(this).removeClass("panel-animate panel-close").css({ padding: "44px 0" }); 
        $.mobile.resetActivePageHeight(); 
       } 
   }); 
   

Demo（1）

^（1）測試上的Safari & Chrome行動 - iPhone 5和ipad 2.