| <?xml version="1.0" encoding="UTF-8"?> |
| <?AdobeSVGViewer save="snapshot"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1024 768" onload="runRepaintAndPixelTest()"> |
| <script type="text/ecmascript" xlink:href="../resources/text-based-repaint.js"></script> |
| <script type="text/ecmascript" xlink:href="../../../svg/carto.net/resources/helper_functions.js"></script> |
| <script type="text/ecmascript" xlink:href="../../../svg/carto.net/resources/timer.js"></script> |
| <script type="text/ecmascript" xlink:href="../../../svg/carto.net/resources/tabgroup.js"></script> |
| <script type="text/ecmascript"> |
| <![CDATA[ |
| var tabgroupRect; |
| function repaintTest() { |
| //first a few style array literals |
| var tabStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1,"cursor":"pointer"}; |
| var tabwindowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1}; |
| var tabtextStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal"}; |
| var tabtextStylesCenter = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal","text-anchor":"middle"}; |
| //setting tabTitles |
| var tabTitles = new Array("Biography","Relations","Events","Portrait"); |
| var tabTitlesMulti = new Array("Geodata\nBrowser","Download\nFolder","Your\nAccount","Help\n& Info"); |
| tabgroupRect = new tabgroup("tabgroupRect","tabgroupRect",0,0,300,200,20,"rect","rect",5,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStyles,tabTitles,1,false,tabChanged); |
| tabgroupTriangle = new tabgroup("tabgroupTriangle","tabgroupTriangle",10,330,300,200,35,"triangle","triangle",5,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStylesCenter,tabTitlesMulti,0,true,undefined); |
| tabgroupRectTriangle = new tabgroup("tabgroupRectTriangle","tabgroupRectTriangle",650,300,300,200,20,"rect","triangle",5,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStyles,tabTitles,2,false,undefined); |
| tabgroupRound = new tabgroup("tabgroupRound","tabgroupRound",500,50,300,200,20,"round","round",5,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStyles,tabTitles,1,false,undefined); |
| tabgroupRectRound = new tabgroup("tabgroupRectRound","tabgroupRectRound",200,550,340,200,20,"rect","round",10,5,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStyles,tabTitles,0,false,tabChanged); |
| //add new content |
| tabgroupTriangle.addContent("contentTabGroupTriangle0",0,true); |
| tabgroupTriangle.addContent("oversizeContent",1,true); |
| tabgroupTriangle.addContent("contentTabGroupTriangle2",2,true); |
| tabgroupTriangle.addContent("contentTabGroupTriangle3",3,true); |
| //activate tab |
| tabgroupTriangle.activateTabByIndex(0,false); |
| tabgroupRound.resize(400,100); |
| //remove content |
| //var deletedNode = tabgroupTriangle.removeContent("contentTabGroupTriangle3",3); |
| //alert(deletedNode.nodeName); |
| //deactivate tabs |
| //tabgroupTriangle.disableSingleTab(3); |
| //tabgroupTriangle.disableAllTabs(); |
| //tabgroupTriangle.enableSingleTab(3); |
| //tabgroupTriangle.enableAllTabs(); |
| } |
| function tabChanged(id,title,index) { |
| alert("tab nr "+index+" with title '"+title+"' was activated in tabgroup '"+id+"'"); |
| } |
| ]]> |
| </script> |
| <title>Demonstration of the tabgroup object</title> |
| <g id="tabgroupRect" transform="rotate(90),translate(10,-250)" /> |
| <g id="tabgroupTriangle" /> |
| <g id="tabgroupRectTriangle" /> |
| <g id="tabgroupRound" /> |
| <g transform="translate(180,-150),rotate(45,300,650)" id="tabgroupRectRound" /> |
| <!-- tab content --> |
| <g id="oversizeContent" display="none"> |
| <rect x="40" y="190" width="220" height="120" stroke="dimgray" stroke-width="1" /> |
| <rect x="40.5" y="188" width="219" height="121.5" fill="aliceblue" stroke="none" /> |
| <rect x="30" y="188" width="240" height="11.5" fill="aliceblue" /> |
| <text x="10" y="55" font-size="12" fill="dimgray" font-family="Arial,Helvetica">This is oversize content that can be<tspan x="10" dy="15">hidden on tab-change</tspan></text> |
| </g> |
| <text id="contentTabGroupTriangle0" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">This is a tabgroup with triangular tab corners<tspan x="10" dy="15">and a double line tab. (use "\n" as a line separator)</tspan><tspan x="10" dy="15">Click on the second tab to see oversize content</tspan></text> |
| <text id="contentTabGroupTriangle2" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">Please contact our sales person to get an account</text> |
| <text id="contentTabGroupTriangle3" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">RTFM!</text> |
| </svg> |
