Android的風格將可調整大小的菜單

小提琴（隨着在後的底部段）：http://jsfiddle.net/6pp0Lg6v/8/Android的風格將可調整大小的菜單

在iOS上你可以拖動從頂部顯示一個菜單，查看您的通知。你也可以在Android上做同樣的事情。

我正在研究一個網頁設計師，我將使用這種類型的效果，我一直試圖在JQuery中做到這一點，並且無法讓它只改變元素的大小（那會是.reveal ）。

任何幫助，非常感謝。

$('strong').click(function() { 
 
    $('.reveal').animate({ 'height': 'toggle' }, 100) 
 
}); 
 

 
// Handles FunctionBar 
 
$(".functionbar").draggable({ 
 
    axis: "y", 
 
    handle: ".handlesbar", 
 
    disabled: false 
 
}); 
 

 
$(".revealbar").draggable({ 
 
    axis: "y", 
 
    //containment: "parent", 
 
    helper: "clone", 
 
    drag: function (event, ui) { 
 
    var height = ui.offset.top; 
 
    $(this).prev().height(height); 
 
    $(".revealbar.ui-draggable-dragging").addClass("hide").css({ 
 
     "height": "0", 
 
     "overflow": "hidden" 
 
    }); 
 
    } 
 
});

body { 
 
    background: #aaa; 
 
} 
 

 
/* FunctionBar */ 
 
.functionbar { 
 
    overflow: hidden; 
 
} 
 

 
.handlesbar { 
 
    margin: auto; 
 
    width: 90%; 
 
    padding: 6px 0; 
 
    border-radius: 10px 10px 0 0; 
 
    font: 24px arial; 
 
    text-align: center; 
 
    background: hsla(180, 0%, 0%, .75); 
 
    word-spacing: 12px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: hsl(180, 0%, 90%); 
 
} 
 

 
.active { 
 
    color: #9cf; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
/* Drag to Reveal Elements */ 
 
.reveal { 
 
    margin: auto; 
 
    width: 90%; 
 
    background: #fff; 
 
    overflow: visible!important; 
 
    display:none; 
 
} 
 
.reveal, .revealcontent { 
 
    z-index: 0; 
 
    overflow: auto; 
 
} 
 
.revealbar { 
 
    cursor: default; 
 
    text-align: center; 
 
    background: #666; 
 
    color: #1c1c1c; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
} 
 
.reveal h1 { 
 
    margin: 0; 
 
    padding: 16px 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Android Style Drag Menu Reveal/Hide</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
 
    <link type="text/css" rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css"/> 
 
    <link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css"/> 
 
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" /> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <!-- FunctionBar --> 
 
    <div class="functionbar"> 
 
     <div class="handlesbar"> 
 
     <div class="handlesbar-page1"> 
 
      <a id="addelement" title="Add Element" href="javascript:void(0)"> 
 
      <span class="fa fa-plus"></span> 
 
      </a> 
 
      <a id="styleelement" title="Style Element" href="javascript:void(0)"> 
 
      <span class="fa fa-magic"></span> 
 
      </a> 
 
      <a id="moresettings" title="More Settings" href="javascript:void(0)"> 
 
      <strong>...</strong> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="reveal"> 
 
     <div class="revealcontent"> 
 
      <div class="stylescontent"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
      </div> 
 
     </div> 
 
     <div class="revealbar"> 
 
      <span class="fa fa-bars"></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2014-12-28 Michael Schwartz

刪除「遏制」參數：

$(".revealbar").draggable({ 
axis: "y", 
//containment: "parent", 
helper: "clone", 
drag: function (event, ui) { 
    var height = ui.offset.top; 
    $(this).prev().height(height); 
    $(".revealbar.ui-draggable-dragging").addClass("hide").css({ 
     "height": "0", 
     "overflow": "hidden" 
    }); 
} 
});

FIDDLE

來源

2015-02-09 12:38:14 deadulya

請嘗試在CSS中添加以下代碼。

/* Drag to Reveal Elements */ 
.reveal { 
margin: auto; 
width: 90%; 
background: #fff; 
overflow: visible!important; 
display:none; 
}

和js文件下面的腳本

$('strong').click(function() { 
    $('.reveal').animate({ 'height': 'toggle' }, 100) 
});

更新的jsfiddle鏈接http://jsfiddle.net/6pp0Lg6v/3/

來源

2015-02-06 07:15:02 Vikas

我不認爲你理解了這個問題。當我拖動工具欄時，我希望能夠拖動和調整內部的內容。顯示並隱藏它不是問題。 –

Android的風格將可調整大小的菜單

回答

相關問題