1

这是我的简短形式的问题：我想在里面有一个带有菜单的拆分按钮（使用 jquery-ui 完成，请参阅：jqueryui-demo，这不会影响其他任何东西的定位。所以第二个按钮不应该移动所有,如果第一个拆分按钮显示它的菜单,在jsfiddle中明显错误.我知道可以将 css 中的位置属性更改为绝对,但我真的不想计算每个位置(并重新计算如果发生变化或 document.size() 发生变化...

有没有办法告诉 jquery.menu 它应该覆盖我的菜单？

jsfiddle 归结为以下内容：

JavaScript

$(function () {
     $.each($(".key"), convert);

 });

 function convert(index, element) {
     //retrieve button-value
     var key = $(element).text();
     //exchange elements html with the split-button and the menu
     $(element).html(
         '<div><div><button class="KeywordTag">' + key + '</button>
          <button class="selectButton">Options</button></div>
          <ul>
            <li><a href="#" class="addtoquery">Add to Query</a></li>
            <li><a href="#" class="opentab">Open in new Tab</a></li>
            <li><a href="#" class="addtoquerytab">Add to Query in new Tab</a></li>
          </ul></div>');
     //call jquery.button(...) to turn the buttons into good looking buttons the the
     //unordered list into a menu
     //...
     //add event handling
     //...
  }

CSS

//for round borders...
//I'd probably need to change the position attribute, but I really don't want to
//have to calculate each position by hand...
.KeywordTag {
    -moz-border-topleft-radius: 75px;
    -moz-border-bottomleft-radius: 75px;
    -webkit-border-topleft-radius: 75px;
    -webkit-border-bottomleft-radius: 75px;
    border-bottom-left-radius:75px;
    border-top-left-radius:75px;
}
.selectButton {
    -moz-border-topright-radius: 75px;
    -moz-border-bottomright-radius: 75px;
    -webkit-border-topright-radius: 75px;
    -webkit-border-bottomright-radius: 75px;
    border-bottom-right-radius:75px;
    border-top-right-radius:75px;
}

html

<!-- Those spans will be exchanged with 
     the actual buttons and menus by the javascript above -->
<span class="key">examplekey</span>
<span class="key">examplekey2</span>
4

1 回答 1

2

因为我今天早上解决了我的问题并且我想为其他人记录解决方案，所以我正在回答我自己的问题。

如果你定义了<ul>你<ul style='position: absolute; z-index=1'>想要的行为。

请参阅：http: //jsfiddle.net/crapman/VUBqK/7/或示例截图

于 2013-02-20T07:44:17.073 回答