文章/答案/技术大牛

发布

社区首页 >问答首页 >Android样式拖动可调整大小菜单

问Android样式拖动可调整大小菜单
EN

Stack Overflow用户

提问于 2014-12-28 00:04:44

回答 2查看 515关注 0票数 2

小提琴(以及文章底部的片段)：http://jsfiddle.net/6pp0Lg6v/8/

在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>

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-02-09 12:38:14

移除“安全壳”参数：

$(".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"
    });
}
});

小提琴

票数 2

Stack Overflow用户

发布于 2015-02-06 07:15:02

请尝试在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/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27672617

复制

相似问题

问Android样式拖动可调整大小菜单
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android样式拖动可调整大小菜单EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android样式拖动可调整大小菜单
EN