带菜单的jquery ui按钮工具栏

Question

我的JSFIDDLE HERE：

目的：

1. 页面底部的中心jqueryui按钮工具栏;工具栏贴在底部。
2. 使用来自http://jqueryui.com/button/#splitbutton的想法;单击按钮时，菜单应显示在顶部，因为工具栏粘在底部。

以上两种情况均无效。

HTML：

<div id="toolbar" class="ui-widget-header ui-corner-all sticky">
    <button id="gear">gear</button>
    <ul>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Links</a></li>
    </ul>
    <button id="disk">disk</button>
    <ul>
        <li><a href="#">Usage</a></li>
        <li><a href="#">Quota</a></li>
    </ul>
    <button id="trash">trash</button>
    <ul>
        <li><a href="#">Files</a></li>
        <li><a href="#">Folders</a></li>
    </ul>
</div>

JS：

$(function () {
    //
    //gear Button
    //
    $("#gear").button({
        label: "gear",
        text: false,
        icons: {
            primary: "ui-icon-gear"
        }
    }).click(function (event) {
        event.preventDefault();
        var menu = $(this).next().show().position({
            my: "left top",
            at: "left bottom",
            of: this
        });


    }).next().hide().menu();
    //
    //disk Button
    //
    $("#disk").button({
        label: "disk",
        text: false,
        icons: {
            primary: "ui-icon-disk"
        }
    }).click(function (event) {
        event.preventDefault();
    }).next().hide().menu();
    //
    //trash Button
    //
    $("#trash").button({
        label: "trash",
        text: false,
        icons: {
            primary: "ui-icon-trash"
        }
    }).click(function (event) {
        event.preventDefault();
    }).next().hide().menu();


});

Answer 1

要将工具栏放在底部中心，您应该给出宽度。放入工具栏position: absolute后。

与left和margin-left一起玩#toolbar

http://jsfiddle.net/ArxAG/12/

body{
    width:100%;
}

#toolbar {
    text-align:center;
    width:200px;
    padding: 4px;
    display: inline-block;
    position:absolute;
    left:50%;
    margin-left:-100px;
}