在单击按钮的位置定位下拉菜单
在单击按钮的位置定位下拉菜单
提问于 2015-06-19 01:39:47
我有一个合金UI下拉组件，当用户单击四个按钮中的一个时，我希望呈现这个组件--这个下拉列表应该位于单击哪个按钮的左边。
var toolsDropdown = new Y.Dropdown({
boundingBox: '#my-div',
trigger: '.option',
hideOnClickOutSide: true,
hideOnEsc: true
}).render();我希望这个下拉菜单在单击按钮的位置时呈现(假设这些按钮显示在表的每一行)。
<div id="my-div">
<div id="container-1">
<button id="options-btn-1" class="option" type="button">Option one</button>
</div>
<div id="container-2">
<button id="options-btn-2" class="option" type="button">Option two</button>
</div>
<div id="container-3">
<button id="options-btn-3" class="option" type="button">Option three</button>
</div>
<div id="container-4">
<button id="options-btn-4" class="option" type="button">Option four</button>
</div>
</div>我有一个侦听器设置来侦听每个单击的按钮
Y.all('button.option-btn').on('click', displayDropdown);然而，我有一些困难，让它正常运作(也许我不完全理解合金的下拉工作原理)--有什么想法吗？
编辑:我想我在YUI覆盖Widget上会更好
Overlay是一个可定位和可堆栈的小部件，它还提供对标准模块格式布局的支持，包括页眉、正文和页脚部分。
回答 1
Stack Overflow用户
发布于 2015-06-19 04:01:42
尝试如下：
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/2.0.0pr5/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0pr5/aui-css/css/bootstrap.min.css" rel="stylesheet">
<style>
</style>
</head>
<div id="my-div">
<div id="container-1">
<button id="options-btn-1" class="option" type="button">Option one</button>
</div>
<div id="container-2">
<button id="options-btn-2" class="option" type="button">Option two</button>
</div>
<div id="container-3">
<button id="options-btn-3" class="option" type="button">Option three</button>
</div>
<div id="container-4">
<button id="options-btn-4" class="option" type="button">Option four</button>
</div>
<button class="btn btn-primary" id="primary">Primary</button>
<div class="aui-dropdown" id="drp">
<a class="aui-dropdown-toggle" data-toggle="dropdown" href="#menu1">
Dropdown
<b class="aui-caret"></b>
</a>
<ul class="aui-dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="aui-divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
YUI().use('node', 'node-focusmanager', function (Y) {
var document = Y.one(document),
toggler = Y.one('.aui-dropdown-toggle'),
dropdown = Y.one('.aui-dropdown-menu'),
buttonAction = Y.one('#primary'),
dropDownDiv = Y.one('#drp');
buttonOne=Y.one("#options-btn-1");
buttonTwo=Y.one("#options-btn-2");
buttonAction.on('click', function(e) {
dropDownDiv.setStyle('top','-20px');
dropDownDiv.setStyle('left','120px');
dropdown.toggleClass('aui-show');
e.preventDefault();
});
buttonTwo.on('click', function(e) {
dropDownDiv.setStyle('top','-125px');
dropDownDiv.setStyle('left','120px');
//dropdown.toggleClass('aui-show');
e.preventDefault();
});
buttonOne.on('click', function(e) {
dropDownDiv.setStyle('top','-145px');
dropDownDiv.setStyle('left','120px');
//dropdown.toggleClass('aui-show');
e.preventDefault();
});
toggler.on('click', function(e) {
dropdown.toggleClass('aui-show');
e.preventDefault();
e.stopPropagation();
});
document.on('click', function() {
dropdown.removeClass('aui-show');
});
});
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30928569
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号