搜索
查看: 29502|回复: 112

[教程] HTMLayout 选项卡控件( tabs behavior应用 )

    [复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 2012-11-2 15:37:16 | 显示全部楼层 |阅读模式
tabs.jpg

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;text="HTMLayout 选项卡控件( tabs behavior应用 )";bottom=399 )
  4. winform.add(  )
  5. /*}}*/

  6. import web.layout; // 导入浏览器引擎
  7. import web.layout.behavior.tabs; // 导入behavior

  8. // 创建浏览器
  9. var wbLayout = web.layout(winform);

  10. wbLayout.html = /**
  11. <html>
  12. <head><style>

  13. .tabs
  14. {
  15.   behavior:tabs; /*指定这是一个选项卡控件*/
  16.   height:100%%;
  17.   width:100%%;
  18.   font:system;
  19. }

  20. /* 选项卡列表 */
  21. .tabs > .strip
  22. {
  23.   flow: horizontal;
  24.   margin-bottom:-1px;
  25.   padding: 2px 2px 0 2px;
  26.   list-style:none;
  27. }

  28. /* 选项卡按钮*/
  29. .tabs > .strip > [panel]
  30. {
  31.   padding: 3px 8px;
  32.   margin-bottom:1px;
  33.   
  34.   background-image:url(theme:tab-item-normal);
  35.   background-repeat:stretch;
  36.   
  37.   max-width: auto; /* 内容最宽度:自动  */
  38.   min-width: max-intrinsic; /*足以显示内容宽度*/
  39.   white-space:nowrap; /*禁止换行*/
  40.   white-space:nowrap; /*禁止换行*/
  41.   
  42.   height: 20px;
  43.   line-height: 20px; /*行距与高度相同实现垂直居中*/
  44.   vertical-align: middle; /*垂直居中*/
  45.   text-align: center; /*水平居中*/
  46.   font-size: 12px;
  47. }

  48. .tabs > .strip > [panel][closeable]{
  49.   width:calc( min-intrinsic-width() + 30 ); /*右边留出float的关闭按钮的位置,防止换行*/
  50. }

  51. /* 鼠标悬停在选项卡按钮上*/
  52. .tabs > .strip > [panel]:hover
  53. {
  54.   background-image:url(theme:tab-item-hover);
  55.   transition:blend;
  56. }

  57. /*当前选项卡按钮的样式*/
  58. .tabs > .strip > [panel][selected]  
  59. {
  60.   background-image:url(theme:tab-item-selected);
  61.   margin:-2px -2px -1px -2px;
  62.   padding: 4px 10px 5px 10px;
  63.   position:relative;
  64. }

  65. /*当前选项卡控件得到焦点时:选项卡按钮的样式*/
  66. .tabs:focus .strip [panel][selected]
  67. {
  68.   background-image:url(theme:tab-item-focused);
  69. }

  70. /*点击当前选项卡的样式*/
  71. .tabs > .strip > [panel][selected]:hover
  72. {
  73.   background-image:url(theme:tab-item-selected);
  74.   transition:none;
  75. }

  76. /*左侧第一个选项卡按钮的样式*/
  77. .tabs > .strip > [panel][selected]:first-child,
  78. .tabs > .strip > [panel][selected]:hover:first-child
  79. {
  80.   background-image:url(theme:tab-item-leftmost-selected);
  81. }

  82. //下面指定关闭按钮的样式
  83. .tabs > .strip > [panel] .close-panel{
  84.         display:none;
  85. }
  86. .tabs > .strip > [panel][selected] .close-panel{
  87.   display:block;  
  88.   float:right;  
  89.   width:12px;
  90.   height:12px;
  91.   line-height: 12px;
  92.   border-radius:12px;
  93.   margin-top:4px;
  94.   font-size: 12px;
  95.   font-family:"Marlett";
  96.   color: #7e8c8d;
  97.   content:"r";
  98. }
  99. .tabs > .strip > [panel][selected] .close-panel:hover{
  100.   background:#999;
  101.   color: #FFF;
  102. }
  103. .tabs > .strip > [panel][selected] .close-panel:active{
  104.    background:red;
  105.    color: #FFF;
  106. }


  107. /*选项内容面板 默认隐藏*/
  108. .tabs > .panel[name] { display:none; }

  109. /*选项内容面板 展开显示状态*/
  110. .tabs > .panel[name]:expanded
  111. {
  112.   display:block;
  113.   background-image:url(theme:tab-panel);
  114.   background-repeat:stretch;
  115.   padding:4px;
  116.   height:100%%;
  117.   width:100%%;
  118. }
  119. </style>
  120. </head>  
  121. <body>

  122.    <div class="tabs"  >
  123.    
  124.       <div class="strip" >  
  125.          <div panel="panel1" selected>选项一</div>
  126.          <div panel="panel2">选项二</div>
  127.          <div panel="panel3">选项三</div>         
  128.       </div>
  129.       
  130.       <div class="panel" name="panel1">
  131.           这是第一个选项页,其中name属性指定选项卡名字
  132.       </div>
  133.       
  134.       <div class="panel" name="panel2">
  135.           这是第二个选项页,其中name属性指定选项卡名字
  136.           <button>按钮</button>
  137.       </div>
  138.       
  139.       <div class="panel" name="panel3">
  140.           这是第三个选项页,其中name属性指定选项卡名字
  141.           <a href="tabs://http://wap.baidu.com" target="_blank" title="论坛">百度一下</a>
  142.       </div>
  143.       
  144.    </div>
  145.    
  146. </body>   
  147. </html>   
  148. **/

  149. //切换选项页激活下面的事件
  150. import win.util.tray;
  151. wbLayout.onElementExpanded = {
  152.     panel1  =  function (ltTarget,ltEle,reason) {
  153.         win.util.tray.pop( ltTarget.outerHTML );
  154.     };
  155.     panel2 =  function (ltTarget,ltEle,reason) {
  156.         win.util.tray.pop( ltTarget.outerHTML );
  157.     };
  158.     panel3 =  function (ltTarget,ltEle,reason) {
  159.         win.util.tray.pop( ltTarget.outerHTML );
  160.     };
  161. }

  162. winform.show()
  163. win.loopMessage();
复制代码

评分

参与人数 1银币 +10 收起 理由
handongcn + 10 赞一个!

查看全部评分

回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2012-11-2 15:47:38 | 显示全部楼层

首先在aardio中事先导入这个behavior,如下:[code]import web.layout; import web.layout.behavior

首先在aardio中事先导入这个behavior,如下:
  1. import web.layout;
  2. import web.layout.behavior.tabs; //导入behavior
复制代码
在HTML中添加一个div 例如
  1. <div class="tabs"  >
  2. </div>
复制代码
然后在CSS里指定behavior为tabs,就可以拥有选项卡控件的功能了

  1. .tabs
  2. {
  3.   behavior:tabs; /*指定这是一个选项卡控件*/
  4. }
复制代码
然后在选项卡控件里添加选项卡按钮,注意按钮一定要放在CSS类名为"strip"的div容器里

  1. <div class="tabs"  >

  2.   <div class="strip" >  
  3.      <div panel="panel1" selected>选项一</div>
  4.      <div panel="panel2">选项二</div>
  5.      <div panel="panel3">选项三</div>         
  6.   </div>
  7.   
  8.   <div class="panel" name="panel1">
  9.       这是第一个选项页,其中name属性指定选项卡名字
  10.   </div>
  11.    
  12.    <div class="panel" name="panel2">
  13.       这是第二个选项页,其中name属性指定选项卡名字
  14.       <button>按钮</button>
  15.   </div>
  16.   
  17.   <div class="panel" name="panel3">
  18.       这是第三个选项页,其中name属性指定选项卡名字
  19.       <a href="tabs://http://www.baidu.com" target="_blank" title="百度">百度</a>
  20.   </div>
  21.    
  22. </div>

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

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

  1. <div class="panel"  name="panel3">
  2.           这是第三个选项页,其中name属性指定选项卡名字
  3.            <a href="tabs://http://wap.baidu.com" target="_blank" title="百度">百度一下</a>
  4. </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指定了行为(例如点哪个按钮激活对应的页面,响应事件等等),
至于外观,你就可以任意的定义了,非常灵活,可以做出各种形形色色的选项卡,
用传统控件要做到这些就比较困难了。

回复

使用道具 举报

7

主题

305

帖子

1912

积分

新手入门

积分
1912
QQ
发表于 2012-11-2 15:50:14 | 显示全部楼层

前排占座听讲。

前排占座听讲。
每天进步一点点......
回复

使用道具 举报

26

主题

104

帖子

644

积分

荣誉会员

Rank: 8Rank: 8

积分
644
发表于 2012-11-2 15:53:24 | 显示全部楼层

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

正好用到这个,学习...
回复

使用道具 举报

12

主题

176

帖子

1062

积分

四级会员

Rank: 6Rank: 6

积分
1062
QQ
发表于 2012-11-2 18:03:08 | 显示全部楼层

感谢分享,回复再看

感谢分享,回复再看
再烦也别忘微笑,再急也要注意语调!
即使是不成熟的尝试,也胜于胎死腹中的策略。
回复

使用道具 举报

9

主题

204

帖子

1301

积分

四级会员

Rank: 6Rank: 6

积分
1301
发表于 2012-11-2 20:58:06 | 显示全部楼层

这个要学习一下

这个要学习一下
回复

使用道具 举报

1

主题

6

帖子

100

积分

一级会员

Rank: 2

积分
100
发表于 2012-11-2 21:24:51 | 显示全部楼层

kk

kk
回复

使用道具 举报

16

主题

58

帖子

524

积分

培训班

积分
524
发表于 2012-11-3 19:50:01 | 显示全部楼层

看看是怎么写的?

看看是怎么写的?
回复

使用道具 举报

12

主题

679

帖子

4008

积分

荣誉会员

子非魚、安知魚之樂

Rank: 8Rank: 8

积分
4008
发表于 2012-11-4 16:20:51 | 显示全部楼层

学习下 {:victory:}

学习下
回复

使用道具 举报

1

主题

4

帖子

48

积分

新手入门

Rank: 1

积分
48
发表于 2012-11-5 01:24:18 | 显示全部楼层

好东西,看看先。{:3_41:}

好东西,看看先。
回复

使用道具 举报

7

主题

24

帖子

193

积分

一级会员

Rank: 2

积分
193
发表于 2012-11-5 11:57:39 | 显示全部楼层

学习一下

学习一下
回复

使用道具 举报

8

主题

98

帖子

716

积分

三级会员

Rank: 4

积分
716
发表于 2012-11-6 18:41:10 | 显示全部楼层

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

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

使用道具 举报

0

主题

2

帖子

11

积分

新手入门

Rank: 1

积分
11
发表于 2012-11-7 11:22:40 | 显示全部楼层

这个是好东西勒

这个是好东西勒
回复

使用道具 举报

0

主题

42

帖子

363

积分

二级会员

Rank: 3Rank: 3

积分
363
发表于 2012-11-7 13:30:07 | 显示全部楼层

学习,看看

学习,看看
回复

使用道具 举报

1

主题

7

帖子

54

积分

一级会员

Rank: 2

积分
54
发表于 2012-11-8 17:50:07 | 显示全部楼层

我看看

我看看
回复

使用道具 举报

6

主题

66

帖子

519

积分

荣誉会员

Rank: 8Rank: 8

积分
519
发表于 2012-11-9 15:26:59 | 显示全部楼层

学习,谢谢

学习,谢谢
回复

使用道具 举报

16

主题

186

帖子

1403

积分

四级会员

Rank: 6Rank: 6

积分
1403
发表于 2012-11-10 13:25:20 | 显示全部楼层

{:3_48:}

回复

使用道具 举报

5

主题

74

帖子

465

积分

二级会员

Rank: 3Rank: 3

积分
465
发表于 2012-11-10 16:47:24 | 显示全部楼层

简直太强大了

简直太强大了
回复

使用道具 举报

0

主题

7

帖子

124

积分

一级会员

Rank: 2

积分
124
发表于 2012-11-15 17:06:24 | 显示全部楼层

谢谢分享

谢谢分享
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-10-22 04:35 , Processed in 0.078125 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表