gpt4 book ai didi

jquery - Android 风格拖动可调整大小的菜单

转载 作者:行者123 更新时间:2023-12-01 03:38:13 25 4
gpt4 key购买 nike

fiddle (以及帖子底部的片段):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>

最佳答案

删除“containment”参数:

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

关于jquery - Android 风格拖动可调整大小的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27672617/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com