sub menu in pretty pie menu jquery

ho开发者_运维问答w to add sub menu in the following link Visit http://www.cs.tut.fi/~laine9/demo/ppmenu/piedemo.html?

You need two jquery.ui.prettypiemenu.js One for main menu. Another one for sub menu

Within head tag:

<script type="text/javascript" src="js/jquery.ui.prettypiemenu.js"></script>
<script type="text/javascript" src="js/jquery.ui.prettypiesubmenu.js"></script>
<script type="text/javascript">
    $(function () {
        var self = this;
        $("#menuArea").prettypiemenu({
            buttons: [
            { img: "ui-icon-minus", title: "plaah1" },
            { img: "ui-icon-plus", title: "plaah2" },
            { img: "ui-icon-close", title: "plaah3" },
            { img: "ui-icon-minus", title: "plaah4" }
        ],
            onSelection: function (item) {
                $("#SubMenubtn" + item).click(function (event) {
                    event.preventDefault();
                    var offset = $("#SubMenubtn" + item).offset();
                    var h = $("#SubMenubtn" + item).height();
                    var w = $("#SubMenubtn" + item).width();
                    var btn_middle_y = offset.top + h / 2;
                    var btn_middle_x = offset.left + w / 2;
                    $("#subMenuArea" + item).prettypiesubmenu("show", { top: btn_middle_y, left: btn_middle_x });
                    return false;
                });
            },
            closeRadius: 50,
            showTitles: false
        });

        $("#menubtn").button({ icons: { primary: "ui-icon-gear" }, text: false })
    .click(function (event) {
        event.preventDefault();
        var offset = $("#menubtn").offset();
        var h = $("#menubtn").height();
        var w = $("#menubtn").width();
        var btn_middle_y = offset.top + h / 2;
        var btn_middle_x = offset.left + w / 2;
        $("#menuArea").prettypiemenu("show", { top: btn_middle_y, left: btn_middle_x });
        return false;
    });

        $("#subMenuArea0").prettypiesubmenu({
            buttons: [
            { img: "ui-icon-play", title: "plaah1" },
            { img: "ui-icon-play", title: "plaah2" }
        ],
            onSelection: function (item) {
                alert(item + ' Sec was clickedoo!');
            },
            closeRadius: 50,
            showTitles: false
        });

    });
</script>

Within body tag

<div style="margin: 0px;">
    <button class="circlebtn" id="menubtn">
    </button>
    <span id="menuArea"></span>
    <span id="subMenuArea0"></span>
    <span id="subMenuArea1"></span>
    <span id="subMenuArea2"></span>
</div>