使用网页来安顿总体窗口,JavaScript不难实现弹出拖拽窗口爱博体育app

NanUI文书档案目录

接上文JavaScript不难实现弹出拖拽窗口(一)开始展览学习。 
下边起始具体分析代码部分:
 首先大家先确认下结构:
 悬浮窗口:始于不可见。包涵标题栏和内容栏,标题栏内有标题和倒闭按钮。
 遮罩层:始发不可知。用于安装弹出悬浮窗口时的半透明背景,
 按钮:用来点击弹出悬浮窗口。 

下边举办详细表明
 壹、要让窗口能自由活动,那么窗口的定点(position)应该接纳相对定位(absolute);   

利用网页来统一筹划总体窗口

创造NanUI应用的方法本文不再解说,具体方法请参见小说目录里的相干文章。本文将介绍NanUI的主导功用,用一张网页铺满全数窗体区域,并将讲述怎样选用CSS和HTML来促成对窗体的拖动、最大化、最小化、关闭等操作。

爱博体育app 1

如图所示的界面,整个窗体的体制都以由HTML和CSS等前端技术来呈现的。具体的HTML/CSS/JS代码本文不详细描述,因为这一个和NanUI的关联十分的小,遵照实际项目标内需,您能够为您的软件界面设计出更棒的机能。

在示例界面中,大家将重点介绍系统命令菜单部分的最小化、最大化和倒闭按钮,以及界面左边红棕的可用作拖动窗体的纵向标题栏的完结。

用前端技术来分析,左边纵向标题栏其本质是一条宽度固定,中度百分百的DIV;命令区域内的最小化、最大化和倒闭按钮其本质是多个SPAN标签内嵌套了八个例外的FontAwsome的图标。上边包车型地铁始末将介绍它们是如何贯彻对承载窗体状态改变的。

 /*登录浮层组件*/
.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; 
 }

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

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

二.给窗口添加标题栏,同时将标题栏的鼠标光标设置为拖动(move)形状(在chrome中拖动的时候,光标会变成文字光标,松手鼠标键后重操旧业),那里须求对标题栏的左上角和右上角设置一下圆角。 

哪些通过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不难看出,通过点击具备这1专用属性的价签,就能够达成窗体对应的最小化/最大化/关闭操作。

专门要求提议的,在演示窗体中式点心击最大化按钮后方可看来,最大化按钮的图标从最大化转移成了还原的体裁,那是通过应用Javascript监测窗体育赛事件来兑现的。

就像上边介绍的专用属性,NanUI还放置了有个别专用的事件。通过监听那个事件来贯彻部分特有的功力,例如地点所说的最大化窗体时改变系统按钮的图标,又也许是窗体市区主旨时改变标题栏的颜色等。

 /*标题栏区域*/
.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}`);

    });

});

上述代码的有血有肉作用,能够自动对示范程序开始展览调剂来查看效果。

这边有多少个知识点须求精晓:
 ①.
css叁(border-radius)边框圆角

 border-radius
是壹种缩写方法。此外其八个值是依照top-left、top-right、bottom-right、bottom-left的相继来设置的其主要性会有下边二种情景出现:
 1.只有三个值,那么 top-left、top-right、bottom-right、bottom-left
多少个值格外。
 贰.有多少个值,那么 top-left 等于 bottom-right,并且取第一个值;top-right
等于 bottom-left,并且取第二个值
 3.有八个值,当中第多个值是设置top-left;而第二个值是 top-right 和
bottom-left 并且她们会等于,第7个值是安装 bottom-right。
 四.有多个值,当中第一个值是设置 top-left 而第一个值是 top-right 第五个值
bottom-right 第5个值是安装 bottom-left。
 帮衬的浏览器: 

内置Javascript对象 – NanUI

NanUI除了落到实处了上述的专用html属性n-ui-command和多个专用事件外,在Javascript全局环境中还停放了2个专用对象NanUI,通过该对象您能够查询当前NanUI和CEF的本子号,通过hostWindow中的方法来取伏贴前窗体的景况值,执行最大化、最小化和关闭操作。

爱博体育app 2

爱博体育app 3

演示源码

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

2.  cursor: move

社会群体和支持

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

交流群QQ群
521854872

帮扶我

若是您喜悦本身的行事,并且期待NanUI持续的腾飞,请对NanUI项目展开援救以此来鼓励和支持自身继续NanUI的费用工作。你可以应用微信或者支付宝来围观下边包车型地铁贰维码进行接济。

爱博体育app 4

cursor 属性规定所出示的指针(光标)的品种。
 属性值为move时,表示此光标所指的对象是足以移动的,平常为三个接力箭头,如图。

爱博体育app 5

3.user-select:用来支配内容的可选取性
 auto——私下认可值,用户可以选瓜时素中的内容
 none——用户不能选拔成分中的任何内容
 text——用户能够选取元素中的文本
 element——文本可选,但仅限成分的分界内(唯有IE和FF援助)
 须要注意的是:user-select并不是叁个W3C的CSS标准属性,浏览器扶助的不完全,需求对各样浏览器举办调整
 user-select说明:  设置或探寻是或不是允许用户选粤语本。
 (壹)IE六-9不帮忙该属性,但支撑选拔标签属性 onselectstart=”return false;”
来完毕 user-select:none 的法力;Safari和Chrome也帮衬该标签属性;
 (二)直到Opera12.五照样不援助该属性,但和IE六-玖一样,也支撑使用个人的标签属性
unselectable=”on” 来达成 user-select:none 的功用;
 (三)unselectable 的另3个值是
off;除Chrome和Safari外,在其它浏览器中,如果将文件设置为
-ms-user-select:none;,则用户将不或然在该文本块中初露选拔文本。
 然则,借使用户在页面包车型地铁别的区域初始选用文本,则用户仍是能够延续选用将文件设置为
-ms-user-select:none; 的区域文本.
 分析以下代码(注意:此代码及此代码的解析结果来自w三help):

<!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>  

在各浏览器中成效如下:

爱博体育app 6

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

 化解方案  给标签设置样式 -moz-user-select:none ;-webkit-user-select:none
同时标签设置 unselectable= “on” ,保障各浏览器都得以禁止内容选中。
 如案例中给悬浮差弹出窗的题目栏设置禁止选中样式,能够那样设置:

<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;          /* 以上两个属性目前并未支持,写在这里为了减少风险 */ 
}

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

以上正是本文的全体内容,希望对咱们的就学抱有帮忙,也愿意我们多多支持脚本之家。

你恐怕感兴趣的文章:

相关文章