Question

我试图在游戏板屏幕上创建36个Rafael JS Navwheel Piemenu圆形导航菜单，这样每个游戏磁贴都有一个加+符号可供点击。我能够在屏幕上放置2个菜单，但它们完全最大化并显示出来。我需要他们所有人开始最小化/关闭。如果您单击此链接上的第3个示例：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（）; 它开始崩溃了！希望这有助于某人。：）

Raphael Wheelnav piemenu创建 - 如何创建多个并最小化，只显示一个加号

1 个答案: