Статьи

JQuery Довольно Пирог Нажмите Hover Меню

jquery-piehover-menu

Привет, ребята, я наткнулся на это довольно крутое меню при наведении курсора, которое вращается вокруг элемента, и элемент меню автоматически выбирается, когда вы перемещаете мышь вокруг него. Он также имеет довольно классную функцию, которая позволяет ему появляться при щелчке правой кнопкой мыши, что может быть полезно для некоторых приложений.

Требования: jQueryUI, Firefox / Chrome — могут быть проблемы с IE, но более поздние версии вроде бы в порядке.

//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; }); }); 

демонстрация
Страница загрузки