可拖动/可调整大小/最大化/最小化对话框窗口库 - winbox
栏目分类:模态 / 弹出窗口   发布日期:2021-09-28   浏览次数:

winbox 是一个开源、零依赖的 JavaScript 库,用于在应用程序上创建可拖动、可调整大小、可最大化和可最小化的对话框窗口。

更多功能:

  • 2 个预先构建的主题:轻和现代。

  • 高度可定制。

  • 允许将窗口扩展到全屏。

  • 允许将模态最小化到选项卡停靠栏。

  • 支持任何内容:内联、iframe、HTML。

使用:

1、将winbox的JavaScript和CSS导入文档中。

<!-- 核心样式表 --> 
<link rel="stylesheet" href="dist/css/winbox.min.css"> 
<!-- 主题 --> 
<link rel="stylesheet" href="dist/css/themes/modern.min.css"> 
<link rel="stylesheet" href="distcss/themes/white.min.css"> 
<!-- 核心 JavaScript --> 
<script src="dist/js/winbox.min.js"></script> 
 
<!-- OR ... --> 
<script src="dist/winbox.bundle.js"></script>

2. 创建一个默认对话框窗口并指定标题和消息如下:

new WinBox("Default Dialog", {
    title: "Default Dialog",
    html: "<h1>HTML Content</h1>"
});

3. 或者从文档中的元素加载内容。

<div id="backstore" style="display: none"> 
  <div id="content">
    对话框内容在这里
  </div> 
</div>
new WinBox("Mount Example", { 
    mount: document.getElementById("content").cloneNode(true) 
});

4. 或者在 iframe 中加载外部内容。

new WinBox("Iframe Example", { 
    url: "/path/to/page/"
});

5. 指定对话窗口的主题。

new WinBox("Iframe Example", { 
    class: "modern", // 'white', or 'customTheme' 
});

6. 自定义对话窗口的更多选项。

new WinBox("With Options", { 
    // 唯一 ID 
    id: "my-window", 
    // 根元素
    root: document.body, 
    // 模态模式
    modal: false, 
    // 背景色
    background: "#fff", 
    // 边框宽度
    border: 4, 
    // 宽度/高度
    width: 200, 
    height: 200, 
    // x/y 位置
    x: "center", 
    y: "center", 
    // 在初始化时最大化对话框
    max: false, 
    // 位置选项
    top: 50, 
    right: 50, 
    bottom: 0, 
    left: 50, 
});

7. 回调函数。

new WinBox("With Options", { 
    onfocus: function(){ 
      // 做某事
    }, 
    onblur: function(){ 
      // 做某事
    }, 
    onresize: function(width, height){ 
      // 做某事
    }, 
    onmove: function(x, y){ 
      // 做某事
    }, 
    onclose: function(){ 
      // 做某事
    } 
});

8. API 方法和属性。

const myBox = WinBox(title, options); 
 
// 方法
myBox.mount(src) 
myBox.unmount(dest) 
myBox.move(x, y) 
myBox.resize(width, height) 
myBox.close() 
myBox.focus() 
myBox.hide() 
myBox.show( ) 
myBox.minimize(state) 
myBox.maximize(state) 
myBox.fullscreen(state) 
myBox.setBackground(string) 
myBox.setTitle(string) 
myBox.setUrl(string) 
myBox.addClass(name) 
myBox.removeClass(name) 
 
/ / 属性
myBox.id 
myBox.body 
myBox.min 
myBox.max 
myBox.x 
myBox.y 
myBox.width 
myBox.height 
myBox.top
myBox.right 
myBox.bottom 
myBox.left

官方网站:https://github.com/nextapps-de/winbox

相关热词: winbox窗口库对话框

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库