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

📅  最后修改于: 2021-11-06 11:38:33             🧑  作者: Mango

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

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

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

HTML


  

    
    
    

  

    
  
    
        
        
           
            
                

                    This demonstrates the basic                     taskbar and one window,                     both with default options.                 

               
        
    
  


HTML


  

    
    

  

    
  
    
        
        
           
            
                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".             
        
    
  


HTML


  

    
    

  

  
    
  
  
    
        
           
           
            
                Window drag and resize                  events are triggered.             
                               
        
    
  


HTML


  

  
    
    

  

    
  
    
  
    
        
        
                                     
           
                                     
           
            
                This demo shows how windows                  containing embedded content                  like iframe, or videos can                  be included.
Set                  embeddedContent option to                  true
Window containing basic                  window has user custom styles                 while window containing video                  has the default styles.             
        
    
  


HTML


  

    
    

  

  
    
  
    
        
           
        
                                     
           
            
                  

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

               
        
    
     


HTML


  

    
    

  

    
  
    
        
           
        
        
           
            
                  

This shows when sortable                     events are triggered.                     
                

               
               
        
    
     


输出:

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

HTML



  

    
    

  

    
  
    
        
        
           
            
                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



  

    
    

  

  
    
  
  
    
        
           
           
            
                Window drag and resize                  events are triggered.             
                               
        
    
  

输出:

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

HTML



  

  
    
    

  

    
  
    
  
    
        
        
                                     
           
                                     
           
            
                This demo shows how windows                  containing embedded content                  like iframe, or videos can                  be included.
Set                  embeddedContent option to                  true
Window containing basic                  window has user custom styles                 while window containing video                  has the default styles.             
        
    
  

输出:

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

HTML



  

    
    

  

  
    
  
    
        
           
        
                                     
           
            
                  

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

               
        
    
     

输出:

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

HTML



  

    
    

  

    
  
    
        
           
        
        
           
            
                  

This shows when sortable                     events are triggered.                     
                

               
               
        
    
     

输出: