htmlayout和aar的交互方式

By admin at 2019-08-25 • 0人收藏 • 192人看过

这个是官方论坛里:多多洛 提供的360界面模拟代码

原帖地址 : http://bbs.aardio.com/forum.php?mod=viewthread&tid=10801

//选项卡切换
namespace web.layout.behavior.menutab {
	//鼠标单击
	onMouseClick = function (ltTarget,ltEle,x,y,ltMouseParams) {
    	var winform = ltEle.getForm(); //获得winform对象
    	var Layout = ltEle.getLayout(); //获得layout对象

    	//设置当前选中
    	var selectedEle = Layout.queryEle("[target][selected]");
    	if (selectedEle) {
    		//取消其他选中
    		selectedEle.selected = null;
    	}
    	ltEle.setAttribute("selected", "true");

    	//设置目标显示
    	var target = Layout.queryEle("[name="++ltEle.target++"]");
    	for ( i, eleChild in target.parent().eachChild() ) {
    		if (eleChild.name) {
    			eleChild.style.visibility = "hidden";
    		}
    	}
    	if ( target.style.visibility == "hidden" ) {
    		target.style.visibility = "visible";
    	}
	}

	sinking = {
    	//捕获模式下阻止鼠标移动事件传递,以避免按住按钮拖动窗口
    	onMouseMove = function (ltTarget,ltEle,x,y,ltMouseParams) {
        	return true;
    	}
    	onMouseDblClick = function (ltTarget,ltEle,x,y,ltMouseParams) {
        	return true;    
    	}
	}
	
}

主界面:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/res/common.css" />
<style>
/* 主界面样式 */
#hl_header { height: 100px; background-color: #55B844; behavior: windowCommand; }
#hl_icon_title { font-size: 12px; line-height: 30px; line-height: 24px; text-indent: 15px; }
#hl_icon_title img { display: none; }

/* 主界面菜单 */
#main_menu {
	position: absolute; left: 12px; top: 30px; width: 100%%; height: 70px;
	flow: horizontal; behavior:tabs;
}

#main_menu div {
	width: 78px; height: 100%; text-align: center; color: #fff; cursor: pointer;
	text-align: center; behavior: menutab;
}
/* 菜单悬停 */
#main_menu div[selected="true"],
#main_menu div:hover { background: url(/res/icon_bg.png) no-repeat right bottom; }
#main_menu div img {
	display: block; width: 48px; height: 48px;
	outline: 1px glow #666 0px; outline-shift: 1px;
}
/* 菜单文字 */
#main_menu div span {
	display: block; outline: 1px glow #666 0px; outline-shift: 1px;
	line-height: 18px;
}
/* 选项卡 */
#main_menu div[selected="true"] {
	assigned!: $([name=<self.target>])::visibility = "visible",;
}
/* 内容区 */
#hl_content {
	vertical-scrollbar: mini_scrollbar;
}
#hl_content div[name] {
	display: block; padding: 0; margin: 0; 
	position: absolute; top: 0; right: 250px; bottom: 0; left:0;
	overflow: auto; vertical-scrollbar: mini_scrollbar;
	visibility: hidden; background: #fff;
}
#hl_content div#user_panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: 249px; border-left:1px solid #dadada;
	background: #fafafa;
}
/* 用户头像 */
#hl_content .my_info {
	border-bottom: 1px solid #dadada; height: 130px;
}
#hl_content .my_info .face {
	width: 53px; height: 53px; overflow: hidden;
	border: 1px solid #d4d5d0; border-radius:100%;
	background: #fff url(/res/noavatar2.gif) no-repeat center;
	background-repeat:stretch keep-ratio;
	background-position: 50% 50%;
	cursor: pointer; margin: 10px;
}
#hl_content .my_info .face:hover {
	outline:2px glow green 1px;
}
#hl_content .my_info .info {
	margin-left: 75px; margin-top: -65px;
	color: #333; line-height: 14px;
}
#hl_content .my_info .info strong span {
	font-weight: normal; font-size: 10px; color: #666;
	font-family: "微软雅黑",SimSun; display: inline-block;
	margin-left: 3px;
}
/* 我的等级 */
#hl_content .my_info .info span[level] {
	display: inline-block; width:14px; height: 18px;
	background: url(/res/star.png) repeat-x;
	assigned!: self::width = self.level * 14,;
}
#hl_content .my_info .status {
	height: 100%%; margin-top: 15px; padding: 10px;
	border-top: 1px dotted #ccc; color: #666;
}
#install_model strong { margin: 10px; color: #666; }

.panel_content { font-size: 16px; margin: 10px; }
</style>
</head>
<body>
	<div id="hl_header" command="window-caption">
		<div id="hl_icon_title" command="window-caption">
			<img id="app_icon" src="/res/favicon.ico" />
			<strong>职称计算机模拟考试练习软件</strong>
		</div>
		<div id="hl_ctrl_bar">
			<span id="min" command="window-min">0</span>
			<span id="max" command="window-max">1</span>
			<span id="close" command="window-close">r</span>
		</div>
		<div id="main_menu">
			<div target="panel_rss" selected="true"><img src="/res/rss.png" title="考试信息、考试指南" /><span>资讯订阅</span></div>
			<div target="panel_xp"><img src="/res/xp.png" title="Windows XP" /><span>操作系统</span></div>
			<div target="panel_ie"><img src="/res/ie.png" title="Internet Explorer" /><span>上网浏览</span></div>
			<div target="panel_word"><img src="/res/word.png" title="Word 2003" /><span>电子文档</span></div>
			<div target="panel_excel"><img src="/res/excel.png" title="Excel 2003" /><span>电子表格</span></div>
			<div target="panel_ppt"><img src="/res/ppt.png" title="PowerPointer 2003" /><span>幻灯片</span></div>
			<div target="panel_db"><img src="/res/db.png" title="管理、操作数据库" /><span>数据管理</span></div>
			<div target="panel_feed"><img src="/res/feed.png" title="提交您的建议与反馈" /><span>用户反馈</span></div>
		</div>
	</div>
	<div id="hl_content">
		<div id="user_panel">
			<div class="my_info">
				<div class="face" title="进入个人中心"></div>
				<div class="info">
					<strong>多多洛<span>(江西,南昌)</span></strong>
					<p>等级:<span level="5"></span></p>
				</div>
				<div class="status">
					<strong>我的进度</strong>
				</div>
			</div>
			<div id="install_model">
				<strong>已安装的模块</strong>
			</div>
		</div>
		<div name="panel_rss">
			<div class="panel_content">
				<h5>最新订阅资讯</h5>
			</div>
		</div>
		<div name="panel_xp">
			<div class="panel_content">
				<h5>操作系统</h5>
			</div>
		</div>
		<div name="panel_ie">
			<div class="panel_content">
				<h5>上网浏览</h5>
			</div>
		</div>
		<div name="panel_word">
			<div class="panel_content">
				<h5>电子文档</h5>
			</div>
		</div>
		<div name="panel_excel">
			<div class="panel_content">
				<h5>电子表格</h5>
			</div>
		</div>
		<div name="panel_ppt">
			<div class="panel_content">
				<h5>幻灯片</h5>
			</div>
		</div>
		<div name="panel_db">
			<div class="panel_content">
				<h5>数据库管理</h5>
			</div>
		</div>
		<div name="panel_feed">
			<div class="panel_content">
				<h5>意见与反馈</h5>
			</div>
		</div>
	</div>
</body>
</html>

效果如下:

image.png

登录后方可回帖

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