UI组件、后台管理

winbox


<head>
    <script src="dist/winbox.bundle.min.js"></script>
</head>
<head>
    <link rel="stylesheet" href="dist/css/winbox.min.css">
    <script src="dist/js/winbox.min.js"></script>
</head>


new WinBox({
    // configuration:
    index: 1,
    id: "my-window",
    root: document.body,
    class: ["no-full", "no-max", "my-theme"],

    // appearance:
    title: "All Options",
    background: "#fff",
    border: 4,
    header: 45,
    icon: false,

    // initial state:
    modal: false,
    max: false,
    min: false,
    hidden: false,

    // dimension:
    width: 250,
    height: 200,
    minheight: 55,
    minwidth: 100,
    maxheight: 300,
    maxwidth: 500,
    autosize: true,

    // position:
    x: "center",
    y: "center",

    // viewport boundaries:
    top: 50,
    right: 50,
    bottom: 0,
    left: 50,

    // contents (choose from):
    url: false,
    mount: false,
    html: "width: 250, height: 200",

    // callbacks:
    oncreate: function(options){
        options.icon = "demo/wikipedia.svg"
    },
    onshow: function(){
        console.log("Show:", this.id);
    },
    onhide: function(){
        console.log("Hide:", this.id);
    },
    onfocus: function(){
        this.setBackground("#fff");
    },
    onblur: function(){
        this.setBackground("#999");
    },
    onresize: function(w, h){
        this.body.textContent =
            `width: ${w}, height: ${h}`;
    },
    onmove: function(x, y){
        this.body.textContent =
            `x: ${x}, y: ${y}`;
    },
    onclose: function(force){
        return !confirm("Close window?");
    },
    onfullscreen: function(){
        console.log("Fullscreen:", this.id);
    },
    onmaximize: function(){
        console.log("Maximize:", this.id);
    },
    onminimize: function(){
        console.log("Minimize:", this.id);
    },
    onrestore: function(){
        console.log("Restore:", this.id);
    }
});

文档更新时间: 2024-07-27 11:48 作者：admin