使用网页来设计整个窗口

2019-11-19 22:40 来源:未知

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的涉及相当小,依照实际项指标急需,您可认为你的软件分界面设计出更棒的魔法。

在示例分界面中,我们将重大介绍系统命令菜单部分的最小化、最大化和破产按键,以致分界面侧边浅绛红的可用作拖动窗体的纵向标题栏的得以完毕。

用前端技巧来深入分析,侧面纵向标题栏其本质是一条宽度固定,中度百分百的DIV;命令区域内的最小化、最大化和停业按键其本质是多个SPAN标签内嵌套了多个不等的FontAwsome的Logo。上面包车型地铁剧情将介绍它们是怎么着贯彻对承载窗体状态改换的。

何以通过拖拽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轻易看出,通过点击具有那大器晚成专项使用属性的竹签,就可以达成窗体对应的最小化/最大化/关闭操作。

特意须要提出的,在演示窗体中式点心击最大化开关后能够看看,最大化按键的Logo从最大化校订成了还原的体制,那是通过运用Javascript监测窗体育赛事件来贯彻的。

有如上面介绍的专项使用属性,NanUI还放置了少年老成部分专项使用的事件。通过监听那几个事件来促成都部队分奇特的效应,比方地点所说的最大化窗体时修改系统按键的Logo,又大概是窗体市区主旨时更改标题栏的颜色等。

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

交流群QQ群
521854872

帮忙作者

设若你欢欣小编的做事,何况希望NanUI持续的升华,请对NanUI项目进展援救以此来激励和匡助本身一连NanUI的费用专门的学问。你能够运用微信或者支付宝来围观下面包车型客车二维码举办扶持。

图片 3

TAG标签:
版权声明:本文由澳门国际银河备用网址发布于网页测试游戏,转载请注明出处:使用网页来设计整个窗口