Question

我有一个Alloy UI Dropdown组件，当用户点击其中一个按钮时，我想要渲染 - 此下拉列表应位于单击按钮的左侧

var toolsDropdown = new Y.Dropdown({
    boundingBox: '#my-div',
    trigger: '.option',
    hideOnClickOutSide: true,
    hideOnEsc: true
 }).render();

我希望这个Dropdown菜单能够在点击按钮位置的任何地方进行渲染（想象这些按钮显示在表格的每一行中）

<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);

但是我在使这个功能正常运行时遇到了一些麻烦（也许我不完全理解Alloy的Dropdown是如何工作的） - 任何想法？

编辑：我认为YUI's Overlay Widget

可能会更好

Overlay是一个可定位且可堆叠的小部件，它也提供了支持标准模块格式布局，带有标题，正文和页脚部分。

Answer 1

试试这个：

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

定位下拉按钮的位置

1 个答案: