htmlyout学习之播放器设置界面
By
admin
at 2019-09-01 • 0人收藏 • 1403人看过
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>
代码还没有完成, 下面是工程代码:
链接:https://pan.baidu.com/s/1a7xqt9vXugwhnXtumKoQGg
提取码:wdn2
登录后方可回帖