从零开始用htmlayout/sciter写漂亮ui界面之仿瑜伽管理界面

By admin at 16 天前 • 0人收藏 • 553人看过

如题:

参考之前别人发的瑜伽那个htmlayout的代码 , 一步一步从零开始手打出来, 看看一个完整的hL界面是怎么写出来的.

当然, 过程中不会完全和原来的代码一样, 中间如果有其他的想法或者简单方式, 我都会去试一下, 力争最简化实现同样界面.


示例的工程源码如下: (只要下面帖子里更新了,就会更新这个分享的zip文件)

链接:https://pan.baidu.com/s/1BgQWbAmLsOqQlSA4YMLSIA 

提取码:f9zl 



  1. 新建mainform界面

  2. 导入htmlayout库

  3. 工程中添加html目录和img子目录

  4. 打开工程文件夹, 在html目录里新建main.html和main.css两个文件

  5. 同步html目录

mainform.aardio代码如下

import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程7";right=959;bottom=591)
mainForm.add()
/*}}*/

import web.layout;
import web.layout.behavior.windowCommand;

var wb = web.layout(mainForm);
wb.go("\html\main.html");

mainForm.show();
return win.loopMessage();

 image.png

双击main.html用editplus打开, 输入基本的代码如下

<html>
	<body>
	hello aar
	</body>
</html>

此时, 运行工程, 可以看到界面输出

image.png

说明基本框架创建完成.

27 个回复 | 最后更新于 2 小时前
16 天前   #1

由于用htmlayout来做界面, 那么需要把窗体设置为无边框

image.png

设置完成后, 界面不能再被调整大小了, 那么在mainform.aardio中需要加入

import win.ui.resizeBorder;
win.ui.resizeBorder(mainForm);

以便以后可以拖动调整界面大小.

image.png

那么, 如果下面修改了html代码, 每次去启动下工程也是个麻烦事, 而且不利于实时的看到修改后效果

我这里在界面里添加个定时器, 定时去刷新界面, 这样就可以模拟实时效果了

mainForm.setInterval(
	1000,function(){
		wb.go("\html\main.html");
	}
);

GIF.gif

16 天前   #2

下面正式开始:

首先把html和css文件关联起来, html里用link语句

<html>
	<link href="main.css" rel="stylesheet" type="text/css"/>
	<body>
	hello aardio123456
	</body>
</html>

如果记不住那么长的link语句, 那么还有另外一种方式

<style>
      @import "main.css";		
</style>

同样能引用到main.css样式到文件中


同时, 把准备好的一些图片放入到img目录里

image.png

我们在css里设置body节点的属性

  1. 设置整个body铺满界面, 外边距为0

  2. 设置body的背景图片为预设好的skin.png

body{
	margin:0px;
	background-image:url(img/skin.png);
}

image.png

我们看到这个图片比界面小, 所以它连续平铺来铺满了整个界面, 但是一般界面上面不会这么做, 一般都是用九宫格拼图

那么需要增加 背景模式为九宫格

	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position:0 0 0 0;

image.png

可以看到此时一张图铺满了界面, 但是貌似整个图片是被拉伸的, 像素改变导致模糊了,这时候需要改变position属性里面的值, 来保证图片中的树芽部分是清晰的

改为(上右下左)

background-position:280 2 2 680;

大概是这样切的

image.png

image.png

这里就需要去理解了九宫格再去看这张图片, 我们拉伸了left , middle , right的九宫格部分, 而四个角我们是不变的, 无论你怎么去调整界面大小, 四个顶点格图片不变.如下动态演示

GIF2.gif

16 天前   #3

原来界面中有个边框图片, 那么我们也弄到界面上去, 我这里不用它原来的方法, 我加入属性到body里去

body{
	margin:0px;
	background-image:url(img/skin.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position:280 2 2 680;
	foreground-image:url(img/border.png);
}

image.png

界面变成了这副样子... , 就和背景图片一样, 设置为九宫格模式

body{
	margin:0px;
	background-image:url(img/skin.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position:280 2 2 680;
	foreground-image:url(img/border.png);
	foreground-repeat:expand stretch-left stretch-middle  stretch-right;
	foreground-position:5 5 5 5;
}

此时可以看到界面有边框了

image.png

16 天前   #4

增加界面头部拖动功能

首先, 在html中添加

	<div #header>
		
	</div>

以上,增加了id为header的节点, 在css中设置这个节点的属性

#header{
	background-color:red;
	width:100px;
	height:30px;
}

以上增加这个节点的背景色为红色, 这样更利于观察, 并设置高度和宽度, 没有高和宽这个节点是显示不出来的.

image.png

现在设置它的宽度100%

width:100%;

image.png

红色充满了界面, 而且调整界面大小也不影响

设置这个节点的behavior行为为windowCommand窗体消息

#header{
	background-color:red;
	width:100%;
	height:30px;
	behavior:windowCommand;
}

在html中定义这个节点的功能

<html>
	<link href="main.css" rel="stylesheet" type="text/css"/>
	<body>
		<div #header command="window-caption">
			
		</div>
	</body>
</html>

window-caption是aardio内置的htmlayout消息封装, 直接用即可

此时可以看到界面可以被拖动了

image.png


16 天前   #5

下面在顶部增加窗体的最小化和关闭按钮

html中增加这三个功能的div

<html>
	<link href="main.css" rel="stylesheet" type="text/css"/>
	<body>
		<div #header command="window-caption">
			<div #skin />
			<div #btn-min />
			<div #btn-close />
		</div>
	</body>
</html>

主要是在css里定义他们的分布和属性

#skin{
	background-image:url(img/btn_Skin_normal.png);
	width:28px;
	height:20px;
}

image.png

看到上面的小衣服了, 再接再厉, 继续添加

#skin{
	background-image:url(img/btn_Skin_normal.png);
	width:28px;
	height:20px;
}
#btn-min{
	background-image:url(img/btn_mini_normal.png);
	width:28px;
	height:19px;
}
#btn-close{
	background-image:url(img/btn_close_normal.png);
	width:39px;
	height:19px;
}

image.png

成这样了..... , 看了css的文章知道, div是block(块) , 会独占一行, 所以紧接着的都会自动往下走, 那么就需要设置flow属性了,在它们的父节点header里添加横向浮动

#header{
	//background-color:red;
	width:100%;
	height:30px;
	flow:horizontal;
	behavior:windowCommand;
}

image.png

横过来了, 但是都挤在左边, 怎么弄到右边去?

很遗憾, htmlayout没有这样的flow属性, 那么怎么实现这样的功能?

可以反其道而行之, 我们假设有四个按键, 第一个按键占比较大的宽度, 这样就把其他的按钮给挤到右边去了.

验证一下:

html中增加一个空白按钮space

<html>
	<link href="main.css" rel="stylesheet" type="text/css"/>
	<body>
		<div #header command="window-caption">
			<div #space />
			<div #skin />
			<div #btn-min />
			<div #btn-close />
		</div>
	</body>
</html>

在css中定义它无限宽(占去其他按钮剩下来的所有空间), 这里要用到 %% 功能

#space{
	width:100%%;
	height:20px;
}

image.png

挤过去了, 放大缩小界面也不会有影响


16 天前   #6

给按钮增加鼠标的各种状态:

#skin{
	background-image:url(img/btn_Skin_normal.png);
	width:28px;
	height:20px;
	margin:-1px;
}
#skin:hover{
	background-image:url(img/btn_Skin_highlight.png);
}
#skin:active{
	background-image:url(img/btn_Skin_down.png);
}

上面为什么margin:-1, 这个图片比其他的大了一个像素,减去之后高度才刚刚好.

image.png

依葫芦画瓢, 增加其他几个按钮的状态

GIF.gif

			<div #btn-min command="window-min"/>
			<div #btn-close command="window-close"/>

由于在它们的父节点中已经增加了behavior:windowCommand; 所以, 它们css中就没必要再去写了,直接再html中写入功能即可.

16 天前   #7

皮肤更改功能界面:

参考主界面的html和css,稍作修改即可.如下:

<html>
	<link href="skin.css" rel="stylesheet" type="text/css"/>
	<body>
		<div #header command="window-caption">
			<div #space>更改外观</div>
			<div #btn-close command="window-close"/>
		</div>
	</body>
</html>
body{
	margin:0px;
	background-image:url(img/001/skin.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position:280 2 2 680;
	foreground-image:url(img/border.png);
	foreground-repeat:expand stretch-left stretch-middle  stretch-right;
	foreground-position:5 5 5 5;
}
#header{
	//background-color:red;
	width:100%;
	height:70px;
	flow:horizontal;
	behavior:windowCommand;
}
#space{
	width:100%%;
	height:20px;
	font-weight:bold;
	font-size:14px;
	color:white;
	padding:5 0 0 8;
}
#btn-close{
	background-image:url(img/btn_close_normal.png);
	width:39px;
	height:19px;
}
#btn-close:hover{
	background-image:url(img/btn_close_highlight.png);
}
#btn-close:active{
	background-image:url(img/btn_close_down.png);
}

image.png

增加一个蒙版main:

<html>
	<link href="skin.css" rel="stylesheet" type="text/css"/>
	<body>
		<div #header command="window-caption">
			<div #space>更改外观</div>
			<div #btn-close command="window-close"/>
		</div>
		<div #main>
			
		</div>
	</body>
</html>

修改这个蒙版的css属性

#main{
	background-color:rgba(255,255,255,0.6);
	margin:0 -5 -5 -5;
	padding:0 5 5 5;
	width:100%%;
	height:100%%;
}

image.png

16 天前   #8

在main节点中增加两个区域, 一个用来显示皮肤框,, 一个用来作为底部按键

先来设置下皮肤显示区

我们增加mainarea节点和main-bottom节点

<html>
	<link href="skin.css" rel="stylesheet" type="text/css"/>
	<body>
		<div #header command="window-caption">
			<div #space>更改外观</div>
			<div #btn-close command="window-close"/>
		</div>
		<div #main>
			<div #mainarea>

			</div>
			<div #main-bottom>

			</div>
		</div>
	</body>
</html>

定义一下css样式

#mainarea{
	background-color:rgba(0,66,33,0.3);//随便写的,便于观察
	margin:0 1 1 1;
	width:100%%;
	height:100%%;
}
#main-bottom{
	background-color:rgba(88,88,88,0.3);//随便写的,便于观察
	margin:0 5 0 5;
	width:100%%;
	height:35;
}

预设底部是35高的一个底部框, 上面剩下的都是显示区域, 效果如下:

image.png

16 天前   #9

下面在mainarea那块区域内添加皮肤列表.

			<div #mainarea>
				<div #skin-area>

				</div>
			</div>

并设置css为

#skin-area{
	background-color:white;
	margin:7;
	padding:1 1 1 1;
	width:100%%;
	height:100%%;
}

image.png

下面就是往皮肤区放入内容了

在html的skin-area区域添加内容

	<div #skin-area>
		<img src="img\001\preview.png"/>
	</div>

image.png

再接再厉, 继续添加看看

<div #skin-area>
	<img src="img\001\preview.png"/>

	<img src="img\002\preview.png"/>

	<img src="img\003\preview.png"/>

	<img src="img\004\preview.png"/>

	<img src="img\005\preview.png"/>

	<img src="img\006\preview.png"/>

	<img src="img\007\preview.png"/>

	<img src="img\008\preview.png"/>

	<img src="img\009\preview.png"/>

	<img src="img\010\preview.png"/>
</div>

image.png

变成了这副样子,滚动条也好丑, 为了让滚动条显示只显示在skin-area区域, 而不是整个窗口,那么需要在skin-area的父节点mainarea设置内容超出边界则隐藏滚动条

#mainarea{
	background-color:rgba(0,66,33,0.3);
	margin:0 1 1 1;
	width:100%%;
	height:100%%;
	overflow:hidden;
}

image.png

滚动条消失了, 可是,图片列表显示也很奇怪, 我们需要它横向显示, 并且在超出边界的时候换行并能显示滚动条,htmlayout的flow属性里面刚好有这个模式,

image.png

#skin-area{
	background-color:white;
	margin:7;
	padding:1 1 1 1;
	width:100%%;
	height:100%%;
	flow:h-flow;
	overflow-y:auto;
}

测试了overflow的其他几个属性, 发现hidden-scroll和scroll-indicator都没效果,

(经测试换成sciter是支持的,估计htmlayout还不支持)

 目前先用auto吧, 就是丑了点

image.png

16 天前   #10

为了让滚动条好看一点,细一点, 那么我们可以自定义垂直滚动条, 参考htmlayout的手册示例,

我们在css中添加如下代码:

@set small-v-scrollbar
{
	.slider 
	{ 
	background-color: rgba(114,150,60,0.7);
	}
	.base { width: 3px; } /* explicit declaration of scrollbar width */
}
* { vertical-scrollbar: small-v-scrollbar; } /* all scrollable elements will have our small scrollbar now */

上面就是自定义的简短的代码, 更详细的介绍还是参考官方的文档,

image.png


15 天前   #11

上面图片间隔好大, 感觉不自然, 好丑, 经过测试, 在css中直接定义

img
{
	width:120px;
	height:120px;
	padding:1;
}

并不能达到效果, 

这时候参考这个程序之前的代码, 需要用div再次嵌套下. 我们把每个img都放入到div中去, 然后去操作div

<div #skin-area>
	<div .listimg>
		<img src="img\001\preview.png"/>
	</div>
	<div .listimg>
		<img src="img\002\preview.png"/>
	</div>
	<div .listimg>
		<img src="img\003\preview.png"/>
	</div>
	<div .listimg>	
		<img src="img\004\preview.png"/>
	</div>
	<div .listimg>
		<img src="img\005\preview.png"/>
	</div>
	<div .listimg>
		<img src="img\006\preview.png"/>
	</div>
	<div .listimg>
		<img src="img\007\preview.png"/>
	</div>
	<div .listimg>
		<img src="img\008\preview.png"/>
	</div>
	<div .listimg>
		<img src="img\009\preview.png"/>
	</div>
	<div .listimg>
		<img src="img\010\preview.png"/>
	</div>
</div>

看到上面的 .listimg 了吗? 这里要用圆点 . , 圆点的意思是这个属性可以被重复使用, 就是名字可以重复, 相同名字的节点属性一致, 而我们上面一直用的是# , #表示的是此名字是唯一的, 不能重复使用.

ok , 去css里面设置下属性

#skin-area{
	background-color:white;
	margin:7;
	padding:1 1 1 0;
	width:100%%;
	height:100%%;
	flow:h-flow;
	overflow-y:auto;
}
.listimg{
	width:120px;
	height:120px;
	padding:0 0 1 1;
}
img
{
	max-width:120px; 
	max-height:120px;
}

以上, 设置内边距的 底部和左边为1 ,其他是0, 因为我们的div是靠左靠上对齐的. 所以间距就刚刚好都是1了, 看起来整齐多了.

image.png

15 天前   #12

点击图片实现切换背景

为了能够动态切换背景图片, 需要把每个图片的div设置一个自定义的属性用来区分点击的是哪个图片.

html中修改, 增加了自定义的属性Lname,区分不同的节点

<div #skin-area>
	<div .listimg Lname="001">
		<img src="img\001\preview.png"/>
	</div>
	<div .listimg Lname="002">
		<img src="img\002\preview.png"/>
	</div>
	<div .listimg Lname="003">
		<img src="img\003\preview.png"/>
	</div>
	<div .listimg Lname="004">	
		<img src="img\004\preview.png"/>
	</div>
	<div .listimg Lname="005">
		<img src="img\005\preview.png"/>
	</div>
	<div .listimg Lname="006">
		<img src="img\006\preview.png"/>
	</div>
	<div .listimg Lname="007">
		<img src="img\007\preview.png"/>
	</div>
	<div .listimg Lname="008">
		<img src="img\008\preview.png"/>
	</div>
	<div .listimg Lname="009">
		<img src="img\009\preview.png"/>
	</div>
	<div .listimg Lname="010">
		<img src="img\010\preview.png"/>
	</div>
</div>

此时,我实验了用csss!里动态切换背景, 但是没有成功

.listimg{
	width:120px;
	height:120px;
	padding:0 0 1 1;
	active-on!: $1(div.listimg:checked):checked = false , 
		$1(body)::background-image = url("img/" + self.Lname + "/skin.png)",
	            self:checked = true;
}
.listimg:checked{
	outline:2px dotted blue -1px;
}

image.png

貌似url()把里面的东西都看作是一个字符串, 没有变量这个概念 .......

当我把url内地址直接改成静态的img/002/skin.png , 就可以点击就切换,

目前不知道这种方式怎么去解决.....


于是 ,我改用另外一种方式, 定义一个behavior, 在aardio里对html进行修改

skin.aardio代码如下: 添加个名字为myselect的自定义行为

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=541;bottom=392;border="none")
winform.add()
/*}}*/

import web.layout;
import web.layout.behavior.windowCommand;
var wb = web.layout(winform,0xFFFF/*_HL_HANDLE_ALL*/);

namespace web.layout.behavior.myselect {
	onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {
		var cmd = ltTarget.Lname or ltOwner.Lname;
		var wbLayout = ltOwner.getLayout();
                var ltEleBody = wbLayout.querySelector("body");
		ltEleBody.style["background-image"]="url(img\"++cmd++"\skin.png)";
     }  
}

wb.go("\html\skin.html")

winform.show();
win.loopMessage();
return winform;

并且在css中引用这个行为

.listimg{
	width:120px;
	height:120px;
	padding:0 0 1 1;
	behavior:myselect;
	active-on!: $1(div.listimg:checked):checked = false , 
	            self:checked = true;
}

曲线救国也实现了切换背景功能....

GIF.gif

15 天前   #13

底部增加两个按键

html中增加

			<div #main-bottom>
				<div .btn >确 认</div>
				<div .btn >退 出</div>
			</div>

css中增加横向浮动和垂直居中

#main-bottom{
	//background-color:rgba(88,88,88,0.3);
	margin:0 5 0 5;
	width:100%%;
	height:35;
	flow:horizontal;
	vertical-align:middle;
}

再定义按钮的皮肤

.btn{

	width:69px;
	height:22px;
	background-image:url(img/login_btn.png);
	background-repeat:no-repeat;
	text-align:center;
	vertical-align:middle;
}
.btn:hover{
	background-position: 0 0 0 -69;
}
.btn:active{
	background-position: 0 0 0 -138;
}

文本居中和垂直居中, 要不然会偏 , hover和active那里负号代表图片往前挪

image.png

这两个按钮太近了, 而且再左侧, 那么放右侧, 并拉开间距;

正如之前说的, 增加个空白div把它们挤到右边去

			<div #main-bottom>
				<div #space/>
				<div .btn >确 认</div>
				<div .btn >退 出</div>
			</div>

css中.btn属性里增加外边距, 左侧设置为10px ,这样

.btn{

	width:69px;
	height:22px;
	background-image:url(img/login_btn.png);
	background-repeat:no-repeat;
	text-align:center;
	vertical-align:middle;
	margin:0 0 0 10;
}

image.png

再增加个关闭功能, .btn中添加行为

.btn{
	behavior:windowCommand;

html里增加close功能

<div .btn command="window-close">确 认</div>
<div .btn command="window-close">退 出</div>

搞定.

15 天前   #14

我们回到主界面中, 把刚刚的换肤界面绑定到主界面的皮肤按钮上

首先, 再mainform.aardio中增加一个自定义行为myshowskin

namespace web.layout.behavior.myShowSkin {
	onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {	
		var frmChild = ..mainForm.loadForm("\dlg\skin.aardio");
		frmChild.show();
     }  
}

意思是只要执行了这个行为, 那么就打开skin窗体.

我们还要绑定这个行为到css中, 要不然它自己也不知道在哪执行啊

#skin{
	background-image:url(img/btn_Skin_normal.png);
	width:28px;
	height:20px;
	margin:-1px;
	behavior:myShowSkin;
}

image.png

那么如果想要在skin界面点击换肤后, 主界面也换过来呢?

用publish来操作

在主界面中

subscribe("改变皮肤",function(flag){
    var ltEleBody = wb.querySelector("body");
	ltEleBody.style["background-image"]="url(img\"++flag++"\skin.png)";
} )

在skin界面publish

namespace web.layout.behavior.myselect {
	onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {
		var cmd = ltTarget.Lname or ltOwner.Lname;
		var wbLayout = ltOwner.getLayout();
        var ltEleBody = wbLayout.querySelector("body");
		ltEleBody.style["background-image"]="url(img\"++cmd++"\skin.png)";
		..publish("改变皮肤",cmd) 
     }  
}

GIF.gif

15 天前   #15

主界面, tab导航栏:

html中增加工具栏和一些项目

		<div #tabBar>
			<div .tab>首页</div>
			<div .tab>上课</div>
			<div .tab>管理</div>
			<div .tab>记录</div>
		</div>
#tabBar{
	width:100%%;
	height:32px;
	background-color:red;
	margin:50 0 0 0;
	flow:horizontal;
}

横向浮动, 上面预留50像素空间, 为了便于观察设置背景色红色

image.png

下面去定义tab的css属性

  1. 设置背景图片

  2. 设置div高度, 没高度看不出效果

  3. 九宫格拉伸左中右

  4. 微调下拉伸位置

.tab{
	background-image:url(img\main_tabbtn_normal.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position: 1px 25px 1px 10px;
	height:32px;
	margin:0 -7 0 0;
}

image.png

可以看出个大概效果了,

可以看到宽度太大了, 根据csss!的介绍, 可以用calc来计算适应宽度

.tab{
	background-image:url(img\main_tabbtn_normal.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position: 1px 25px 1px 10px;
	height:32px;
	margin:0 -7 0 0;
	vertical-align:middle;
	padding:0 5 0 10;
	width: calc( max-intrinsic-width() + 25px );
}

image.png

增加交互效果

.tab:hover{
	background-image:url(img\main_tab_highlight.png);
}
.tab:checked{
	background-image:url(img\main_tab_check.png);
	font-weight:bold;
}


15 天前   #16

参考之前的csss!时间写法, 把checked状态写好

.tab{
	background-image:url(img\main_tabbtn_normal.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position: 1px 25px 1px 10px;
	height:32px;
	margin:0 -7 0 0;
	vertical-align:middle;
	padding:0 5 0 10;
	width: calc( max-intrinsic-width() + 25px );
	active-on!: parent = self.parent(),
            parent.$1(.tab:checked):checked = false ,
		    self:checked = true;
}

单击后, 该项即被checked

添加图片到tab中, 并增加默认选中项 checked

		<div #tabBar>
			<div .tab checked><img src="img\home.png" />首页</div>
			<div .tab><img src="img\jilu.png" />上课记录</div>
			<div .tab><img src="img\manage.png" />管理人员</div>
			<div .tab><img src="img\xinde.png" />信息记录</div>
		</div>

然后设置img属性

.tab{
	background-image:url(img\main_tabbtn_normal.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position: 1px 25px 1px 10px;
	height:32px;
	margin:0 -7 0 0;
	vertical-align:middle;
	padding:0 5 0 15;
	width: calc( max-intrinsic-width() + 25px );
	active-on!: parent = self.parent(),
            parent.$1(.tab:checked):checked = false ,
		    self:checked = true;
	assigned!:  parent = self.parent() ,
	            check_tab = parent.$1(.tab[checked]),
	            check_tab:checked = true ;
}
.tab:hover{
	background-image:url(img\main_tab_highlight.png);
}
.tab:checked{
	background-image:url(img\main_tab_check.png);
	font-weight:bold;
}
.tab img
{
	width:20px;
	height:20px;
	vertical-align:middle;
	margin:0 5 0 0;
}

我把图片和文字间距放宽了一些, 看着舒服点

上面

assigned!:

是在html加载完成后执行的操作, 这里用来查找checked项目,选中它

image.png

15 天前   #17

html中增加tab页:

		<div #tabArea>
			<div .page>首页----页面演示</div>
			<div .page>上课记录----页面演示</div>
			<div .page>管理人员----页面演示</div>
			<div .page>信息记录----页面演示</div>
		</div>

主要是对css的设置:

#tabArea{
	height:100%%;
	width:100%%;
	background-image:url(img\for_back.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
        background-position: 80 12 50 12;
	padding:0 3 0 0;
	margin:0 10 10 10;
	overflow:hidden;
}
.page{
	height:100%%;
	width:100%%;
	display:none;
	overflow:none;
}
.page[open=true]
{
	display:block;
}

.page[open=false]
{
	display:none;
}

这里注意: 页面中定义了自定义属性open ,其实他可以是任何名字, 主要是你需要在csss!事件里对应修改下名字而已,

在选项卡事件里,定义互动操作

.tab{
	background-image:url(img\main_tabbtn_normal.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position: 1px 25px 1px 10px;
	height:32px;
	margin:0 -7 0 0;
	vertical-align:middle;
	padding:0 5 0 15;
	width: calc( max-intrinsic-width() + 25px );
	active-on!: parent = self.parent(),
            parent.$1(.tab:checked):checked = false ,
		    self:checked = true,
			main_el = $1(div#tabArea) ,
		    open_page = main_el.$1(div.page[open=true]) , 
		    open_page.open = false , 
		    open_page = main_el.child(self:index) ,
		    open_page.open = true ;
	assigned!:  parent = self.parent() ,
	            check_tab = parent.$1(.tab[checked]),
	            check_tab:checked = true ,
				page_area = $1(div#tabArea) ,
				page_area.child(check_tab:index).open = true ;
}

上面基本上就是tab这种控件的使用方式了, 记住即可.

GIF2.gif


15 天前   #18

tabs的页面其实可以和aardio的tabs一样, 直接引用其他页面.

要用到include功能, 例如下面我第二个选项卡里引用two.html这个页面

		<div #tabArea>
			<div .page>首页----页面演示</div>
			<div .page><include src="two.html" > Miss lesson.htm</include></div>
			<div .page>管理人员----页面演示</div>
			<div .page>信息记录----页面演示</div>
		</div>

two.html页面里我写下面的演示代码

      <select name="country" size=1>
        <OPTION VALUE=1 >Afghanistan</OPTION>
        <OPTION VALUE=2 >Albania</OPTION>
        <OPTION VALUE=3 >Algeria</OPTION>
        <OPTION VALUE=4 >American Samoa</OPTION>
      </select>

可以看到

image.png


14 天前   #19

给pageArea内容区增加个列表:

新建个lesson.html和lesson.css文件

并添加一个pageBar工具条

<style type="text/css">
	@import "lesson.css";
</style>

<div #pageBar>

</div>

定义下pageBar的css样式

#pageBar{
	background-color:rgba(0,0,0,0.2);//随便写的,为了更好的观察
	width:100%;
	height:38px;
	flow:horizontal;
	vertical-align:middle;
}

image.png

添加点项目进去

<div #pageBar>
	<div #pagehome .btn-bar>信息汇总</div>
	<div #pagedir></div>
	<div #pageadd .btn-bar>添加上课信息</div>
	<div #space></div>
	<div #pagefind .btn-bar>搜索</div>
	<div #pagetoday .btn-bar>今日</div>
	<div #pageweek .btn-bar>本周</div>
	<div #pagemonth .btn-bar>本月</div>
	<div #pageall .btn-bar>全部</div>
</div>

首先定义下.btn-bar的css样式, 在专门定义下pagedir的样式

#pagedir{
	background-image:url(img\nextbtn_normal.png);
	background-repeat:no-repeat;
	width:16px;
	height:14px;
}
.btn-bar{
	height:22px;
	width: max-intrinsic;
	vertical-align:middle;
	padding:0 2 0 2;
	margin:0 5 0 0;
}

image.png

给这些项目添加图片

<div #pageBar>
	<div #pagehome .btn-bar><img src="img\message_localmes.png" />信息汇总</div>
	<div #pagedir></div>
	<div #pageadd .btn-bar><img src="img\add.png" />添加上课信息</div>
	<div #space></div>
	<div #pagefind .btn-bar><img src="img\search_16.png" />搜索</div>
	<div #pagetoday .btn-bar><img src="img\calendar.png" />今日</div>
	<div #pageweek .btn-bar><img src="img\week.png" />本周</div>
	<div #pagemonth .btn-bar><img src="img\month.png" />本月</div>
	<div #pageall .btn-bar><img src="img\refresh.png" />全部</div>
</div>

image.png

图片大小高低不一, 那么我们去定义下img属性

.btn-bar img{
	vertical-align: middle;
	margin:0 2 0 0;
}

定义一下按钮效果:

.btn-bar:hover{
	background-image:url(img\allbtn_highlight.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position:5 5 5 5;
}
.btn-bar:active{
	background-image:url(img\allbtn_down.png);
	background-repeat:expand stretch-left stretch-middle  stretch-right;
	background-position:5 5 5 5;
}

image.png

效果已经出来了.

14 天前   #20

下面继续添加内容:

注意: 为了以后更好的维护, 每次分行的时候, 最好用div给套一层, 也便于样式管理

添加一个表格

<div #pageTable>
	<table #tab-style>
		<tr>
			<td>序号</td>
			<td width=150>Yoga馆</td>
			<td width=120>时间段</td>
			<td width=100>日期</td>
			<td width=60>会员数</td>
			<td width=80>性质</td>
			<td width=50>酬金</td>
			<td width=80>支付状态</td>
			<td>备注</td>
		</tr>
	</table>
</div>
#pageTable{
	width:100%%;
	height:100%%;
	background-color:rgba(255,0,55,0.2);//临时的
	overflow:none;
	padding: 1 10 5 7;
	margin:0 0 5 0;
}

image.png

下面定义表格样式#tab-style

#tab-style{
      width:100%%;
      height:100%%;
      border:1 solid rgba(162,208,224,0.5);
      border-radius:4;
      background-image: url(img\tab_bk.png) ;
      background-position: 5 5 5 5;
      background-repeat:expand stretch-left  stretch-middle stretch-right;
}

设置了表格充满空间, 边框宽度1,颜色,圆角4, 表格的背景图片

image.png

嗯??!!  表格怎么跑到中间去了.......

于是, 增加一条

overflow:auto;

表头又回去了, 还好.

下面继续, 定义表格的边框, 这里定义每列

#tab-style > tr > td 
{ 
      padding:2 3 2 3;
      height:20px;
      border:1 solid rgba(162,208,224,0.5);
      color:#000; 
}

image.png

看到表格之间竟然有白条...... , 于是在tab-style属性里添加

border-spacing:0;

image.png

白条消失了, 但是表格之间看着很不自然啊,像素和底部那个都不一样, 底部线条明显清晰且细,判断是两个边框重叠导致的, 这样去掉顶部的边框和右侧的边框,应该就可以了.

那么, 第一行所有的列的顶部都不要

#tab-style > tr:first-child > td 
{ 
	border-top:none;  
}

image.png

顶部的粗线消失了, 再接再厉, 第一行所有的列的右侧也不要, 额..... , 不对, 这样处理之后还需要对以后的数据列执行同样的操作,  那么不如这样写: 所有的数据列的右边都不要

#tab-style > tr > td 
{ 
	border-right:none;  
}

image.png

清爽了, 但是第一行的最左边边框和外框重合加粗还在....那么,执行两个第一?

不对, 以后的数据只要是第一列的其实也是不能有左边框的吧?

那么,就删掉所有第一列的左边框

#tab-style > tr > td:first-child
{ 
	border-left:none;  
}

image.png

完美了.

14 天前   #21

试着增加一下模拟数据, 看看效果如何

<div #pageTable>
	<table #tab-style>
		<tr>
			<td>序号</td>
			<td width=150>Yoga馆</td>
			<td width=120>时间段</td>
			<td width=100>日期</td>
			<td width=60>会员数</td>
			<td width=80>性质</td>
			<td width=50>酬金</td>
			<td width=80>支付状态</td>
			<td>备注</td>
		</tr>
		<tr>
			<td>1</td>
			<td width=150>上海闸北</td>
			<td width=120>20:04</td>
			<td width=100>2020.04</td>
			<td width=60>54</td>
			<td width=80>vip</td>
			<td width=50>20000</td>
			<td width=80>已支付</td>
			<td>人很好,爱笑!</td>
		</tr>
		<tr>
			<td>2</td>
			<td width=150>上海松江</td>
			<td width=120>5:37</td>
			<td width=100>2015.07</td>
			<td width=60>22</td>
			<td width=80>vip</td>
			<td width=50>46700</td>
			<td width=80>已支付</td>
			<td>哈哈哈哈哈哈!</td>
		</tr>
		<tr>
			<td>3</td>
			<td width=150>上海浦东</td>
			<td width=120>14:57</td>
			<td width=100>2021.09</td>
			<td width=60>165</td>
			<td width=80>普通会员</td>
			<td width=50>7800</td>
			<td width=80>已支付</td>
			<td>试试,体验...</td>
		</tr>
	</table>
</div>

image.png

顶部有重合!!

删掉它

把之前的

#tab-style > tr:first-child > td

改为

#tab-style > tr > td 
{ 
	border-top:none;  
}

完美.

额,,,第一列要居中怎么办, 加个文本center

#tab-style > tr > td:first-child
{ 
	border-left:none;  
	text-align:center;
}

其他的, 需要的话就自己考虑吧

image.png

提示下: 还能设置文本的颜色的哦, 可以利用csss! 来做

一般情况, 不希望表头随着内容移动, 那么可以固定死,table里添加

<div #pageTable>
	<table #tab-style fixedrows=1 rowcheck>
		<tr>


13 天前   #22

table中加入动态鼠标交互:

首先, 加入鼠标hover单元行变色

#tab-style > tr:hover
{
	background-color:rgba(0,88,55,0.2);
	//color:red;
}

再加入,鼠标点击选中单行, 注意排除掉 表头

#tab-style > tr:not(:first-child)
{ 
	active-on!: $1(#tab-style > tr:checked):checked = false , 
	self:checked = true;
}

这里简单说下上面的写法 , active-on!: 意思是鼠标单击的时候触发

$1(#tab-style > tr:checked)

仔细看 , 是不是和它自己的属性一致, 这个其实就是css属性选择器, 

意思是我要操作#tab-style节点下面的tr节点 , 只操作状态是checked的属性, 让它=false

ok.

上一个楼层已经定义过被选中(checked)后的颜色变化状态, 所以可以看到变化了.

GIF.gif

可以从动态图上看到, 表头也被我鼠标hover的时候改变颜色了, 这个明显是不对的, 所以, 修改下鼠标经过的css hover属性:

#tab-style > tr:not(:first-child):hover
{
	background-color:rgba(0,88,55,0.2);
	//color:red;
}

不要被它那么长的属性给吓到了, 其实就是一个个属性加了::::::连接起来而已

13 天前   #23

表格中增加右键菜单:

首先在html中定义右键菜单列表, 并设置它的名字为tableMenu

<menu.context #tableMenu>
	<li id="i1">编 辑</li>
	<li id="i2">删 除</li>
	<li id="i3">插 入</li>
	<li id="i4">新 增</li>
</menu>

之后在css属性里, 在 tr 行属性里引用这个tableMenu菜单

#tab-style > tr:not(:first-child)
{ 
        //增加下句即增加右键菜单
	context-menu:selector(menu#tableMenu);
	//单击功能
	active-on!: $1(#tab-style > tr:checked):checked = false , 
	self:checked = true;
}

这里需要注意: 右键菜单的写法, 记住即可

image.png


12 天前   #24

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前在学aardio+halcon机器视觉.
Htmlayout界面在线学习文档
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...