HTMLayout 选项卡控件( tabs behavior应用）

编程 · 发表于 2012-11-2 15:37:16

import win.ui;
/*DSG{{*/
var winform = ..win.form( right=599;text="HTMLayout 选项卡控件( tabs behavior应用）";bottom=399 )
winform.add( )
/*}}*/
import web.layout; // 导入浏览器引擎
import web.layout.behavior.tabs; // 导入behavior
// 创建浏览器
var wbLayout = web.layout(winform);
wbLayout.html = /**
<html>
<head><style>
.tabs
{
behavior:tabs; /*指定这是一个选项卡控件*/
height:100%%;
width:100%%;
font:system;
}
/* 选项卡列表 */
.tabs > .strip
{
flow: horizontal;
margin-bottom:-1px;
padding: 2px 2px 0 2px;
list-style:none;
}
/* 选项卡按钮*/
.tabs > .strip > [panel]
{
padding: 3px 8px;
margin-bottom:1px;
background-image:url(theme:tab-item-normal);
background-repeat:stretch;
max-width: auto; /* 内容最宽度:自动 */
min-width: max-intrinsic; /*足以显示内容宽度*/
white-space:nowrap; /*禁止换行*/
white-space:nowrap; /*禁止换行*/
height: 20px;
line-height: 20px; /*行距与高度相同实现垂直居中*/
vertical-align: middle; /*垂直居中*/
text-align: center; /*水平居中*/
font-size: 12px;
}
.tabs > .strip > [panel][closeable]{
width:calc( min-intrinsic-width() + 30 ); /*右边留出float的关闭按钮的位置，防止换行*/
}
/* 鼠标悬停在选项卡按钮上*/
.tabs > .strip > [panel]:hover
{
background-image:url(theme:tab-item-hover);
transition:blend;
}
/*当前选项卡按钮的样式*/
.tabs > .strip > [panel][selected]
{
background-image:url(theme:tab-item-selected);
margin:-2px -2px -1px -2px;
padding: 4px 10px 5px 10px;
position:relative;
}
/*当前选项卡控件得到焦点时:选项卡按钮的样式*/
.tabs:focus .strip [panel][selected]
{
background-image:url(theme:tab-item-focused);
}
/*点击当前选项卡的样式*/
.tabs > .strip > [panel][selected]:hover
{
background-image:url(theme:tab-item-selected);
transition:none;
}
/*左侧第一个选项卡按钮的样式*/
.tabs > .strip > [panel][selected]:first-child,
.tabs > .strip > [panel][selected]:hover:first-child
{
background-image:url(theme:tab-item-leftmost-selected);
}
//下面指定关闭按钮的样式
.tabs > .strip > [panel] .close-panel{
display:none;
}
.tabs > .strip > [panel][selected] .close-panel{
display:block;
float:right;
width:12px;
height:12px;
line-height: 12px;
border-radius:12px;
margin-top:4px;
font-size: 12px;
font-family:"Marlett";
color: #7e8c8d;
content:"r";
}
.tabs > .strip > [panel][selected] .close-panel:hover{
background:#999;
color: #FFF;
}
.tabs > .strip > [panel][selected] .close-panel:active{
background:red;
color: #FFF;
}
/*选项内容面板默认隐藏*/
.tabs > .panel[name] { display:none; }
/*选项内容面板展开显示状态*/
.tabs > .panel[name]:expanded
{
display:block;
background-image:url(theme:tab-panel);
background-repeat:stretch;
padding:4px;
height:100%%;
width:100%%;
}
</style>
</head>
<body>
<div class="tabs" >
<div class="strip" >
<div panel="panel1" selected>选项一</div>
<div panel="panel2">选项二</div>
<div panel="panel3">选项三</div>
</div>
<div class="panel" name="panel1">
这是第一个选项页,其中name属性指定选项卡名字
</div>
<div class="panel" name="panel2">
这是第二个选项页,其中name属性指定选项卡名字
<button>按钮</button>
</div>
<div class="panel" name="panel3">
这是第三个选项页,其中name属性指定选项卡名字
<a href="tabs://http://wap.baidu.com" target="_blank" title="论坛">百度一下</a>
</div>
</div>
</body>
</html>
**/
//切换选项页激活下面的事件
import win.util.tray;
wbLayout.onElementExpanded = {
panel1 = function (ltTarget,ltEle,reason) {
win.util.tray.pop( ltTarget.outerHTML );
};
panel2 = function (ltTarget,ltEle,reason) {
win.util.tray.pop( ltTarget.outerHTML );
};
panel3 = function (ltTarget,ltEle,reason) {
win.util.tray.pop( ltTarget.outerHTML );
};
}
winform.show()
win.loopMessage();

复制代码

编程 · 发表于 2012-11-2 15:47:38

首先在aardio中事先导入这个behavior，如下：

import web.layout;
import web.layout.behavior.tabs; //导入behavior

复制代码

在HTML中添加一个div 例如

<div class="tabs" >
</div>

复制代码

然后在CSS里指定behavior为tabs，就可以拥有选项卡控件的功能了

.tabs
{
behavior:tabs; /*指定这是一个选项卡控件*/
}

复制代码

然后在选项卡控件里添加选项卡按钮，注意按钮一定要放在CSS类名为"strip"的div容器里

<div class="tabs" >
<div class="strip" >
<div panel="panel1" selected>选项一</div>
<div panel="panel2">选项二</div>
<div panel="panel3">选项三</div>
</div>
<div class="panel" name="panel1">
这是第一个选项页,其中name属性指定选项卡名字
</div>
<div class="panel" name="panel2">
这是第二个选项页,其中name属性指定选项卡名字
<button>按钮</button>
</div>
<div class="panel" name="panel3">
这是第三个选项页,其中name属性指定选项卡名字
<a href="tabs://http://www.baidu.com" target="_blank" title="百度">百度</a>
</div>
</div>

复制代码

每个选项卡按钮里使用panel属性指定激活哪一个选项页面。

定义选项内容页面很简单，tabs的直接子节点( 不能是子节点下面的子节点 )并指定name属性，并且class="panel"就行了，例如：

<div class="panel" name="panel3">
这是第三个选项页,其中name属性指定选项卡名字
<a href="tabs://http://wap.baidu.com" target="_blank" title="百度">百度一下</a>
</div>

复制代码

tabs选项卡中的页面有两种：
一种是固定的选项卡，一种是可以动态创建动态关闭的选项卡。
动态创建的选项卡有colseable属性，并且在选项卡上默认包含关闭按钮（需要用CSS自行指定关闭按钮的外观,参考示范代码）

在内容页中的超链接如果加上"tabs://"前缀，并指定title,target属性 - 那么在点击该节点时将会自动创建一个新选项卡打开，title属性指定新建选项卡的标题，而targer指定目标选项卡的名字，如果target为"_blank"则表示创建新的选项卡。

也可以调用tabs提供的自定义函数创建或关闭页面，tabs提供以下函数：

ltTabs.xcall("select","选项卡名字"); //选择一个页面
ltTabs.xcall("close","选项卡名字"); //关闭一个页面
ltTabs.xcall("open ","选项卡标题","框架页网址","选项卡名字"); //打开一个页面
ltTabs.xcall("create","选项卡标题","选项卡名字","子页面HTML"); //使用HTML代码新建一个页面

上面的ltTabs指的是tabs节点对象，新建的选项卡默认会添加closeable属性 - 可以使用代码或手动关闭。
固定的选项卡也可以用open,close函数显示或隐藏（但是不会删除页面），如果需要更详细的了解这些函数的用法可以查看标准库web.layout.behavior.tabs 中这几个函数的定义。

最后就是添加修改CSS定义外观了，
behavior指定了行为（例如点哪个按钮激活对应的页面，响应事件等等），
至于外观，你就可以任意的定义了，非常灵活，可以做出各种形形色色的选项卡，
用传统控件要做到这些就比较困难了。

nvt303 · 发表于 2012-11-2 15:50:14

前排占座听讲。

donque2010 · 发表于 2012-11-2 15:53:24

正好用到这个，学习...

wynn_li · 发表于 2012-11-2 18:03:08

感谢分享，回复再看

coder · 发表于 2012-11-2 20:58:06

这个要学习一下

wls · 发表于 2012-11-2 21:24:51

多多洛 · 发表于 2012-11-3 19:50:01

看看是怎么写的？

xauto · 发表于 2012-11-4 16:20:51

学习下

unitysl · 发表于 2012-11-5 01:24:18

好东西，看看先。

来编程 · 发表于 2012-11-5 11:57:39

学习一下

lyz8 · 发表于 2012-11-6 18:41:10

好东西,先谢了!!!!!!!!!!!!!!!!

JJMao · 发表于 2012-11-7 11:22:40

这个是好东西勒

feng123144 · 发表于 2012-11-7 13:30:07

学习,看看

qeenoo · 发表于 2012-11-8 17:50:07

我看看

nnlenx · 发表于 2012-11-9 15:26:59

学习，谢谢

双书幻 · 发表于 2012-11-10 13:25:20

cnhope · 发表于 2012-11-10 16:47:24

简直太强大了

hong638 · 发表于 2012-11-15 17:06:24

谢谢分享

		自动登录	找回密码
密码			注册会员

HTMLayout 选项卡控件( tabs behavior应用 ）

评分

HTMLayout 选项卡控件( tabs behavior应用）