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