搜索
查看: 3042|回复: 2

[源码分享] 用HTMLayout写一个拆分按钮

[复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 2014-2-25 21:19:30 | 显示全部楼层 |阅读模式

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form(text="HTMLayout 拆分按钮";right=599;bottom=399)
  4. winform.add()
  5. /*}}*/

  6. import web.layout;
  7. var wbLayout = web.layout( winform );
  8.   
  9. wbLayout.html = /**  
  10. <style>

  11. @set split-button{
  12.         :root{
  13.                 background-image:url(theme:toolbar-button-hover);  
  14.                 background-repeat:stretch;
  15.                 flow: horizontal;
  16.                 height:min-intrinsic;
  17.                 width:min-intrinsic;
  18.                 font:system;
  19.                 margin:2px;
  20.         }
  21.         :root:disabled{
  22.                 background-image:url(theme:toolbar-button-disabled);  
  23.         }
  24.         :root > caption{
  25.                 behavior: clickable;
  26.                 background-image:url(theme:toolbar-split-button-normal);
  27.                 background-repeat:stretch;
  28.                 color:windowtext;
  29.                 cursor:default;
  30.             white-space: nowrap;
  31.                 padding:4px 8px;
  32.                 width:*;
  33.                 height:*;
  34.         }
  35.         :root > .dropdown {
  36.                 behavior: clickable popup-menu;
  37.                 background-image:url(theme:toolbar-split-dd-button-normal);
  38.                 background-repeat:stretch;  
  39.                 width:15px;
  40.                 height:*;
  41.         }  
  42.         :root:hover > caption{
  43.                 background-image:url(theme:toolbar-split-button-hover);  
  44.         }
  45.         :root:hover > .dropdown {
  46.                 background-image:url(theme:toolbar-split-dd-button-hover);
  47.         }
  48.         :root > caption:active {
  49.                 background-image:url(theme:toolbar-split-button-pressed);
  50.         }
  51.         :root .dropdown:active  {
  52.                 background-image:url(theme:toolbar-split-dd-button-pressed);
  53.         }
  54.         :root:checked > caption {
  55.                 background-image:url(theme:toolbar-split-button-checked);
  56.         }
  57.         :root:checked .dropdown  {
  58.                 background-image:url(theme:toolbar-split-dd-button-checked);
  59.         }
  60.         :root:checked:hover > caption {
  61.                 background-image:url(theme:toolbar-split-button-checked-hover);
  62.         }
  63.         :root:checked:hover .dropdown  {
  64.                 background-image:url(theme:toolbar-split-dd-button-checked-hover);
  65.         }
  66. }
  67. widget[type="split-button"],
  68. input[type="split-button"]{  
  69.         style-set:split-button;
  70. }
  71. </style>
  72.   
  73. <widget type="split-button" >
  74.         <caption #split-button>拆分按钮</caption>
  75.         <widget .dropdown>
  76.                 <menu .popup>
  77.                           <li>菜单项一</li>
  78.                           <li>菜单项二</li>
  79.                   </menu>
  80.           </widget>
  81. </widget>   
  82. **/

  83. wbLayout.onButtonClick ={
  84.         ["split-button"] = function (ltTarget,ltEle,reason,behaviorParams) {
  85.                 wbLayout.documentElement.insertAdjacentHTML("beforeEnd","点了拆分按钮")
  86.         }
  87. }

  88. wbLayout.onMenuItemClick = function (ltTarget,ltEle,reason,behaviorParams) {
  89.         wbLayout.documentElement.insertAdjacentHTML("beforeEnd","点了菜单:" + ltTarget.innerText )
  90. }

  91. winform.show()
  92. win.loopMessage();
复制代码


一些知识点:

style-set:split-button;
这里的split-button实际上是一个CSS混入类。
参考教程:HTMLayout中使用 style-set 重用CSS样式

@set split-button{}
定义混入类,CSS里特殊语句都会以@字符开始,在混入类里使用:root表示自己( 实 :root表示自己在很多地方都有用到 )

background-image:url(theme:toolbar-button-hover);
当前主题中取到的控件图像,参考aardio范例->HTMLayout->界面预览工具->CSS扩展->theme-images.htm

background-repeat:stretch;
拉伸图像,theme返回的图标都是很小的背景图,不位伸看不到效果。

flow: horizontal;
使该容器内的块节点(display:block)改变默认的垂直布局为水平布局。
请参考教程:HTMLayout flow布局样式

height:min-intrinsic;
min-intrinsic指的是节点包含内容的实际大小。也就是文字多大按钮多大。

width:*;
这个写法实际上等价于 width:100%%; 也就是撑满可用的剩余空间

padding:4px 8px;
这是指的按钮内,文外周围的内边距,
padding的值实际上是四个值,依顺时针顺序为:上 右 下 左
如果省略后面两个值则为:上(下) 右(左)

behavior: clickable;
该behavior使节点可以响应onButtonClick事件
请参考:HTMLayout内建behavior列表

.dropdown {
    behavior: clickable popup-menu;
}

使该节点可以响应onButtonClick事件,而且点击该按钮可以弹出子菜单。
请参考教程:使用popup-menu弹出节点

注意看HTML,节点内部有一个menu节点表示菜单。
菜单指定了.popup样式,.popup是一个默认样式,指定了 display:none 也就是默认不显示。
<widget .dropdown>
        <menu .popup>
            <li>菜单项一</li>
            <li>菜单项二</li>
        </menu>
</widget>


下面一个小示例,把拆分按钮放到水平布局的工具条里:

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form(text="HTMLayout 工具条";right=599;bottom=399)
  4. winform.add()
  5. /*}}*/

  6. import web.layout;
  7. var wbLayout = web.layout( winform );
  8.   
  9. wbLayout.html = /**   
  10. <div class="toolbar">
  11.         <widget type="button" >按钮</widget>
  12.         <widget type="button" >按钮</widget>
  13.                                        
  14.         <widget type="split-button" >
  15.                 <caption #split-button>拆分按钮</caption>
  16.                 <widget .dropdown>
  17.                         <menu .popup>
  18.                                   <li>菜单项一</li>
  19.                                   <li>菜单项二</li>
  20.                           </menu>
  21.                   </widget>
  22.         </widget>  
  23. </div>
  24. **/

  25. wbLayout.css = /**

  26. .toolbar {
  27.         flow:horizontal; /*工具条要水平流式布局,子节点很一律使用widget*/
  28.         float:left;/*向左浮动*/
  29.         width:max-intrinsic; /*宽度为实际内容宽度*/
  30.         height:30px;
  31.         overflow:hidden;
  32.         margin:4px 0px 0px 9px;
  33. }

  34. .toolbar widget[type=button]
  35. {
  36.     width:max-intrinsic;
  37.         height:16px;
  38.     padding:3px 7px;
  39.         margin:1px;/*这个值要与split-button一致,显示在同一高度*/
  40.     border:1px solid transparent;
  41.         white-space:nowrap;
  42.         font:system;
  43.         font-size: 12px;
  44.         line-height:16px;  
  45.         color:#444444;
  46. }

  47. /*如果按钮中还要放小图标*/
  48. .toolbar widget[type=button] img{
  49.         vertical-align:middle; /*垂直居中*/
  50.         margin:0 3px 0 0;
  51. }
  52. .toolbar widget[type=button]:disabled img{
  53.     foreground-image-transformation:colorize(graytext);  
  54. }

  55. @set split-button{
  56.         :root{
  57.                 background-image:url(theme:toolbar-button-hover);  
  58.                 background-repeat:stretch;
  59.                 flow: horizontal;
  60.                 height:min-intrinsic;
  61.                 width:min-intrinsic;
  62.                 font:system;
  63.                 margin:1px;
  64.         }
  65.         :root:disabled{
  66.                 background-image:url(theme:toolbar-button-disabled);  
  67.         }
  68.         :root > caption{
  69.                 behavior: clickable;
  70.                 background-image:url(theme:toolbar-split-button-normal);
  71.                 background-repeat:stretch;
  72.                 color:windowtext;
  73.                 cursor:default;
  74.             white-space: nowrap;
  75.                 padding:4px 8px;
  76.                 width:*;
  77.                 height:*;
  78.         }
  79.         :root > .dropdown {
  80.                 behavior: clickable popup-menu;
  81.                 background-image:url(theme:toolbar-split-dd-button-normal);
  82.                 background-repeat:stretch;  
  83.                 width:15px;
  84.                 height:*;
  85.         }  
  86.         :root:hover > caption{
  87.                 background-image:url(theme:toolbar-split-button-hover);  
  88.         }
  89.         :root:hover > .dropdown {
  90.                 background-image:url(theme:toolbar-split-dd-button-hover);
  91.         }
  92.         :root > caption:active {
  93.                 background-image:url(theme:toolbar-split-button-pressed);
  94.         }
  95.         :root .dropdown:active  {
  96.                 background-image:url(theme:toolbar-split-dd-button-pressed);
  97.         }
  98.         :root:checked > caption {
  99.                 background-image:url(theme:toolbar-split-button-checked);
  100.         }
  101.         :root:checked .dropdown  {
  102.                 background-image:url(theme:toolbar-split-dd-button-checked);
  103.         }
  104.         :root:checked:hover > caption {
  105.                 background-image:url(theme:toolbar-split-button-checked-hover);
  106.         }
  107.         :root:checked:hover .dropdown  {
  108.                 background-image:url(theme:toolbar-split-dd-button-checked-hover);
  109.         }
  110. }
  111. widget[type="split-button"],
  112. input[type="split-button"]{  
  113.         style-set:split-button;
  114. }
  115. </style>
  116.   
  117. **/

  118. wbLayout.onButtonClick ={
  119.         ["split-button"] = function (ltTarget,ltEle,reason,behaviorParams) {
  120.                 wbLayout.documentElement.insertAdjacentHTML("beforeEnd","点了拆分按钮")
  121.         }
  122. }

  123. wbLayout.onMenuItemClick = function (ltTarget,ltEle,reason,behaviorParams) {
  124.         wbLayout.documentElement.insertAdjacentHTML("beforeEnd","点了菜单:" + ltTarget.innerText )
  125. }

  126. winform.show()
  127. win.loopMessage();
复制代码

回复

使用道具 举报

0

主题

5

帖子

27

积分

新手入门

Rank: 1

积分
27
发表于 2014-2-28 10:48:28 | 显示全部楼层

收藏一下,以后学习

收藏一下,以后学习
回复

使用道具 举报

12

主题

78

帖子

710

积分

培训班

积分
710
QQ
发表于 2014-3-1 18:03:02 | 显示全部楼层

谢谢版主的好源码教程。

谢谢版主的好源码教程。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-5-28 15:31 , Processed in 0.062500 second(s), 20 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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