首先大家先承认下组织澳门永利备用网址,NanUI文书档案目录

你只怕感兴趣的稿子:

亲自过问源码

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

如上正是本文的全体内容,希望对大家的求学抱有支持,也可望我们多多援救脚本之家。

应用网页来规划总体窗口

开创NanUI应用的主意本文不再演讲,具体方法请参见文章目录里的连锁作品。本文将介绍NanUI的基本功用,用一张网页铺满全数窗体区域,并将讲述怎么着利用CSS和HTML来兑现对窗体的拖动、最大化、最小化、关闭等操作。

澳门永利备用网址 1

如图所示的分界面,整个窗体的体裁都以由HTML和CSS等前端技能来显现的。具体的HTML/CSS/JS代码本文不详细描述,因为那几个和NanUI的关系非常的小,依照实际项指标供给,您可以为您的软件分界面设计出更棒的职能。

在示例分界面中,大家将注重介绍系统命令菜单部分的最小化、最大化和关闭按键,以及分界面左边紫玉米黄的可用作拖动窗体的纵向标题栏的贯彻。

用前端本领来剖判,左边纵向标题栏其本质是一条宽度固定,高度百分百的DIV;命令区域内的最小化、最大化和破产开关其本质是多少个SPAN标签内嵌套了五个不等的FontAwsome的Logo。下边的剧情将介绍它们是什么样落实对承载窗体状态改造的。

 /*标题栏区域*/
.popup_title{
 height: 48px;
 line-height: 48px;           /*使垂直居中*/
 padding:0px 20px;           /*使距离左边有一定距离*/    
 background: #f5f5f5;          /*背景颜色*/
 border-bottom: 1px solid #efefef;       /*底边框*/
 border-radius:8px 8px 0 0;         /* 左上角和右上角使用半径为5px的圆角,此属性为CSS3标准属性 */ 
 -moz-border-radius: 8px 8px 0 0;       /* Mozilla浏览器的私有属性 */ 
 -webkit-border-radius:8px 8px 0 0;       /* Webkit浏览器的私有属性 */ /*窗口圆角*/
 color: #535353;
 font-size: 16px;           /*字体颜色和字体大小*/
 cursor: move;            /*可移动样式*/
 -moz-user-select: none;          /* Firefox all */
 -webkit-user-select: none;         /* Chrome all / Safari all /opera15+*/ 
 -ms-user-select: none;          /*IE10*/
 -khtml-user-select: none;         /*早期浏览器*/
 user-select:none;
 -o-user-select: none;          /* 以上两个属性目前并未支持,写在这里为了减少风险 */ 
 }

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}`);

    });

});

上述代码的具体效果,能够活动对示范程序进行调节和测试来查阅效果。

注1:能够禁止内容选中。
注2:未有明令禁止内容选中。
 可知,禁止内容选中的方法如下:
 IE 给标签设置 unselectable= “on” ,设置标签方法 onselectstart=”return
false;”
 Firefox 给标签设置个人样式 -moz-user-select:none 。
 Chrome Safari 给标签设置个人样式 -webkit-user-select:none
,设置标签方法 onselectstart=”return false;”。
 Opera 给标签设置 unselectable= “on” 

社群和增派

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

交流群QQ群
521854872

帮助小编

假如您快乐自身的劳作,并且期待NanUI持续的前行,请对NanUI项目张开帮衬以此来鼓励和帮忙自个儿继续NanUI的支付工作。你能够应用微信或者支付宝来围观下边包车型大巴二维码实行帮忙。

澳门永利备用网址 2

接上文JavaScript轻易达成弹出拖拽窗口(一)张开学习。 
上边初阶具体剖判代码部分:
 首先大家先确认下协会:
 悬浮窗口:早先不可见。包蕴标题栏和内容栏,标题栏内有标题和关闭开关。
 遮罩层:开头不可知。用于安装弹出悬浮窗口时的半透明背景,
 按钮:用来点击弹出悬浮窗口。 

怎么着通过拖拽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;
    ...
}

如此那般,您就足以灵活的决定可拖动来改动窗体地点的区域了。

澳门永利备用网址 3

内置Javascript对象 – NanUI

NanUI除了落到实处了上述的专用html属性n-ui-command和四个专用事件外,在Javascript全局遭受中还放置了贰个专项使用对象NanUI,通过该对象您能够查询当前NanUI和CEF的本子号,通过hostWindow中的方法来获得当前窗体的情景值,实施最大化、最小化和关闭操作。

澳门永利备用网址 4

那边有几个知识点要求理解:
 1.
css3(border-radius)边框圆角

 border-radius
是一种缩写方法。别的其七个值是遵照top-left、top-right、bottom-right、bottom-left的逐一来设置的其首要会有下边三种情景出现:
 1.只有一个值,那么 top-left、top-right、bottom-right、bottom-left
三个值特别。
 2.有四个值,那么 top-left 等于 bottom-right,并且取第一个值;top-right
等于 bottom-left,并且取第三个值
 3.有多个值,当中第贰个值是安装top-left;而第二个值是 top-right 和
bottom-left 并且她们会等于,第四个值是安装 bottom-right。
 4.有五个值,个中第二个值是安装 top-left 而第三个值是 top-right 第多个值
bottom-right 第多少个值是设置 bottom-left。
 扶助的浏览器: 

什么样通过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,又也许是窗体市区核心时更换标题栏的水彩等。

 消除方案  给标签设置样式 -moz-user-select:none ;-webkit-user-select:none
同期标签设置 unselectable= “on” ,有限支撑各浏览器都能够禁止内容选中。
 如案例中给悬浮差弹出窗的标题栏设置禁止选中样式,能够这么设置:

NanUI文档目录

下边进行详细表达
 1、要让窗口能随随意便活动,那么窗口的定势(position)应该使用相对定位(absolute);   

 注意:本文为原创, 地址:http://www.cnblogs.com/wanghuih/p/5576910.html

2.给窗口增多标题栏,同时将标题栏的鼠标光标设置为拖动(move)形状(在chrome中拖动的时候,光标会化为文字光标,放手鼠标键后重操旧业),这里供给对标题栏的左上角和右上角设置一下圆角。 

澳门永利备用网址 5

澳门永利备用网址 6

<!DOCTYPE html>
<html>
<body>
  <div unselectable="on" style="background:#CCC;" >unselectable=on </div>
  <br/>
  <div style="background:#CCC;-webkit-user-select:none;" >-webkit-user-select:none;</div>
  <br/>
  <div style="background:#CCC;-moz-user-select:none;" >-moz-user-select:none;</div>
  <br/>
  <div style="background:#CCC;" onselectstart="return false;" >onselectstart="return false;"</div>
</body>
</html>  

cursor 属性规定所展现的指针(光标)的品类。
 属性值为move时,表示此光标所指的靶子是足以活动的,平时为三个交叉箭头,如图。

3.user-select:用来调整内容的可选取性
 auto——暗许值,用户能够选桐月素中的内容
 none——用户不能够选用成分中的任何内容
 text——用户能够采取成分中的文本
 element——文本可选,但只限成分的分界内(唯有IE和FF补助)
 需求小心的是:user-select并不是一个W3C的CSS标准属性,浏览器扶助的不完整,供给对各种浏览器进行调节
 user-select说明:  设置或探索是不是同意用户选中文本。
 (1)IE6-9不协助该属性,但支撑选拔标签属性 onselectstart=”return false;”
来达到 user-select:none 的效果;Safari和Chrome也支撑该标签属性;
 (2)直到Opera12.5照样不协理该属性,但和IE6-9一样,也支持使用个人的标签属性
unselectable=”on” 来完结 user-select:none 的功效;
 (3)unselectable 的另三个值是
off;除Chrome和Safari外,在其余浏览器中,倘若将文件设置为
-ms-user-select:none;,则用户将不能够在该文本块中初阶选用文本。
 但是,要是用户在页面包车型地铁别的区域开首荐择文本,则用户仍旧能够持续接纳将文件设置为
-ms-user-select:none; 的区域文本.
 分析以下代码(注意:此代码及此代码的分析结果来自w3help):

在各浏览器中效用如下:

<div class="popup_title" id="popup_title" unselectable= "on" >
 登录
  <a href="javascript:hidepopup();" class="popup_closebutton"></a>
</div>


.popup_title{
 -moz-user-select: none;          /* Firefox all */
 -webkit-user-select: none;         /* Chrome all / Safari all /opera15+*/ 
 -ms-user-select: none;          /*IE10*/
 -khtml-user-select: none;         /*早期浏览器*/
 user-select:none;
 -o-user-select: none;          /* 以上两个属性目前并未支持,写在这里为了减少风险 */ 
}

2.  cursor: move

 /*登录浮层组件*/
.popup{ 
 display:none;            /*初始隐藏*/
 width: 380px;
 height: auto;            /*高度自由,因为不确定,内容多少。*/
 border: 1px solid #D5D5D5;
 background: #fff;           /*窗口内容不透明,背景为白色*/ 
 box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
 -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25);
 -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25);    /*内容窗口带阴影*/
 border-radius: 8px;           /* 所有角都使用半径为8px的圆角,此属性为CSS3标准属性 */ 
 -moz-border-radius: 8px;         /* Mozilla浏览器的私有属性 */ 
 -webkit-border-radius:8px;         /* Webkit浏览器的私有属性 */ /*窗口圆角*/
 position: absolute;
 top: 100px;
 left: 100px;            /*绝对定位*/
 z-index: 9000; 
 }