htmlayout和aar的交互方式
By
admin
at 2019-08-25 • 0人收藏 • 1967人看过
这个是官方论坛里:多多洛 提供的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>效果如下:
登录后方可回帖