房地产项目NanUI文档 – 使用网页来统筹总体窗口

NanUI文档目录

  • NanUI简介
  • 初步采用NanUI
  • 卷入并应用内嵌式的HTML/CSS/JS资源
  • 行使网页来规划总体窗口
  • 何以兑现C#以及Javascript的竞相通信
  • 争处理NanUI中的下载过程 – DonwloadHandler的以(待更新。。。)
  • 哪些处理NanUI中的弹窗过程 – LifeSpanHandler的动(待更新。。。)
  • 什么样控制Javascript对话框 – JsDialogHandler的下(待更新。。。)
  • 打定义资源处理程序 (待更新。。。)

采取网页来统筹总体窗口

缔造NanUI应用之办法本文不再阐述,具体方法请参见文章目录里之相干文章。本文将介绍NanUI的主干作用,用相同布置网页铺满整个窗体区域,并以讲述如何用CSS和HTML来贯彻对窗体的拖动、最大化、最小化、关闭等操作。

房地产项目 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中之道来取得当前窗体的状态值,执行最大化、最小化和关操作。

房地产项目 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的开支工作。你得应用微信或者支付宝来围观下的亚维码进行资助。

房地产项目 3

相关文章