基于jQuery UI的模拟windows窗口插件

当前位置:主页 > jQuery库 > 布局和界面 > 基于jQuery UI的模拟windows窗口插件
基于jQuery UI的模拟windows窗口插件
分享:

    插件介绍

    jquery-lwd是一款轻量级的基于jQuery UI的模拟windows窗口插件。该插件可以模拟windows窗口,对窗口进行最大化,最小化,拖动等操作。并提供windows2000经典主题效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-12
    阅读:
简要教程

jquery-lwd是一款轻量级的基于jQueryUI的模拟windows窗口插件。该插件可以模拟windows窗口,对窗口进行最大化,最小化,拖动等操作。并提供windows2000经典主题效果。它的特点有:

  • 通过HTML5 data属性来设置窗口的属性。
  • 高亮聚焦的窗口。
  • 最大化和恢复窗口尺寸。
  • 最小化和恢复窗口尺寸。
  • 任务栏显示当前打开的窗口。
  • 通过点击聚焦和恢复窗口。
  • 可以显示系统时间。
  • 可以显示开始按钮。
  • 提供windows2000主题。

jquery模拟windows窗口效果

使用方法

在页面中引入jquery和jquery ui相关文件,以及jquery-lwd.css和jquery-lwd.js文件。

<link href="lib/jquery-ui/themes/default/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="src/jquery-lwd/themes/jquery-ui/jquery-lwd.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="src/jquery-lwd/jquery-lwd.js"></script>                  
                
HTML结构

创建一个窗口的基本HTML结构如下:

<div class="window"
     data-autOpen="true"
     data-closable="true"
     data-closeOnEscape="false"
     data-closeText="CloseThis"
     data-dialogClass="window-dialog"
     data-draggable="true"
     data-height="350"
     data-hide="false"
     data-maxHeight="600"
     data-maxWidth="800"
     data-minHeight="320"
     data-minWidth="480"
     data-modal="false"
     data-positionX="100"
     data-positionY="100"
     data-resizable="true"
     data-show="true"
     data-width="400"
     data-title="窗口标题"
>
     
</div>
                

jquery-lwd模拟windows窗口插件的github地址为:https://github.com/mstellmacher/jquery-lwd

网友评论