NanUI文档目录

应用网页来统筹总体窗口

创设NanUI应用的办法本文不再演说,具体方法请参见著作目录里的相关随笔。本文将介绍NanUI的基本功效,用一张网页铺满所有窗体区域,并将讲述怎样运用CSS和HTML来贯彻对窗体的拖动、最大化、最小化、关闭等操作。

jQuery 1

如图所示的界面,整个窗体的样式都是由HTML和CSS等前端技术来呈现的。具体的HTML/CSS/JS代码本文不详细描述,因为这么些和NanUI的关联不大,依照实际项目标需要,您可以为你的软件界面设计出更棒的效应。

在示例界面中,我们将根本介绍系统命令菜单部分的最小化、最大化和关闭按钮,以及界面左边紫色的可用作拖动窗体的纵向标题栏的实现。

用前端技术来分析,左边纵向标题栏其本质是一条宽度固定,中度100%的DIV;命令区域内的最小化、最大化和倒闭按钮其本质是五个SPAN标签内嵌套了五个例外的FontAwsome的图标。下边的内容将介绍它们是何等实现对承载窗体状态改变的。

什么通过拖拽HTML元一向运动窗体地点

若果你需要实现类似示例中拖动左边粉红色区域标题栏来改变窗体地点的机能,那么在该因素对应的CSS中只需点名该因素所在区域的-webkit-app-region属性值为drag即可兑现:

.some-class{
    -webkit-app-region:drag;
}

指定此体制后,只要鼠标指针在该样式功能的区域内执行拖拽操作,那么NanUI的承前启后窗体的职务将随鼠标的拖动而爆发改变。

但在统筹界面时,假设你愿目的在于可拖动元素区域内的某些区域不接收拖动信号,那么只需要将-webkit-app-region属性值改为no-drag即可。

譬如说示例中,两个系统命令按钮实际上是包括在一个DIV元素内,同时这些DIV设置了-webkit-app-region属性值为drag,这时你会意识,拖动那么些DIV所在区域(包括五个指令按钮的区域)时窗体都落实了运动,不过这也阻断了这么些区域内的另外鼠标操作,包括六个指令按钮的鼠标点击操作。这显著不是所希望的功效。如下,该区域的HTML代码为:

<div class="app-sys-command-container">
    <ul class="sys-commands">
        <li n-ui-command="minimize">
            <i class="fa fa-window-minimize"></i>
        </li>
        <li n-ui-command="maximize">
            <i class="fa fa-window-maximize"></i>
        </li>
        <li n-ui-command="close">
            <i class="fa fa-close"></i>
        </li>
    </ul>
</div>

在css样式.app-sys-command-container中安装了-webkit-app-region属性值为drag,这致使了ul.sys-commands区域也显示可拖动的状况。为了避免这多少个区域被默认的拖动事件影响到其它事件的呼应,那么就需要设置.sys-commands的样式-webkit-app-region属性值为no-drag,那么这有的区域将不再相应窗体拖动的轩然大波。这一部分的CSS代码为:

.demo-app > content > .app-sys-command-container {
    ...
    -webkit-app-region: drag;
    ...
}

.demo-app > content > .app-sys-command-container > .sys-commands {
    ...
    -webkit-app-region: no-drag;
    ...
}

这么,您就足以灵活的操纵可拖动来改变窗体地方的区域了。

怎样通过HTML元平素执行窗体的最大化/最小化/关闭操作

在下边的html代码片段中,展现了演示程序的四个系统命令按钮的实现形式:

<div class="app-sys-command-container">
    <ul class="sys-commands">
        <li n-ui-command="minimize">
            <i class="fa fa-window-minimize"></i>
        </li>
        <li n-ui-command="maximize">
            <i class="fa fa-window-maximize"></i>
        </li>
        <li n-ui-command="close">
            <i class="fa fa-close"></i>
        </li>
    </ul>
</div>

其间的i标签内,可以看到不普遍的html属性n-ui-command,这一特性是NanUI用来标注按钮行为的专用属性,通过其属性值minimize/maximize/close不难看出,通过点击具备这一专用属性的标签,就可知实现窗体对应的最小化/最大化/关闭操作。

专门需要提出的,在演示窗体中点击最大化按钮后方可见见,最大化按钮的图标从最大化更改成了还原的体制,这是因而拔取Javascript监测窗体事件来贯彻的。

似乎上边介绍的专用属性,NanUI还停放了有些专用的风波。通过监听这一个事件来贯彻部分与众不同的效能,例如地点所说的最大化窗体时改变系统按钮的图标,又或者是窗体市区要旨时改变标题栏的水彩等。

NanUI 窗体专用事件

脚下NanUI实现的专用事件有以下三个:

  • hoststatechange:
    窗体状态(最大化、最小化、还原)暴发变动时接触。
  • hostactivestate: 窗体拿到或丢失主题时接触。
  • hostsizechange: 窗体大小改变时接触。

经过监听这么些事件,您就足以按照需求来促成部分特定的功力。如示例项目中,使用了jQuery来监听这两个专用事件:

$(function () {
    //窗口状态改变
    $(window).on("hoststatechange", function (e) {
        console.log(e.detail);
        $("#label-form-state").text(e.detail.stateName);

    });

    //窗口激活状态改变
    $(window).on("hostactivestate", function (e) {
        console.log(e.detail);
        $("#label-activated-state").text(e.detail.stateName);

        if (e.detail) {
            if (e.detail.state === 1) {
                $("html").addClass("app-active");
            }
            else {
                $("html").removeClass("app-active");
            }
        }
    });
    //窗口尺寸改变
    $(window).on("hostsizechange", function (e) {
        console.log(e.detail);
        $("#label-size-state").text(`width:${e.detail.width} height:${e.detail.height}`);

    });

});

上述代码的切实功效,可以自动对示范程序开展调剂来查看效果。

内置Javascript对象 – NanUI

NanUI除了实现了上述的专用html属性n-ui-command和五个专用事件外,在Javascript全局环境中还内置了一个专用对象NanUI,通过该目的您可以查询当前NanUI和CEF的版本号,通过hostWindow中的方法来博取当前窗体的情状值,执行最大化、最小化和倒闭操作。

jQuery 2

以身作则源码

git clone https://github.com/NetDimension/NanUI-Examples-03-Design-Your-Form-With-Html.git

社群和增援

GitHub
https://github.com/NetDimension/NanUI/

交流群QQ群
521854872

帮忙作者

假定你喜欢自己的办事,并且期望NanUI持续的腾飞,请对NanUI项目开展辅助以此来鼓励和支撑我连续NanUI的开销工作。你可以使用微信或者支付宝来围观上边的二维码实行辅助。

jQuery 3

相关文章

网站地图xml地图