如何使用 jQuery Simone 插件设计窗口管理器？

在本文中，我们将学习使用完全基于 HTML、JavaScript 和 jQuery 的Simone 插件来设计窗口管理器。它为单个网页应用程序提供了类似桌面的简单功能。

在下面的代码实现之前从官网下载预编译文件。请注意项目目录中的正确文件路径。

示例 1：以下代码演示了带有默认选项的窗口的基本任务栏。

HTML

  

    
    
    
        p {
            padding: 20px 20px;
        }
    

  

    
        $(document).ready(function () {
            "use strict";
  
            // Taskbar has to be created first
            $(".taskbar").taskbar();
  
            // Window is binded to taskbar widget,
            // so it has to be created second
            $(".window").window();
        });
    
  
    
        
        
  
        
            
                
                    This demonstrates the basic
                    taskbar and one window,
                    both with default options.
                
  
            
        
    

  

输出：

示例 2：以下代码演示了设置为“viewport”和“visible”的窗口包含。通过调整窗口大小和拖动来参考输出。

HTML

  

    
    

  

    
        $(document).ready(function () {
  
            "use strict";
  
            // Create first taskbar
            var $taskbar = $(".taskbar").taskbar({
                windowsContainment: "viewport",
                buttons: {
                    openWindow: {
                        label: "Open window (viewport)"
                    }
                },
                buttonsOrder: ["openWindow"]
            });
  
            // Bind events to taskbar window opener
            var $taskbarOpen = $(".taskbar")
                .taskbar("option", "buttons.openWindow")
  
                // Get jQuery object of the button created
                .$element
  
                .on("click", function () {
                    $("<div></div>")
                        .window({
                            taskbar: $taskbar,
                            title: "Viewport"
                        });
                });
  
            // Create second taskbar
            var $taskbar2 = $(".taskbar2").taskbar({
                windowsContainment: "visible",
                horizontalStick: "top left",
                buttons: {
                    openWindow: {
                        label: "Open window (visible)"
                    }
                },
                buttonsOrder: ["openWindow"]
            });
  
            // Bind events to second taskbar window opener
            var $taskbarOpen = $taskbar2
                .taskbar("option", "buttons.openWindow")
  
                // Get jQuery object of the button created
                .$element
  
                .on("click", function () {
                    $("<div></div>")
                        .window({
                            taskbar: $taskbar2,
                            title: "Visible"
                        });
                });
        });
    
  
    
        
        
  
        
            
                Window containment describe 
                boundaries in which window 
                exists. There are 
                windowsContainment and 
                containment. Windows on the 
                top taskbar has "containment" 
                set to "viewport", and the 
                bottom taskbar has 
                "containment" set to "visible".
            
        
    

  

输出：

示例 3：以下代码演示了发生的窗口交互，如“拖动”和“调整大小”事件。

HTML

  

    
    

  

  
    
        $(document).ready(function () {
            "use strict";
  
            // Tnitialize taskbar and 
            $(".taskbar").taskbar();
  
            // Initialize window
            $(".window").window({
                title: "Draggable or resizable",
                containment: "visible",
                width: 500,
                height: 300,
  
                // Logs all events
                dragStart: function (event, ui) {
                    demo.log("dragStart");
                },
                drag: function (event, ui) {
  
                    // Log drag event
                    if (Math.random() < 0.05) {
                        demo.log("drag");
                    }
                },
                dragStop: function (event, ui) {
  
                    // Logs event when the drag is stopped
                    demo.log("dragStop");
                },
                resizeStart: function (event, ui) {
                    demo.log("resizeStart");
                },
                resize: function (event, ui) {
  
                    // Log resize event
                    if (Math.random() < 0.05) {
                        demo.log("resize");
                    }
                },
                resizeStop: function (event, ui) {
                    demo.log("resizeStop");
                },
            });
  
            // Containment change value is saved
            $(".switch-containment").on("click", function () {
  
                var containment = $(".window")
                    .window("option", "containment");
  
                // When the value is toggled 
                containment = containment === 
                    "viewport" ? "visible" : "viewport";
  
                // Setting the new value
                $(".window").window("option", 
                    "containment", containment);
  
                // Button click value is set
                $(this).find("span.state")
                    .text("\"" + containment + "\"");
            }).button();
        });
    
  
  
    
        
  
        
  
        
            
                Window drag and resize 
                events are triggered.
            
  
            
                Switch containment (currently:
                "visible")
            
  
            
        
    

  

输出：

例4：下面的代码演示了在window的“iframe”中嵌入视频内容。

HTML

  

  
    
    

  

    
        $(document).ready(function () {
            "use strict";
  
            // Initialize taskbar
            $(".taskbar").taskbar();
  
            // Initialize window with iframe
            // with the basic one
            $(".window-demo").window({
                embeddedContent: true,
  
                // Widget class is needed for 
                // applying styles to overlay
                widgetClass: "window-demo-widget",
                title: "Basic window",
                minWidth: 630,
                minHeight: 340
            });
  
            // Initialize window containing
            // desired video
            $(".window-youtube").window({
                embeddedContent: true,
                title: "Video",
                minWidth: 410,
                minHeight: 250
            });
        });
    
  
    
  
        /* center the iframe and remove
           borders */
        .simone-window-content iframe {
            display: block;
            margin: 0px auto;
            border: none;
        }
  
        /* Apply custom styles to 
           overlay of window */
        .window-demo-widget 
        .simone-window-content-overlay {
            opacity: 0.3;
            background: orange;
        }
    
  
    
        
        
  
            
            
            
        
  
        
  
            
            
            
        
  
        
            
                This demo shows how windows 
                containing embedded content 
                like iframe, or videos can 
                be included. Set 
                embeddedContent option to 
                trueWindow containing basic 
                window has user custom styles
                while window containing video 
                has the default styles.
            
        
    

  

输出：

示例 5：以下代码演示了快速窗口最大化和慢速窗口最小化。

HTML

  

    
    

  

  
    
        $(document).ready(function () {
            "use strict";
  
            // Initialize taskbar
            $(".taskbar").taskbar();
  
            // Window with default options
            // initialized
            $(".window-default").window({
                title: "Quick maximize"
            });
  
            // Custom durations for animation
            $(".window-custom").window({
                title: "My custom durations",
                durations: {
                    maximize: 1100,
                    minimize: 400,
                    restore: false,
                    show: "fast"
                }
            });
  
            //  "maximize" method with my 
            // custom time duration
            $(".quick-maximize").on("click", 
                                function () {
  
                // 70 ms approx time is enough
                // for user to notice
                $(".window-custom")
                    .window("maximize", 70);
            }).button();
  
            // "minimize" method with my 
            // custom time duration
            $(".slow-minimize").on("click", 
                                function () {
  
                // Slow for example like 
                // 3.5 seconds
                $(".window-custom")
                    .window("minimize", 3500);
            }).button();
        });
    
  
    
        
  
        
        
            
                Quick window maximization
            
  
            
                Slow window minimization
            
        
  
        
            
                  

                    This shows window flow like 
                    maximizing, minimizing, 
                    restoring and showing.
                
  
            
        
    
  

  

输出：

示例 6：以下代码演示了 sortable 事件触发器。

HTML

  

    
    

  

    
        $(document).ready(function () {
            "use strict";
  
            $(".taskbar").taskbar({
  
                // Log events 
                sortableStart: function () {
                    demo.log("sortableStart");
                },
                sortableSort: function () {
  
                    // Log sortableSort
                    if (Math.random() < 0.05) {
                        demo.log("sortableSort");
                    }
                },
                sortableChange: function () {
                    demo.log("sortableChange");
                },
                sortableStop: function () {
                    demo.log("sortableStop");
                }
            });
  
            // Initialize 3 windows and minimize them
            $(".window")
                .window()
                .window("minimize", false);
        });
    
  
    
        
  
        
        
        
  
        
            
                  
This shows when sortable
                    events are triggered.
                    
                
  
            
  
            
        
    
  

  

输出：