如何使用 jQuery-lwd 插件设计桌面功能？

本文将帮助您使用 jQuery-UI lwd插件设计一个基本的桌面引擎。这个插件非常轻量级，完全基于 JavaScript 和 CSS。

桌面引擎为 Web 开发人员提供了以下功能：

• 活动
• 可调整大小
• 专注于活动窗口
• 单击时恢复窗口
• 最小化，最大化

从官方 Github 下载所有必需的预编译文件并将其保存在您的工作文件夹中。请在代码实现过程中注意文件路径

HTML

  

    
  
    
    
  
    
    
  
    
  
    
    
    
  
    
    
      
    
    
    

  

    
        
              
            
                Add new window
            
  
            
        
    
  

  

    $(document).ready(function () {
  
        var intCounter = 1;
              
            /* On click event of button, 
                new window is added */
            $('#addWindowbuttonID').click(function () {
                var $objWindow = $('<div class="window">Window '
                    + intCounter + '</div>');
  
                var intRandom = Math.floor(
                    (Math.random() * 12) + 1);
  
                $($objWindow).appendTo('body');
                $objWindow.window({
                    title: 'My window ' + intCounter,
                    width: 480,
                    height: 320,
                    position: {
                        my: 'left+' + 200 + ', top+' + 200,
                        at: 'left top',
                        of: window
                    },
                    maximizable: true,
                    minimizable: true,
  
                    icon: 'src/jquery-lwd/themes/windows2000/'
                        + 'images/icons/' + intRandom + '.png'
                });
            intCounter++;
        });
  
        $('#taskbar').taskbar();
  
        $('#theme').change(function () {
            $("head link#themecss").attr("href", $(this).val());
        });
    });

  

输出：用户可以使用插件尝试不同的选项或功能。