亚洲必赢bwin696.comNanUI文档 – 使用网页来统筹总体窗口

NanUI文档目录

  • NanUI简介
  • 初步采取NanUI
  • 卷入并行使内嵌式的HTML/CSS/JS资源
  • 采取网页来统筹总体窗口
  • 何以贯彻C#同Javascript的相互通信
  • 争处理NanUI中之下载过程 – DonwloadHandler的施用(待更新。。。)
  • 哪些处理NanUI中之弹窗过程 – LifeSpanHandler的行使(待更新。。。)
  • 怎样支配Javascript对话框 – JsDialogHandler的运(待更新。。。)
  • 从今定义资源处理程序 (待更新。。。)

用网页来设计总体窗口

创建NanUI应用之计本文不再阐述,具体方法请参见文章目录里之连带文章。本文将介绍NanUI的着力职能,用平等摆放网页铺满所有窗体区域,并以讲述如何利用CSS和HTML来兑现对窗体的拖动、最大化、最小化、关闭等操作。

亚洲必赢bwin696.com 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中的点子来博当前窗体的状态值,执行最大化、最小化和倒闭操作。

亚洲必赢bwin696.com 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的开销工作。你可利用微信或者支付宝来围观下的第二维码进行补助。

亚洲必赢bwin696.com 3

相关文章