jQuery Pretty Pie Klikk på Hover Menu

Hei folkens, jeg snublet over denne ganske kule svevemenyen som roterer rundt et element og menyelementet velges automatisk når du beveger musen rundt det. Den har også en ganske kul funksjon som lar den vises når du høyreklikker med musen, noe som kan være nyttig for noen applikasjoner.

Krav: jQueryUI, Firefox/Chrome – kan være problemer med IE, men senere versjoner ser ut til å være ok.

//example pie hover menu
$(function() {

    $("#area").prettypiemenu({
        buttons: [
            { img: "ui-icon-minus", title: "plaah1" }, 
            { img: "ui-icon-plus",  title: "plaah2" },
            { img: "ui-icon-close", title: "plaah3" }
        ],
        onSelection: function(item) {
          alert (item + ' was clicked!'); 
        },
        showTitles: false
    });

    $("#test").prettypiemenu({
        buttons: [
            { img: "ui-icon-minus", title: "plaah1" }, 
            { img: "ui-icon-plus",  title: "plaah2" },
            { img: "ui-icon-close", title: "plaah3" },
            { img: "ui-icon-check", title: "plaah4" }
        ],
        onSelection: function(item) {
          alert (item + ' was clickedoo!'); 
        },
        closeRadius: 25,
        showTitles: true
    });      
    
    $( "#testbtn" ).button({ icons: {primary:"ui-icon-gear"}, text: false })
    .click(function(event) {
        event.preventDefault();
        var offset = $( "#testbtn" ).offset();
        var h = $( "#testbtn" ).height();
        var w = $( "#testbtn" ).width();
        var btn_middle_y = offset.top + h/2;
        var btn_middle_x = offset.left + w/2;
        $("#test").prettypiemenu("show", {top: btn_middle_y, left: btn_middle_x});
        return false;
    }); 
});

Demo
Last ned siden