Raphael Wheelnav piemenu creation - 더하기 기호로 표시된 복수형 및 최소화형 표시 방법

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(); 그리고 축소되었습니다. 희망이 사람을 도움이됩니다. :)