0

ここに私のJSFIDDLE：

目的：

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


});
4

1 に答える 1

0

ツールバーを下部の中央に配置するには、幅を指定する必要があります。ツールバーに置いた後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;
}
于 2013-09-20T12:55:09.647 に答える