htmlyout学习之播放器设置界面
By
admin
at 2019-09-01 • 0人收藏 • 1436人看过
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
登录后方可回帖