htmlyout学习之播放器设置界面

By admin at 18 天前 • 0人收藏 • 109人看过
 import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio工程12";right=627;bottom=444;border="none")
winform.add()
/*}}*/

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

namespace web.layout.behavior.mybtn {
	onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {
		//通过自定义指令完成交互
        var cmd = ltTarget.command or ltOwner.command;
		
		select(cmd) {
			case "btnOk"{
				ltOwner.innerText = "已保存";
			}
			case "btnCancle"{
				ltOwner.innerText = "已取消";
			}
			else {
				return;
			} 
		}
     }
     
}

var wbLayout = web.layout( winform );

wbLayout.go("\layout\index.htm");

if(_STUDIO_INVOKED){
	import web.layout.debug;
	wbLayout.attachEventHandler( web.layout.debug );
} 

winform.transparent(true)

winform.show() 
win.loopMessage();

html代码

  <html #id111>
	<HEAD>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">   
<head>
  <style>
//    @import "facade.css";

html
{
	background-color:transparent;
	margin:0;
	min-width:650px;
	min-height:500px;
	overflow:hidden;
}
body
{
	font-family:"宋体";
	font-size:12;
	color:#4D4D4D;
}

#titlelayout
{
	behavior:windowCommand;
	width:610;
	height:40;
	background-image:url(set\set_top.png);
//	text-align:center;
	vertical-align:middle;
	font-size:16;
	font-family:"微软雅黑";
}

#body
{
	width:610;
	height:383;
	background-image:url(set\set_mid.png);
	flow:h-flow;
	
}

#titlebottom
{
	width:610;
	height:5;
	background-image:url(set\set_bottom.png);
}

.setbtn
{

	active-on!: left_menu = self.parent(), left_menu.$1(div.setbtn:checked):checked = false , self:checked = true,

	right_body=$1(div#right_body), //找到
	now_child = right_body.$1(div.setpage[open=true]), now_child.open = false, //找到当前显示的页面
	right_child = right_body.child(self:index), right_child.open = true;  //找到即将显示的页面

	assigned! : left_menu = self.parent(), btn = left_menu.$1(div.setbtn[check]), btn:checked = true,
		right_body=$1(div#right_body), //找到
        	right_child = right_body.child(btn:index), right_child.open = true;  //找到即将显示的页面
	            
              
	
	width:122;
	height:46;
	background-image:url(set\base1.png);
	color:#4D4D4D;
	text-align:center;
	vertical-align:middle;
}


.setbtn:hover,
.setbtn:checked
{	
	width:122;
	height:46;
	background-image:url(set\base2.png);
	color:#5C9211;
}

#left_menu
{
	width:122;
	height:383;
	padding-left:3px;
}
#right_body
{
	width:100%%;
	height:330;
	margin-right:5px;
}

.setpage
{
	width:100%%;
	height:100%%;
	display:none;
	padding:35px;
}
.setpage[open=true]
{
	display:block;
}
.setpage[open=false]
{
	display:none;
}

a[type="check"]{
	behavior: check;
	display: inline-block;
	cursor: pointer;
	margin: 2 0;
	padding: 0 4 0 22;
	min-width: 21px;
	min-height: 21px;
	line-height: 21px;
	white-space: pre;
	text-decoration:none;
	background: url(set\selectNor.png) no-repeat;
	transition: blend;
}

a[type="check"]:checked
{
	background-image:url(set\selected.png);
}

a[type="radio"]{
	behavior: radio;
	display: inline-block;
	cursor: pointer;
	margin: 2 0;
	padding: 0 4 0 22;
	min-width: 11px;
	min-height: 21px;
	line-height: 21px;
	white-space: pre;
	text-decoration:none;
	background: url(set\radioon.png) no-repeat;
	transition: blend;
}

a[type="radio"]:checked
{
	background-image:url(set\radiooff.png);
}

#close
{
	background-image:url(set\Close1.png);
	width:9;
	height:8;
        position:absolute;
	left:595;
	top:25px;
	cursor:pointer;
}

#close:hover
{
	background-image:url(set\Close2.png);
}

.btn
{
	behavior:mybtn;
	background-image:url(set\ok1.png);
	width:75;
	height:28;
	cursor:pointer;
	text-align:center;
	vertical-align:middle;
	font-size:14;
	font-family:"微软雅黑";
	}
.btn:hover
{
	background-image:url(set\ok2.png);
}

  </style>  

</head>
<body >
	<div #titlelayout command="window-caption">
		<label style="margin-left:20px;">视频设置</label>
		<div #close command="window-close"></div>
	</div>
	<div #body>
		<div#left_menu>
			<div.setbtn check >基本设置</div>
			<div.setbtn >离线观看</div>
		</div>
		<div style="width:100%%;">
		<div#right_body>
			<div.setpage>
				<label>开启与关闭:<label> <a style="margin-left:5px;" type="check">开机自动运行</a>
				<br/>
				<a style="margin-left:83px;margin-top:7px;" type="check">关闭窗口时退出软件</a>
				<br/>
				<a style="margin-left:83px;margin-top:7px;" type="check">开启今日热播推荐</a>
				<br/><br/>
				<label>其它:<label> <a style="margin-left:41px;" type="check">开启老板键</a>
			
			</div>
			<div.setpage>
				<label>清晰度:</label><label style="margin-left:38px;">每次离线观看默认存储高清视频</label>
				<br/>
				<a style="margin-left:83px;margin-top:17px;" checked type="radio">急速</a>
			
				<a style="margin-left:23px;margin-top:17px;" type="radio">流畅</a>
			
				<a style="margin-left:23px;margin-top:17px;" type="radio">高清</a>
			
				<a style="margin-left:23px;margin-top:17px;" type="radio">超清</a>
				<br/>
				<label style="color:#C7C7C7;margin-left:84px;margin-top:11px;">若无极速视频,默认加载流畅视频</label>
				<br/>
				<label style="margin-top:28px;">任务设置:</label><a style="margin-left:25px;" type="check">边看边下</a>
				<br>
				<a style="margin-left:85px;margin-top:10" type="check">软件启动继续加载</a>
				<br/>
			</div>
		</div>
		<div style="width:100%%; height:30;padding-left:280;flow:h-flow">
			<div.btn command="btnOk">确认</div> <div.btn command="btnCancle" style="margin-left:25px;">取消</div>
		</div>
		</div>
	</div>
	<div #titlebottom></div>
</body>
</html>

image.png

代码还没有完成, 下面是工程代码:

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

提取码:wdn2 


登录后方可回帖

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