一些经典,使用网页来设计整个窗口

作者: 网页游戏资讯  发布:2019-05-21

如何通过拖拽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;
    ...
}

一些经典,使用网页来设计整个窗口。这样,您就可以灵活的控制可拖动来改变窗体位置的区域了。

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

2 属性

type  {string}:定义了<li> 标签前面的符号样式。

ul:type 有:circle 空心圆,disc 实心圆,square 实心正方形, none :前面无符号;
ol:type 有:1 :表示有序的1,2,3; a :表示有序的a,b,c;i :罗马数字i,ii,iii;虽然还可以定义为:circle、disc、square、none但现实都为1,2,3等序列;

图片 1

  • NanUI简介
  • 开始使用NanUI
  • 打包并使用内嵌式的HTML/CSS/JS资源
  • 一些经典,使用网页来设计整个窗口。使用网页来设计整个窗口
  • 如何实现C#一些经典,使用网页来设计整个窗口。与Javascript的相互通信
  • 如何处理NanUI中的下载过程 - DonwloadHandler的使用(待更新。。。)
  • 如何处理NanUI中的弹窗过程 - LifeSpanHandler的使用(待更新。。。)
  • 如何控制Javascript对话框 - JsDialogHandler的使用(待更新。。。)
  • 自定义资源处理程序 (待更新。。。)

 解决方案  给标签设置样式 -moz-user-select:none ;-webkit-user-select:none 同时标签设置 unselectable= "on" ,保证各浏览器都可以禁止内容选中。
 如案例中给悬浮差弹出窗的标题栏设置禁止选中样式,可以这样设置:

2 示例

图片 2

  

内置Javascript对象 - NanUI

NanUI除了实现了上述的专用html属性n-ui-command和三个专用事件外,在Javascript全局环境中还内置了一个专用对象NanUI,通过该对象您可以查询当前NanUI和CEF的版本号,通过hostWindow中的方法来获取当前窗体的状态值,执行最大化、最小化和关闭操作。

图片 3

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

6. <fieldset>标签

类似于winform中的groupBox控件。

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

    });

});

上述代码的具体效果,可以自行对示例程序进行调试来查看效果。

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

8.CSS display属性  

如何通过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还内置了一些专用的事件。通过监听这些事件来实现一些特殊的功能,例如上面所说的最大化窗体时改变系统按钮的图标,又或者是窗体市区焦点时改变标题栏的颜色等。

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

1.item子项

<legend></legend>:表示抬头的名称。

<h3>fieldset标签</h3>
<fieldset style='width:130px' >
    <legend>性别</legend>
    <input type="radio" name='sex' value='boy' />男
    <input type="radio" name='sex' value='girl' />女
</fieldset>

 

NanUI文档目录

您可能感兴趣的文章:

  • JavaScript简单实现弹出拖拽窗口(一)
  • JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
  • javascript实现漂亮的拖动层,窗口拖拽特效
  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)
  • 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性
  • javascript支持firefox,ie7页面布局拖拽效果代码
  • 关于js拖拽上传 [一个拖拽上传修改头像的流程]
  • js实现小窗口拖拽效果

2 示例

图片 4

图片 5;)

<h3>select标签</h3>
<select id="province" multiple=multiple size="6" >
    <optgroup label="直辖市"  ></optgroup>
    <option value="bj" title="北京市" >北京</option>
    <option value="sh">上海</option>
    <optgroup label="省市" ></optgroup>
    <option value="zj">浙江</option>
    <option value="fj">福建</option>
</select>

图片 6;)

 

社群和帮助

GitHub

交流群QQ群
521854872

赞助作者

如果你喜欢我的工作,并且希望NanUI持续的发展,请对NanUI项目进行捐助以此来鼓励和支持我继续NanUI的开发工作。你可以使用微信或者支付宝来扫描下面的二维码进行捐助。

图片 7

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

2 示例

图片 8

 

 

使用网页来设计整个窗口

创建NanUI应用的方法本文不再阐述,具体方法请参看文章目录里的相关文章。本文将介绍NanUI的核心功能,用一张网页铺满整个窗体区域,并将讲述如何使用CSS和HTML来实现对窗体的拖动、最大化、最小化、关闭等操作。

图片 9

如图所示的界面,整个窗体的样式都是由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; 
 }

5. <label>标签

相当于一个展示文本框。

本文由bg游戏资讯发布于网页游戏资讯,转载请注明出处:一些经典,使用网页来设计整个窗口

关键词: .NET技术 C# WinForm NanUI HTML