目录

用法

            <link rel="stylesheet" href="WebDesktop.css">
            <script src="WebDesktop.js">

菜单

使用一个 ul 列表，并将其 class="menu" 即可使其成为一个菜单，菜单的内容为 ul 下的 li 元素内容，支持嵌套使用

实例：

  • file
    • New
    • Open
    • Save as
      • jpg
      • png
      • web
        • gif
        • webp
  • edit
    • Undo
    • Redo
    • Cut
    • Copy
    • Paste
  • view
    • Zoom
    • Night
    • Default
  • Tool
    • Analyze
    • Add Space
    • Settings
      • General
      • Performance
      • Style
  • help
    • help
    • about
//code

窗口

实例：

This is a window


                    //code
                
        var windowDemo = windowUIList['window-demo'];
        $('#display-window')[0].onclick = function () {
            windowDemo.open();
        };
        windowDemo.find('#rename-title').onclick = function () {
            windowDemo.$title.innerText = windowDemo.find('#new-title').value;
        };

选项卡

实例：

  • demo1
  • demo2
  • demo3

demo1

this is a tab demo.

AAAAAAAAAAAAAAA

AAAAAAAAAAAAAAA

AAAAAAAAAAAAAAA

AAAAAAAAAAAAAAA

AAAAAAAAAAAAAAA

demo2

this is a tab demo.

BBBBBBBBBBBBBBBBBB

demo3

this is a tab demo.

CCCCCCCCCCCCCCCCCCC

CCCCCCCCCCCCCCCCCCC

CCCCCCCCCCCCCCCCCCC


                    //code

树形组件

用嵌套的数组表示出树形组件的数据，以树形组件的数据为参数新建一个树形组件，再将其渲染到某个元素上即可

实例：

选择的项：

未选择 

                //code
                

        var treeData = [
            {
                label: 'C:/',
                children: [
                    'Program Files',
                    {
                        label: 'Windows',
                        children: [
                            'System',
                            'System32',
                            'Fonts'
                        ]
                    }
                ]
            },
            {
                label: 'D:/',
                children: [
                    'wqswqdwq',
                    'sadasdasd',
                    'adascxzcxz'
                ]
            }
        ];

        var tree = new Tree(treeData);
        tree.render($('#demo-tree')[0]);
        tree.onchange = function () {
            $('.display-value span')[0].innerText = this.$value.innerText;
        };