exampletree.js

javascript 很酷的类库

                    {
                        description:"\n    Drag & drop services and built-in drag & drop interactions.\n",
                        isOpen:false,
                        title:"Drag & Drop",
                        children:[
                            {
                                jsURL:"dragdrop/dragListCopy.js",
                                description:"\n        Drag and drop to copy items from the first list to the second list.\n        You can drag over the top or bottom edge of a scrolling list to scroll\n        in that direction before dropping.\n        ",
                                showSkinSwitcher:true,
                                tabs:[
                                    {title:"exampleData", url:"dragdrop/dragList_data.js"}
                                ],
                                title:"Drag list (copy)"
                            },
                            {
                                jsURL:"dragdrop/dragListMove.js",
                                description:"\n        Drag and drop to move items within or between the lists.\n        You can drag over the top or bottom edge of a scrolling list to scroll\n        in that direction before dropping.\n        ",
                                showSkinSwitcher:true,
                                tabs:[
                                    {title:"exampleData", url:"dragdrop/dragList_data.js"}
                                ],
                                id:"dragListMove",
                                title:"Drag list (move)"
                            },
                            {
                                jsURL:"dragdrop/dragListSelect.js",
                                description:"\n        Drag to select items in the first list. The second list will\n        mirror your selection.\n        ",
                                showSkinSwitcher:true,
                                tabs:[
                                    {title:"exampleData", url:"dragdrop/dragList_data.js"}
                                ],
                                id:"dragListSelect",
                                title:"Drag list (select)"
                            },
                            {
                                jsURL:"dragdrop/dragTreeMove.js",
                                description:"\n        Drag and drop to move parts and folders within and between the trees.\n        You can open a closed folder by pausing over it during a drag interaction\n        (aka \"spring loaded folders\").\n        ",
                                showSkinSwitcher:true,
                                tabs:[
                                    {title:"exampleData", url:"dragdrop/dragTree_data.js"}
                                ],
                                id:"dragTree",
                                title:"Drag tree (move)"
                            },
                            {jsURL:"dragdrop/dragMove.js", 
                             description:"\n        Drag and drop to move pieces between the boxes. The green box sets a thicker green\n        \"drop line\" indicator to match its border. The blue box shows a \"drag placeholder\"\n        outline at the original location of the dragged object while dragging.\n        ",id:"dragMove", 
                             title:"Drag move"},
                            {jsURL:"dragdrop/dragReorder.js", 
                             description:"\n        Drag and drop to rearrange the order of the pieces.\n        ",title:"Drag reorder"},
                            {jsURL:"dragdrop/dragTypes.js", 
                             description:"\n        Drag and drop to move pieces between the three boxes.\n        The gray box accepts any piece.\n        The blue and green boxes accept pieces of the same color only.\n        ",title:"Drag types"},
                            {jsURL:"dragdrop/dragCreate.js", 
                             description:"\n        Drag the large cubes into the boxes to create new small cubes.\n        The blue, yellow, and green boxes accept cubes with the same color only.\n        The gray box accepts any color.\n        Right-click on the small cubes to remove them from the boxes.\n        ",id:"dragCreate", 
                             title:"Drag create"},
                            {jsURL:"dragdrop/dragEffects.js", 
                             description:"\n        Click and drag to move the labels.\n        ",id:"dragEffects", 
                             title:"Drag effects"},
                            {jsURL:"dragdrop/dragReposition.js", visibility:"sdk", 
                             description:"\n        Click and drag to move the piece.\n        ",title:"Drag reposition"},
                            {jsURL:"dragdrop/dragResize.js", 
                             description:"\n        Click and drag on the edges of the labels to resize.\n        ",id:"dragResize", 
                             title:"Drag resize"},
                            {jsURL:"dragdrop/dragTracker.js", 
                             description:"\n        Drag and drop the pieces onto the box.\n        ",id:"dragTracker", 
                             title:"Drag tracker"},
                            {jsURL:"dragdrop/dragPan.js", 
                             description:"\n        Click and drag to pan the image inside its frame.\n        ",id:"dragPan", 
                             title:"Drag pan"}
                        ]
                    },
                    {
                        description:"\n    Animation services and built-in animation effects.\n",
                        isOpen:false,
                        title:"Animation",
                        children:[
                            {
                                jsURL:"animate/animateTree.js",
                                description:"\n        Click the open/close icon for any folder.\n        ",
                                showSkinSwitcher:true,
                                tabs:[
                                    {title:"exampleData", url:"animate/animateTreeData.js"}
                                ],
                                id:"animateTree",
                                title:"Animate tree"
                            },
                            {jsURL:"animate/animateMinimize.js", 
                             description:"\n        Click on the minimize button (round button in header with flat line).\n        ",showSkinSwitcher:true, 
                             id:"windowMinimize",title:"Animate minimize"},
                            {jsURL:"animate/animateSections.xml", 
                             description:"\n        Click on any section header to expand/collapse sections.\n        ",showSkinSwitcher:true, 
                             id:"animateSections",title:"Animate sections"},
                            {jsURL:"animate/animateLayout.js", 
                             description:"\n        Click on the buttons to hide and show the green star.\n        ",id:"animateLayout", 
                             title:"Animate layout"},
                            {jsURL:"animate/animateMove.js", 
                             description:"\n        Click the buttons to move the Label into view or out of view.\n        ",id:"animateMove", 
                             title:"Animate move"},
                            {jsURL:"animate/animateResize.js", 
                             description:"\n        Click the buttons to expand or collapse the text box.\n        ",id:"animateResize", 
                             title:"Animate resize"},
                            {jsURL:"animate/animateWipe.js", 
                             description:"\n        Click the buttons to show or hide the Label with a \"wipe\" effect.\n        ",id:"animateWipe", 
                             title:"Animate wipe"},
                            {jsURL:"animate/animateSlide.js", 
                             description:"\n        Click the buttons to show or hide the Label with a \"slide\" effect.\n        ",title:"Animate slide"},
                            {jsURL:"animate/animateZoom.js", 
                             description:"\n        Click the buttons to zoom or shrink the image.\n        ",id:"animateZoom", 
                             title:"Animate zoom"},
                            {jsURL:"animate/animateFade.js", 
                             description:"\n        Click the buttons to fade the image.\n        ",id:"animateFade", 
                             title:"Animate fade"},
                            {jsURL:"animate/animateSeqSimple.js", 
                             description:"\n        Click the buttons for a 2-stage expand or collapse effect.\n        ",title:"Animate sequence (simple)"},
                            {jsURL:"animate/animateSeqComplex.js", 
                             description:"\n        Click to select and zoom each piece.\n        ",title:"Animate sequence (complex)"},
                            {jsURL:"animate/animateCustom.js", 
                             description:"\n        Click on the globe for a custom \"orbit\" animation.\n        ",id:"customAnimation", 
                             title:"Animate custom"}
                        ]
                    },
                    {
                        description:"\n    Apply rich visual styles to SmartClient components.\n",
                        isOpen:false,
                        title:"Look & Feel",
                        children:[
                            {jsURL:"lookfeel/edges.js", 
                             description:"\n        Drag the text boxes. These boxes show customized frame and glow effects\n        using edge images.\n        ",id:"edges", 
                             title:"Edges"},
                            {jsURL:"lookfeel/corners.js", 
                             description:"\n        Drag the text boxes. These boxes show customized rounded-corner effects\n        using edge images.        \n        ",id:"corners", 
                             title:"Corners"},
                            {jsURL:"lookfeel/shadows.js", 
                             description:"\n        Drag the slider to change the shadow depth for the text box.\n        ",id:"shadows", 
                             title:"Shadows"},
                            {jsURL:"lookfeel/bgColor.js", visibility:"sdk", 
                             description:"\n        Click on the color picker to select a background color for the box.\n        ",title:"Background color"},
                            {jsURL:"lookfeel/bgImage.js", visibility:"sdk", 
                             description:"\n        Click any button to change the background texture for the box.\n        ",title:"Background texture"},
                            {jsURL:"lookfeel/opacity.js", 
                             description:"\n        Drag the slider to change opacity.\n        ",id:"translucency", 
                             title:"Translucency"},
                            {jsURL:"lookfeel/boxAttrs.js", visibility:"sdk", 
                             description:"\n        Drag the sliders to change the CSS box attributes.\n        ",title:"Box attributes"},
                            {
                                jsURL:"lookfeel/styles.js",
                                description:"\n        Click the radio buttons to apply different CSS styles to the text. Click the CSS tab for\n        CSS class definitions.<BR>\n        This container auto-sizes to the styled text.\n        ",
                                tabs:[
                                    {title:"CSS", url:"lookfeel/styles.css"}
                                ],
                                id:"styles",
                                title:"CSS styles"
                            },
                            {css:"lookfeel/consistentSizing.css", 
                             jsURL:"lookfeel/consistentSizing.js",description:"\n      Drag the slider to resize all three text boxes. The box sizes match despite different\n      edge styling specified in CSS, enabling CSS-based skinning without affecting\n      application layout.\n    ", 
                             id:"consistentSizing",title:"Consistent sizing"},
                            {
                                jsURL:"grids/formatting/cellStyles.js",
                                description:"\n        Mouse over the rows and click-drag to select rows, to see the effects of different\n        base styles on these two grids.\n        ",
                                showSkinSwitcher:true,
                                tabs:[
                                    {title:"CSS", url:"grids/formatting/cellStyles.css"},
                                    {title:"countryData", url:"grids/data/countryData.js"}
                                ],
                                id:"gridCells",
                                title:"Grid cells"
                            }
                        ]
                    }
                ]
            },
            {
                showSkinSwitcher:"true",
                description:"\n    High-performance interactive data grids.\n",
                isOpen:true,
                title:"Grids",
                children:[
                    {