Raphael Wheelnav piemenu創建 - 如何創建多個和最小化只顯示一個加號符號

Question

我想在遊戲板屏幕上創建36 Rafael JS Navwheel Piemenu圓形導航菜單，以便每個遊戲瓷磚都有一個加號+符號點擊。 我能夠實現在屏幕上放置2個菜單，但它們完全最大化並顯示。我需要他們全部開始最小化/關閉。 如果您點擊此鏈接上的第三個示例：http://wheelnavjs.softwaretailoring.net/examples.html並將其最小化，我基本上需要我的所有控件才能像關閉電源一樣啓動。

任何人有任何想法如何實現這？

非常感謝您提供任何幫助。謝謝！ Ben

以下是我的代碼。

HTML：

<div id='piemenu' data-wheelnav 
    data-wheelnav-slicepath='CogSlice' 
    data-wheelnav-spreader data-wheelnav-spreaderpath='LineSpreader' 
    data-wheelnav-marker data-wheelnav-markerpath='DropMarker' 
    data-wheelnav-rotateoff 
    data-wheelnav-navangle='330' 
    data-wheelnav-cssmode 
    data-wheelnav-init> 
    <div data-wheelnav-navitemtext='0' onmouseup='alert("Place your logic here.");'></div> 
    <div data-wheelnav-navitemtext='1' onmouseup='alert("Place your logic here.");'></div> 
    <div data-wheelnav-navitemtext='2' onmouseup='alert("Place your logic here.");'></div> 
</div> 

<div id='piemenu2' data-wheelnav 
    data-wheelnav-slicepath='CogSlice' 
    data-wheelnav-spreader data-wheelnav-spreaderpath='LineSpreader' 
    data-wheelnav-marker data-wheelnav-markerpath='DropMarker' 
    data-wheelnav-rotateoff 
    data-wheelnav-navangle='330' 
    data-wheelnav-cssmode 
    data-wheelnav-init> 
    <div data-wheelnav-navitemtext='0' onmouseup='alert("Place your logic here.");'></div> 
    <div data-wheelnav-navitemtext='1' onmouseup='alert("Place your logic here.");'></div> 
    <div data-wheelnav-navitemtext='2' onmouseup='alert("Place your logic here.");'></div> 
</div> 


<script> 
    window.onload = function() { 

     var piemenu = new wheelnav('piemenu'); 
     piemenu.spreaderInTitle = icon.plus; 
     piemenu.spreaderOutTitle = icon.cross; 
     piemenu.spreaderRadius = piemenu.wheelRadius * 0.13; 
     piemenu.clockwise = false; 
     piemenu.sliceInitPathFunction = piemenu.slicePathFunction; 
     piemenu.initPercent = 0.1; 
     piemenu.wheelRadius = piemenu.wheelRadius * 0.83; 
     piemenu.navItemsContinuous = true; 
     piemenu.sliceAngle = 60; 
     piemenu.createWheel(); 
     piemenu.setTooltips(['0','1','2']); 

     var piemenu2 = new wheelnav('piemenu2'); 
     piemenu2.spreaderInTitle = icon.plus; 
     piemenu2.spreaderOutTitle = icon.cross; 
     piemenu2.spreaderRadius = piemenu2.wheelRadius * 0.13; 
     piemenu2.clockwise = false; 
     piemenu2.sliceInitPathFunction = piemenu2.slicePathFunction; 
     piemenu2.initPercent = 0.1; 
     piemenu2.wheelRadius = piemenu2.wheelRadius * 0.83; 
     piemenu2.navItemsContinuous = true; 
     piemenu2.sliceAngle = 60; 
     piemenu2.createWheel(); 
     piemenu2.setTooltips(['0','1','2']); 
    } 
</script> 

<script type="text/javascript" src="js/raphael.min.js"></script> 
<script type="text/javascript" src="js/raphael.icons.min.js"></script> 
<script type="text/javascript" src="js/wheelnav.min.js"></script> 


<style> 
    /* Insert generated CSS code from here -> http://pmg.softwaretailoring.net */ 
    #piemenu > svg { width: 100%; height: 110%; } 
    #piemenu { height: 115px; width: 180px; padding:0; margin:0; border:1px solid green; } 
    @media (max-width: 180px) { #piemenu { height: 115px; width: 180px; } } 

    #piemenu2 > svg { width: 100%; height: 110%; } 
    #piemenu2 { height: 115px; width: 180px; padding:0; margin:0; border:1px solid green; } 
    @media (max-width: 180px) { #piemenu2 { height: 115px; width: 180px; } } 

    [class|=wheelnav-piemenu-slice-basic] { fill: #497F4C; stroke: none; } 
    [class|=wheelnav-piemenu-slice-selected] { fill: #497F4C; stroke: none; } 
    [class|=wheelnav-piemenu-slice-hover] { fill: #497F4C; stroke: none; fill-opacity: 0.77; cursor: pointer; } 

    [class|=wheelnav-piemenu2-slice-basic] { fill: #497F4C; stroke: none; } 
    [class|=wheelnav-piemenu2-slice-selected] { fill: #497F4C; stroke: none; } 
    [class|=wheelnav-piemenu2-slice-hover] { fill: #497F4C; stroke: none; fill-opacity: 0.77; cursor: pointer; } 

    [class|=wheelnav-piemenu-title-basic] { fill: #333; stroke: none; } 
    [class|=wheelnav-piemenu-title-selected] { fill: #fff; stroke: none; } 
    [class|=wheelnav-piemenu-title-hover] { fill: #222; stroke: none; cursor: pointer; } 
    [class|=wheelnav-piemenu-title] > tspan { font-family: Impact, Charcoal, sans-serif; font-size: 24px; } 

    [class|=wheelnav-piemenu2-title-basic] { fill: #333; stroke: none; } 
    [class|=wheelnav-piemenu2-title-selected] { fill: #fff; stroke: none; } 
    [class|=wheelnav-piemenu2-title-hover] { fill: #222; stroke: none; cursor: pointer; } 
    [class|=wheelnav-piemenu2-title] > tspan { font-family: Impact, Charcoal, sans-serif; font-size: 24px; } 

    .wheelnav-piemenu-spreader-in, 
    .wheelnav-piemenu-spreader-out { fill: #444; stroke: #444; stroke-width: 2; cursor: pointer; } 
    .wheelnav-piemenu-spreadertitle-in, 
    .wheelnav-piemenu-spreadertitle-out { fill: #eee; stroke: #444; cursor: pointer; } 

    .wheelnav-piemenu2-spreader-in, 
    .wheelnav-piemenu2-spreader-out { fill: #444; stroke: #444; stroke-width: 2; cursor: pointer; } 
    .wheelnav-piemenu2-spreadertitle-in, 
    .wheelnav-piemenu2-spreadertitle-out { fill: #eee; stroke: #444; cursor: pointer; } 

    .wheelnav-piemenu-marker { fill: #444; stroke: #444; stroke-width: 2; } 
    .wheelnav-piemenu2-marker { fill: #444; stroke: #444; stroke-width: 2; } 
</style> 

Answer 1

其實，我終於剛剛發現這個...它piemenu.spreadWheel（）; 這打開/關閉你的餡餅菜單。我將這添加到onload事件中： piemenu.createWheel（）; piemenu.spreadWheel（）; 它開始崩潰！希望這可以幫助某人。 :)