JavaScript轻便达成弹出拖拽窗口,使用网页来规划总体窗口

NanUI文书档案目录

接上文JavaScript轻松完结弹出拖拽窗口(一)进展学习。 
下边初始具体深入分析代码部分:
 首先大家先确认下组织:
 悬浮窗口:始发不可知。富含标题栏和内容栏,标题栏内有标题和停业按键。
 遮罩层:发端不可知。用于安装弹出悬浮窗口时的半透明背景,
 按钮:用来点击弹出悬浮窗口。 

上边举行详尽表明
 1、要让窗口能自由运动,那么窗口的一定(position)应该利用相对定位(absolute);   

行使网页来统一策动总体窗口

始建NanUI应用的主意本文不再演说,具体方法请参谋小说目录里的连带小说。本文将介绍NanUI的着力职能,用一张网页铺满整个窗体区域,并将陈说怎么着行使CSS和HTML来落到实处对窗体的拖动、最大化、最小化、关闭等操作。

图片 1

如图所示的分界面,整个窗体的体制都以由HTML和CSS等前端本领来表现的。具体的HTML/CSS/JS代码本文不详细描述,因为那些和NanUI的关联相当小,依据实际项指标急需,您可感觉你的软件分界面设计出更棒的效果。

在示例分界面中,大家将注重介绍系统命令菜单部分的最小化、最大化和倒闭按键,以及分界面侧面象牙白的可用作拖动窗体的纵向标题栏的兑现。

用前端手艺来深入分析,左边纵向标题栏其本质是一条宽度固定,中度百分之百的DIV;命令区域内的最小化、最大化和停业开关其本质是多少个SPAN标签内嵌套了三个不等的FontAwsome的Logo。上面包车型地铁从头到尾的经过将介绍它们是怎样贯彻对承载窗体状态改变的。

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

如此,您就能够灵活的调整可拖动来改造窗体地点的区域了。

2.给窗口加多标题栏,同期将标题栏的鼠标光标设置为拖动(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轻便看出,通过点击具备这一专项使用属性的标签,即可落到实处窗体对应的最小化/最大化/关闭操作。

特意供给提出的,在演示窗体中式茶食击最大化按钮后得以看出,最大化开关的Logo从最大化改动成了还原的体裁,那是因而选拔Javascript监测窗体事件来贯彻的。

有如上面介绍的专用属性,NanUI还放置了一部分专项使用的风云。通过监听那几个事件来实现部分异样的效应,举例地方所说的最大化窗体时改换系统按键的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.
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个值
 3.有八个值,当中第贰个值是安装top-left;而第1个值是 top-right 和
bottom-left 并且他们会等于,第多个值是安装 bottom-right。
 4.有多少个值,在那之中第多个值是安装 top-left 而第叁个值是 top-right 第三个值
bottom-right 第多少个值是安装 bottom-left。
 帮忙的浏览器: 

内置Javascript对象 – NanUI

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

图片 2

图片 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的支付专门的职业。你能够利用微信或者支付宝来围观上面包车型客车二维码进行协理。

图片 4

cursor 属性规定所出示的指针(光标)的连串。
 属性值为move时,表示此光标所指的指标是可以运动的,经常为三个时有时无箭头,如图。

图片 5

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):

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

在各浏览器中效果如下:

图片 6

注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” 

 应用方案  给标签设置样式 -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

上述便是本文的全体内容,希望对大家的上学抱有帮助,也指望咱们多多援救脚本之家。

您大概感兴趣的文章:

相关文章