记录下自己零基础学习htmlayout的过程

By admin at 2019-10-26 • 1人收藏 • 2244人看过

以前说了N多次要学习下htmlayout , 一直各种理由没开始, 这次下定决心开始好好的学一学.

为什么选择htmlayout? 不是过时了吗?

我不这样认为, 适合自己的才是最好的, 最先进的技术并不一定适合我, 我目前的工作和生活中winform这样的拖拖拽拽都可以胜任 , 接触更多的是工业级的软件, 不像web那样的应用层, 工业级的设计讲究的是效率和稳定. 

适不适合还是因人而异.  ,哈


既然名字都包含了html那么需要的就是html的语法了, 我从来没弄过web方面的, 所以真的是白的不能再白了,.

开此贴就是为了督促自己, 希望能认认真真的执行下去.

30 个回复 | 最后更新于 17 天前
2019-10-26   #1

1 , 新建htmlayout工程

首先建立 ui.aardio 的代码文件, 代码框架如下

<html>
	<head>
		<style type="text/css">
			
		</style>
	</head>
	<body>
	hello aardio!
	</body>
</html>

那么,修改和添加main.aardio 

import web.layout; 

var wbLayout = web.layout( mainForm );
wbLayout.go("\layout\ui.aardio");

运行结果

image.png

看到hello aardio 就说明基本的框架成功了, 以后的实验就在ui.aardio里面更改了

2019-10-26   #2

界面最重要的就是交互, 那么怎么才能我点击 hello aardio的字时候,弹出这个信息呢?

<div style="behavior:button">hello aardio!</div>

我们看了aardio官方教程知道, 有这么个交互behavior行为, 只需要定义代码块为这个button行为,那么点击它就会产生button的行为了.

于是,我们在main.aardio逻辑代码里添加

wbLayout.onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
	mainForm.msgbox("hello!");
}

上面的代码是自动生成的, 只需要输入.on之后就会有这个代码提示,回车自动完成. 不需要特意去记

上面意思: 检测到有点击就弹出hello

2019-10-26   #3

上面只是用到了一个button , 如果有两个

	<div style="behavior:button">hello aardio1111!</div>
	<br />
	<div style="behavior:button">hello aardio2222!</div>

那么点击任何一个都会弹出窗口, 这显然不是我要的, 

我要知道我点击了谁, 然后弹出不同的窗口.

那么需要在逻辑代码里输出看下触发的id是谁

wbLayout.onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
    console.dumpJson(ltTarget.id)
	//mainForm.msgbox("hello!");
}

上面的ltTarget.id 也许你不知道这从哪里来的, 不用管它, 当你在ltTarget后输入.的时候会自动提示, 里面有这个id, 提示你是节点id

此时点击后,发现都输出的null

image.png

(⊙o⊙)… , 我看了aar官方教程, 知道这时候需要区分他们就要指定个id名称给他们,

	<div #hello1 style="behavior:button">hello aardio1111!</div>
	<br />
	<div #hello2 style="behavior:button">hello aardio2222!</div>

我添加了#hello1 和#hello2  , 这里#就是代码后面的字母是id,

此时再次点击

image.png

ok了, 我们可以区分了, 然后把逻辑修改下

wbLayout.onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
    if(ltTarget.id == "hello1"){
    	mainForm.msgbox("hello11")
    }
    if(ltTarget.id == "hello2"){
    	mainForm.msgbox("hello22")
    }
}

image.png


2019-10-27   #4

如果按照上面的写法,每次判定if() 把所有的逻辑写在一起总感觉看着不是很合逻辑, 那么aardio里提供了另外一种写法, 类似写函数那样写成表函数的形式

1
2
3
4
5
6
7
8
wbLayout.onButtonClick = {
    hello1 = function (ltTarget,ltOwner,reason,behaviorParams) {
        mainForm.msgbox("hello11")
    }
    hello2 = function (ltTarget,ltOwner,reason,behaviorParams) {
        mainForm.msgbox("hello22")
    }
}

可以看出, 上面的hello1和hello2就是节点的id名, 这样以节点名命名的函数,可以实现统一的写法,看起来更和谐

2019-10-27   #5

我们知道工业上很多时候需要长按按钮来实现一定的功能, 比如数值连续增加, 那么这里应该怎么实现呢?

var i=1;
wbLayout.onButtonPress = {
	hello1 = function (ltTarget,ltOwner,reason,behaviorParams) {
		console.log(i)
		i++;
	}
}

增加press功能, 这样鼠标在按钮上长按,就应该会数值自动增加了.

image.png

上面确实数值也有增加, 但是同样也触发了click点击事件, 这不是我想要的, 

其实, 在winform的button事件里也是这么个情况, 那么还是老办法, 延时200ms检测下是不是放开了, 如果放开了,那么就触发click , 如果没放开那么就默认触发长按事件

这样就需要加个事件变量来判定了.

var clickFlag = false;
var pressFlag = false;
wbLayout.onButtonClick = {
	hello1 = function (ltTarget,ltOwner,reason,behaviorParams) {
		if(pressFlag==true){
			pressFlag = false;
		}else {
			clickFlag = true;
			pressFlag = false;
			mainForm.msgbox("hello11")
		}	
    }

}

wbLayout.onButtonPress = {
	hello1 = function (ltTarget,ltOwner,reason,behaviorParams) {
		if(pressFlag!=true){
			clickFlag = false;
			pressFlag = false;
			win.delay(200)
			//此期间被外部改变了
			if(clickFlag == true){
				//console.log("单击了一下")
			}else {
				pressFlag = true;
				console.log("长按功能")
			}
		}	
	}
}


2019-10-27   #6

其实上写到这里就可以看出, 上面利用onbuttonClick事件和press是不对的, 貌似实现了, 但是会有很多问题, 要实现长按功能, 就应该用类似plus的mouseup和mousedown事件

但是从教程里来看如果html里设置behavior:button定义为button, 那么就不会产生mouseup事件了, 经过测试也确实如此, 

onMouseUp 和onMouseDown 事件是针对普通的节点, 官方论坛里也说过:

注意对于div这样的普通节点并没有 onButtonClick 这样的按钮事件,
只有 onMouseClick 这样的鼠标事件. 而按钮没有 onMouseClick 事件(只能使用 onButtonClick )。

如果要想使用mouse事件, 那么这个节点必须是普通节点, 这样我们可以删除html代码里面的behavior指定,

那么问题就又来了, 如果删除了behavior:button指定, 我们aar里就没办法监控到事件了, 

看来, 不能使用htmlayout中定义过的behavior行为, 我们只能自定义一个了.

namespace web.layout.behavior.mycommand {

        onMouseUp= function (ltTarget,ltOwner,x,y,ltMouseParams) {
            ..console.dumpJson(ltOwner.id)
        };

}
//注意: namespace必须放到前面去
wbLayout.go("\layout\ui.aardio");

我们在behavior名字空间下定义了一个mycommand的行为,在html里修改

	<div #hello1 style="behavior:mycommand">hello aardio1111!</div>
	<br />
	<div #hello2 style="behavior:mycommand">hello aardio2222!</div>

这样我们执行的时候, 就会显示出我们点击到的节点id了

为什么这次是ltOwner.id? 

貌似这种普通节点点击事件, 返回的只有被当前点击到的节点, 所以用Owner , 反正我试了Target返回的是null


那么就可以在mouse的两个事件里进行操作了.

2019-10-27   #7

2, 增加提示

上面按键上怎么增加提示功能? 类似winform里的tooltips

第一种最简便的办法, 在div里面增加title属性, 这样htmlayout自动管理提示

image.png

<div #hello1 style="behavior:button" title="这是第一个提示">hello aardio1111!</div>
<br />
<div #hello2 style="behavior:button" title="这是第二个提示">hello aardio2222!</div>


2019-10-27   #8

上面的方法只能简单的提示 , 如果你想要用要给复杂漂亮的提示框, 那么可以指定提示用的titleid,这个titleid指向下面定义的popup的id号即可.

	<div #hello1 style="behavior:button" titleid="mytips1">hello aardio1111!</div>
	<br />
	<div #hello2 style="behavior:button" titleid="mytips1">hello aardio2222!</div>
	
	<popup id="mytips1">
		这是一个示范:<br/>
		可以使用html的工具提示tooltip
	</popup>

上面两个按钮都使用了同一个提示, 当然, 也可以使用不同的提示id

	<div #hello1 style="behavior:button" titleid="mytips1">hello aardio1111!</div>
	<popup id="mytips1">
		这是第一个提示:<br/>
		提示1,提示1,提示1,提示1,提示1
	</popup>
	<br />
	<div #hello2 style="behavior:button" titleid="mytips2">hello aardio2222!</div>
	<popup id="mytips2">
		这是第二个提示:<br/>
		提示2,提示2,提示2,提示2,提示2
	</popup>

注意: 上面的提示popup最好和要提示的内容紧挨着, 要不然后面不好维护...


那么怎么分别定义popup的样式呢?

看到<popup id="mytips"> 这个id了吧, 只需要在css里面定义它的样式就可以了.

	<head>
		<style type="text/css">
		#mytips1{
		    border:0; 
    		    font: 15pt;  
		}
		</style>
	</head>

上面把tips1的字体变大了.

至于怎么美化这个东西, 后面再慢慢学.

2019-10-27   #9

不推荐使用 , 推荐看12楼方法

3, 模拟菜单栏的弹出菜单功能

类似winform的菜单, 点击后,下拉出一个列表 ,

	<div style="behavior:dropdown">菜单演示
		<popup>
        	<li>新建</li>
		<li>打开</li>
		<li>保存</li>
		<li>另存为</li>
		<hr />
		<li>打印预览</li>
		<li>打印设置</li>
		<hr />
		<li>退出</li>	
    	</popup>
	</div>

这里用dropdown , 可以联想下winfrom的dropdown , 这个是需要点击下之后,下拉出菜单

注意, 这个dropdown需要在逻辑程序里调用dropdown库

import web.layout.behavior.dropdown;

image.png

2019-10-27   #10

不推荐使用 , 推荐看12楼方法

上面有一个问题, 弹出来之后, 必须点击弹出区域外才能关闭弹出口, 在里面点击不会关闭

em.... aar官方论坛里有提到了,

如果希望在popup自身上点击也隐藏popup,那就要在popup上添加behavoir:popup,
同样的popup也是标准库实现的behavior( HTMLayout并没有名字是popup的内部behavior - 虽然他确实有一个叫popup的HTML标记 ),所以首先要调用  import web.layout.behavior.popup;

于是, 在html里添加popup行为, 并且在逻辑代码里添加import

1
2
3
4
5
6
7
8
9
10
11
12
13
    <div style="behavior:dropdown">菜单
        <popup style="behavior:popup">
            <li>新建</li>
            <li>打开</li>
            <li>保存</li>
            <li>另存为</li>
            <hr />
            <li>打印预览</li>
            <li>打印设置</li>
            <hr />
            <li>退出</li>
        </popup>
    </div>
1
import web.layout.behavior.popup;

这样点击弹出框也可以自动关闭了.

2019-10-27   #11

不推荐使用 , 推荐看12楼方法

刚才又到论坛里看了下, 弹出dropdown,官方推荐用 popup-menu ,这个是htmlayout内置的behavior,不需要导入其他库

1
2
3
4
5
6
7
8
9
10
11
12
13
    <div style="behavior:popup-menu">菜单
        <popup style="behavior:menu">
            <li>新建</li>
            <li>打开</li>
            <li>保存</li>
            <li>另存为</li>
            <hr />
            <li>打印预览</li>
            <li>打印设置</li>
            <hr />
            <li>退出</li>
        </popup>
    </div>

逻辑代码那里不需要导入任何库


2019-10-27   #12

4, 多级菜单

	<div style="behavior:popup-menu">菜单
		<menu .popup>
        	<li>新建</li>
			<li>打开</li>
			<li>保存</li>
			<li>另存为
			<menu>
				<li>保存1</li>
				<li>保存2</li>
				<li>保存3</li>
			</menu>
			</li>
			<li>打印预览</li>
			<li>打印设置</li>
			<hr />
			<li>退出</li>	
    	        </menu>
	</div>

image.png

popup-menu这个是内置的behavior , 不需要其他的操作


总结: 从这里可以看出, 显然用这种多级菜单的形式相比dropdown模式更简洁,以后用到这种点击弹出的菜单形式, 推荐用这种形式!


我们可以看到这时候,默认的弹出菜单框会有黑色的阴影, 那么如果我们不想要这个阴影怎么做呢?

        <div style="behavior:popup-menu;">菜单
        <menu .popup style="background-color:transparent;">
            <li #new>新建</li>
            <li #open>打开</li>
            <li #save>保存</li>
            <li>另存为
            <menu>
                <li #save1>保存1</li>
                <li #save2>保存2</li>
                <li #save3>保存3</li>
            </menu>
            </li>
            <li #print>打印预览</li>
            <li #printset>打印设置</li>
            <hr />
            <li #close>退出</li> 
        </menu>
    </div>

看上面代码, 我们只需要在popup节点里增加 

style="background-color:transparent;"

这样来清除背景色, 之后设置背景色为单像素白色图片即可.

有黑色阴影和没有阴影的对比如下图:

blob.pngblob.png

现在设计软件都是扁平风格, 显然第二个会更好点

2019-10-27   #13

菜单显示完成了, 那么怎么才能知道我点击了哪个呢?

和上面的button写法一样, 只需要把每个<li>加个id就可以了

	<div style="behavior:popup-menu">菜单
		<menu .popup>
        	<li #new>新建</li>
			<li #open>打开</li>
			<li #save>保存</li>
			<li>另存为
			<menu>
				<li #save1>保存1</li>
				<li #save2>保存2</li>
				<li #save3>保存3</li>
			</menu>
			</li>
			<li #print>打印预览</li>
			<li #printset>打印设置</li>
			<hr />
			<li #close>退出</li>	
    	</menu>
	</div>

然后, 在逻辑代码里, 调用菜单被点击事件,简单的写法如下:

wbLayout.onMenuItemClick = {
        new = function (ltTarget,ltOwner,reason,behaviorParams) {
		mainForm.msgbox("new")
	}
	open = function (ltTarget,ltOwner,reason,behaviorParams) {
		mainForm.msgbox("open")
	}
	save = function (ltTarget,ltOwner,reason,behaviorParams) {
		mainForm.msgbox("save")
	}
	save1 = function (ltTarget,ltOwner,reason,behaviorParams) {
		mainForm.msgbox("save1")
	}
	save2 = function (ltTarget,ltOwner,reason,behaviorParams) {
		mainForm.msgbox("save2")
	}
	save3 = function (ltTarget,ltOwner,reason,behaviorParams) {
		mainForm.msgbox("save3")
	}
	close = function (ltTarget,ltOwner,reason,behaviorParams) {
		mainForm.msgbox("close")
	}
	print = function (ltTarget,ltOwner,reason,behaviorParams) {
		mainForm.msgbox("print")
	}
}

image.png

2019-10-27   #14

那么,右键菜单应该怎么做呢? 点击右键才能出现的菜单

看了htmlayout的示例, 

selector函数的参数是指定右键菜单的CSS选择器

  <div style="context-menu:selector(menu#context);">这里要点右键才出现菜单</div>
	
  <menu.context #context>
    <li id="i1">First item</li>
    <li id="i2">Second item</li>
    <li id="i3">Third item</li>
    <li id="i4">Fourth item</li>
    <li>Sub menu
        <menu>
          <li id="i5">5 item</li>
          <li id="i6">6 item</li>
        </menu>  
    </li>
  </menu>

image.png

2019-10-27   #15

5, 下拉组合框 模拟winform的combobox功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<select #font_size">
    <option value="6">6</OPTION>
    <option value="8">8</OPTION>
    <option value="9">9</OPTION>
    <option value="10">10</OPTION>
    <option value="11">11</OPTION>
    <option value="12" selected>12</OPTION>
    <option value="14">14</OPTION>
    <option value="16">16</OPTION>
    <option value="18">18</OPTION>
    <option value="20">20</OPTION>
    <option value="22">22</OPTION>
    <option value="24">24</OPTION>
    <option value="28">28</OPTION>
</select>

aardio里要获取选择值的话, 

1
2
3
4
5
6
7
8
//下拉组合框
wbLayout.onSelectSelectionChanged = function (ltTarget,ltOwner,reason,behaviorParams) {
    //第一种方式
    var ltOption = ..web.layout.element( behaviorParams.he )
    console.dumpJson(ltOption.value)
    //推荐第二种方式
    console.dumpJson(ltTarget.value)
}

image.png

如果需要把下拉框变宽,可以直接指定节点的宽度

image.png

1
<select #font_size style="width:100">

如果有多个下拉框, 那么可以用id来区分

1
2
3
4
5
6
7
8
9
10
11
12
//下拉组合框
wbLayout.onSelectSelectionChanged = {
    demo = function (ltTarget,ltOwner,reason,behaviorParams) {
        console.log("demo")
        console.dumpJson(ltTarget.value)
    }
     
    font_size = function (ltTarget,ltOwner,reason,behaviorParams) {
        console.log("font_size")
        console.dumpJson(ltTarget.value)
    }
}

image.png


延伸:

我们知道在winform中下拉框有个模式是可以直接在输入框中输入数值的.

那么htmlayout中应该怎么做呢?


答案: 很简单, 只需要在select 属性里 添加 editable 即可.

	<select #demo style="width:100" editable>
		<option value="6">6</OPTION>
		<option value="8">8</OPTION>
		<option value="9">9</OPTION>
		<option value="10">10</OPTION>
		<option value="11">11</OPTION>
		<option value="12" selected>12</OPTION>
	</select>

加了这个关键词属性后, 可以直接在输入框中输入值

image.pngimage.png

而且也会自动添上文本的右键菜单

2019-10-28   #16

6, listbox 模拟

最简单的方式

1
2
3
4
5
6
7
8
<widget type="select" #demo2>
        <OPTION VALUE=0 SELECTED>列表项1</OPTION>
        <OPTION VALUE=1 >列表项2</OPTION>
        <OPTION VALUE=1 >列表项3</OPTION>
        <OPTION VALUE=1 >列表项4</OPTION>
        <OPTION VALUE=1 >列表项5</OPTION>
        <OPTION VALUE=1 >列表项6</OPTION>
</widget>

因为这个类型也是select, 所以同样和combobox一样,获取事件

1
2
3
4
5
6
7
wbLayout.onSelectSelectionChanged = {
    demo2 = function (ltTarget,ltOwner,reason,behaviorParams) {
        //第一种方式
        var ltOption = ..web.layout.element( behaviorParams.he )
        console.dumpJson(ltOption.value)
    }
}

image.png


延伸:

怎么在listbox中添加复选框? 让它能够多选呢?


答案:

在widget节点里添加 multiple="checks" 属性即可. htmlayout会自动在前面增加复选框, 另外 option 属性里面的 selected 属性指定选中的复选框

	<widget type="select" #demo2 style="height:120px;width:100px" multiple="checks">
    	<OPTION VALUE=0 SELECTED>列表项1</OPTION>
    	<OPTION VALUE=1 >列表项2</OPTION>
    	<OPTION VALUE=1 SELECTED>列表项3</OPTION>
    	<OPTION VALUE=1 selected>列表项4</OPTION>
    	<OPTION VALUE=1 >列表项5</OPTION>
    	<OPTION VALUE=1 >列表项6</OPTION>
	</widget>

image.png


提醒:

不知道你从上面的代码发现了什么没有.....?

注意看 上面的 selected 和SELECTED 大小写是不同的, 但是效果是一样的, 这说明htmlayout对大小写不敏感.... 


aar官方教程里也提醒了: htmlayout的节点名不要用大小写驼峰命名法, 推荐用连接符连接法,

2019-10-29   #17

7, ICON图标的显示

这个是内置的behavior:shell-icon实现的, 不需要import任何库,编写html即可.

  <select size="6" style="height:500px">
    <option><img  style="behavior: shell-icon;" filename=".png" /> *.png icon</option>
    <option><img  style="behavior: shell-icon;" filename=".jpg" /> *.jpg icon</option>
    <option><img  style="behavior: shell-icon;" filename=".doc" /> *.doc icon</option>
    <option><img  style="behavior: shell-icon;" filename=".html" /> *.html icon</option>
    <option><img  style="behavior: shell-icon;" filename=".cpp" /> *.cpp icon</option>
    <option><img  style="behavior: shell-icon;" filename=".zip" /> *.zip icon</option>
    <option><img  style="behavior: shell-icon;" filename=".js" /> *.js icon</option>
    <option><img  style="behavior: shell-icon;" filename=".exe" /> *.exe icon</option>
  </select>

image.png

嗯.....上面看着很不舒服, 

原因是没设置css样式定义间距和外形, 那么就需要在style里添加下样式即可

下面添加图片icon的上右下左编辑margin外边距

  <select size="6" style="height:500px">
    <option><img  style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".png" /> *.png icon</option>
    <option><img  style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".jpg" /> *.jpg icon</option>
    <option><img  style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".doc" /> *.doc icon</option>
    <option><img  style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".html" /> *.html icon</option>
    <option><img  style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".cpp" /> *.cpp icon</option>
    <option><img  style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".zip" /> *.zip icon</option>
    <option><img  style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".js" /> *.js icon</option>
    <option><img  style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".exe" /> *.exe icon</option>
  </select>

运行后:

image.png

是不是看着舒服多了, 哈


看到这里, 不知道你心里有没有产生一个疑问?

这个icon是不是必须放置到select节点里面啊??? 

是不是必须按照上面的写法才能显示啊????


答案当然是NO

官方也只是提供了个演示而已, 实际起作用的是behavior:shell-icon 

所以, so , 你写到div节点里也是可以的

<div style="behavior: shell-icon; margin:50 30 10 30;" filename=".jpg" > </div>
<div style="behavior: shell-icon; margin:50 30 10 30;" filename=".zip" > </div>

那么能写到div里就可以写到任何你想要展示 的地方了.

image.png


继续:详细的icon属性如下;

behavior: file-icon;文件图标显示行为.
如果没有指定大小. 此行为会提取最符合显示区域大小的图标显示.

属性:

filename="test.exe"  -  获取指定可执行文件的图标
filename=".doc"  -  获取指定扩展名的系统图标
filename="."  - 文件夹图标
filename=".."  -  驱动器图标
filename="\\"  -  我的电脑图标
icon-size="small"  -  图标大小. 可取值: "small", ”large”. 默认为 "small".


2019-10-29   #18

8, 文件选择器 和文件夹选择器

类似aardio里winform里面的fsys.dlg.openxxx , 弹出一个窗口让你选择要上传的文件或文件夹功能

  文件选择器:<input type="file-path" filter="HTML files:*.htm,*.html;Text files:*.txt;All files:*.*" novalue="(select file)" value="" />
  <br/>
  文件夹选择:<input type="folder-path">

看代码是不是和aardio里实现这个功能的代码基本一样?! 

用熟悉aardio的话, 这个功能应该一下子就记住了,哈

image.png

image.png

上面还会自动带上图标, 不错.

2019-10-30   #19

很不错,学习了

2019-10-30   #20

9 , 单选按钮

类似winform 的radio按钮功能, 在htmlayout中使用很简单

  <INPUT type="radio" name="color" value="blue">蓝色
  <INPUT type="radio" name="color" value="red" checked>红色 
  <INPUT type="radio" name="color" value="green">绿色 
  <INPUT type="radio" name="color" value="NoDefine">未定义

如上, name定义分组, value定义该选项的值, checked定义当前选中项

参考radio的属性即可

name="group"  -  用于区分单选框组(必须)
value="0"  -  对应选项的值

image.png


思考:

怎样在aardio中获取到是哪个颜色被选中了???


答案:

radio没有专门的事件获取这个值, 那么只能利用属性选择器来选择

    var ltCurrent = wbLayout.querySelector("INPUT[name='color']:checked");
    console.log( ltCurrent.getAttribute("value") )

我们把这个代码放到一个button按钮里去, 上面的意思是, 首先查找INPUT节点,再次找到属性是name="color"的节点,从这些节点里找到被checked 了的节点.

然后从这个节点里获取value属性值

image.png


延伸:

有没有发现上面的单选按钮很难点到, 必须点击到圆圈里才行??

那么,怎样才能点击文字也触发单选功能呢?


答案: 

将INPUT 改为button , 单选本来就是单选按钮

  <button type="radio" name="color1" value="blue">蓝色</button>
  <button type="radio" name="color1" value="red" checked>红色 </button>

这样文字就是一体的.


2019-10-30   #21

10, 多选框

  <INPUT type="checkbox" name="cb" value="C++">C++&nbsp;
  <INPUT type="checkbox" name="cb" value="Aardio" checked>Aardio&nbsp; 
  <INPUT type="checkbox" name="cb" value="JavaScript" checked>JavaScript&nbsp; 
  <INPUT type="checkbox" name="cb" value="TIScript">TIScript&nbsp;

image.png

同楼上的方式,改为button,让文字也可以点击

  <button type="checkbox" name="cb" value="C++">C++&nbsp;</button>
  <button type="checkbox" name="cb" value="Aardio" checked>Aardio&nbsp; </button>
  <button type="checkbox" name="cb" value="JavaScript" checked>JavaScript&nbsp; </button>
  <button type="checkbox" name="cb" value="TIScript">TIScript&nbsp; </button>

那么,如何获取到多选框的值呢?

    //获取所有的符合条件的节点
    var ltCurrent = wbLayout.querySelectorAll("INPUT[name='cb']:checked");
    for(i=1;#ltCurrent;1){
        //输出值
    	console.log( ltCurrent[i].getAttribute("value") )
    }

因为是多选框, 那么说明选中的选项有可能不止一个, 那么就要使用querySelectorAll来获取了.

image.png

2019-10-31   #22

11, 文本框

类似winform的editbox控件

<input type="text" />

上面是最简单的输入框

image.png

text有下面这些属性可以设置,达到不同的效果

value=“text”  -  初始文本
.size="20"  -  元素的初始宽度
.maxlength="12"  -  最大文本长度
.filter=“0~9”  -  限制可输入的字符内容. 支持单个字符或字符范围.
o   ”.@0~9a~zA~Z”  -  允许输入所有字母和数字以及 . 和 @ 字符(email).
o   “^.,-”  -  允许输入除 . , - 之外的任意字符.  ^ 作为排斥标记使用
.novalue=“please input”  -  如果文本框为空, 则显示此属性指定的文本
.o 你可以通过 :empty 伪类来修改这个提示文本的样式.

有如下几个状态

:hover  -  悬停
:focus  -  获得焦点
:disabled  -  被禁用
:empty  -  内容为空

那么, 怎么使用呢?

<input type="text" size="50" novalue="默认提示文字..." />

image.png

下面代码增加个鼠标经过text文本框时候的样式

	<style>
	input[type="text"]:hover{
		outline:4px glow #3070ff 1px;
	}
	</style>

效果如下:

image.png

当然上面的hover可以改为focus或者empty , 这样可以表达不同的状态


延伸:

如果需要输入密码, 那么怎么办?


答案:

将type改为password即可, 属性和text一样, 增加了一个扩展属性

password-char=“#” - 指定密码提示字符为 #.

这里可以指定密码提示符号

image.png

image.png

<html>
	<head>
	<style>
	input[type="password"]:hover{
		outline:4px glow #3070ff 1px;
	}
	</style>

	</head>
	<body>
		<input type="password" size="30" novalue="请输入密码..." />
	</body>
</html>


那么, 怎么去获取这个输入的密码呢?


答案:

    var ltEle = wbLayout.querySelector("input[type='password']");
    console.log( ltEle.value)

image.png

2019-11-01   #23

12,  数值输入框

类似winform的spin控件, 输入框的右侧有上下微调按钮,点击可以自加数值

<input type="number" />

image.png

type="number"只允许输入正整数,不允许输入 负号和小数点

所有用number会有很多局限, 如果要是需要输入负号和小数点 , 

那么推荐使用type="decimal"

input:<input type="decimal" step=5 format="negative-sign:true;leading-zero:false;"/>

image.png

注意, 属性里如果设置了step 那么就会自动添加上下箭头.

另外这个控件还有很多自有属性(备注:number和decimal的相同)

value=float - 初始值
size=integer - 控件宽度
min - 最小值
max - 最大值
step - 滚动选框步进值,指定了此属性会显示滚动选框
format - 数值显示格式,支持下面的字段,使用 ';'分隔多个字段:
    grouping - number, ‘千位’分隔符间隔数
    fdigits - number, 小数位置
    leading-zero - true/false, 是否显示前导0
    decimal-sep - 小数分隔符
    grouping-sep - 千位分隔符
    negative-sign - true/false, true - 是否显示负号

如果要输入的是货币, 那么可以使用 type="currency", 那么输入的数字会自动按照千百个进行划分 , 方便观察.


以上: 无论是number / decimal / currency 都有以下两个自带属性

invalid - 当前输入了无效的值
negative - 负数

这两个属性可以在css中指定动态效果, 类似hover 这样的.

<html>
	<head>
	<style>
  		input[type="decimal"][negative] { color:blue; }
	</style>

	</head>
	<body>
		input:<input type="decimal" step=5 />
	</body>
</html>

image.png

看上面的css样式, [negative]指定输入值为负数时候, 显示颜色为蓝色


提问:

怎么获取文本框内的值呢?


答案:

    var ltEle = wbLayout.querySelector("input[type='decimal']");
    console.log( ltEle.value )

image.png

2019-11-02   #24

13, 进度条

和winform一样的功能progress控件

最简单的进度条:

<p>
	0%:<progress name="p1" maxvalue="100" value="0"/>
	25%:<progress name="p2" maxvalue="100" value="25"/>
	50%:<progress name="p3" maxvalue="100" value="50"/>
	75%:<progress name="p4" maxvalue="100" value="75"/>
	100%:<progress name="p5" maxvalue="100" value="100"/>
</p>

image.png

这个控件根据当前显示值和最大值的比值, 来调整前景图, 达到动态效果


那么, 我们如果要在aardio里控制这个动态显示,应该怎么做呢?

假如有个名字是demo的进度条, 当前值是30

<progress name="demo" maxvalue="100" value="30"/>

我们可以用css选择器来改变这个值,达到调整进度的目的

mainForm.button.oncommand = function(id,event){
    var ltEle = wbLayout.$1("progress[name='demo']");
        //输出之前的进度
	console.dump( ltEle.value )
	//随机分配进度
	ltEle.value = math.random(1,100);	
}

我们可以看到进度条随机在变化了.


思考: 我们如果要弄个漂亮的进度条应该怎么自定义?

登录后方可回帖

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