NanUI文档目录, 首先我们先认可下结构

NanUI文档目录

接上文JavaScript简单实现弹出拖拽窗口(一)进行学习。 
上面起首具体分析代码部分:
 首先我们先认同下结构:
 悬浮窗口:开首不可见。包括标题栏和内容栏,标题栏内有题目和关闭按钮。
 遮罩层:千帆竞发不可见。用于安装弹出悬浮窗口时的半透明背景,
 按钮:用于点击弹出悬浮窗口。 

下面举办详尽分解
 1、要让窗口能随随便便移动,那么窗口的固定(position)应该使用相对定位(absolute);   

动用网页来统筹总体窗口

创立NanUI应用的措施本文不再讲演,具体方法请参见作品目录里的有关著作。本文将介绍NanUI的要旨功效,用一张网页铺满整个窗体区域,并将讲述咋样选择CSS和HTML来实现对窗体的拖动、最大化、最小化、关闭等操作。

图片 1

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

在示例界面中,大家将主要介绍系统命令菜单部分的最小化、最大化和关闭按钮,以及界面左边肉色的可用作拖动窗体的纵向标题栏的兑现。

用前端技术来分析,右侧纵向标题栏其本质是一条宽度固定,低度100%的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;
    ...
}

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

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不难看出,通过点击具备这一专用属性的标签,就可知落实窗体对应的最小化/最大化/关闭操作。

专门需要指出的,在演示窗体中点击最大化按钮后方可看出,最大化按钮的图标从最大化变动成了还原的体裁,这是因此选用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}`);

    });

});

上述代码的切切实实效果,可以自行对示范程序举办调试来查看效果。

那里有多少个知识点需要了然:
 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。
 帮忙的浏览器: 

内置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

以上就是本文的全体内容,希望对我们的读书抱有帮助,也希望我们多多帮忙脚本之家。

你可能感兴趣的稿子:

相关文章