1

ここに私の問題を簡単に示します:内部にメニューを含む分割ボタンが必要です (jquery-ui で実行: jqueryui-demoを参照してください。これは他のものの配置には影響しません。したがって、2 番目のボタンはcss内のposition属性を絶対に変更できることはわかっていますが、実際には各位置を計算したくありません (そして再計算したくありません)。何かが変更された場合、または 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