aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步，快速开始

搜索
aardio 官方社区»首页 › 标准库、扩展库 › htmlayout/sciter › 请教如何响应弹出层popup的树形控件tree的双击事件 ...
返回列表 发新帖
查看: 13272|回复: 3

请教如何响应弹出层popup的树形控件tree的双击事件

[复制链接]
daheian

8

主题

32

回帖

384

积分

培训班

积分
384
发表于 2018-4-6 12:28:33 | 显示全部楼层 |阅读模式
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form(text="aardio form";right=400;bottom=184)
  4. winform.add(
  5. custom={cls="custom";text="custom";left=20;top=70;right=369;bottom=94;db=1;dl=1;dr=1;dt=1;edge=1;z=1}
  6. )
  7. /*}}*/

  9. import web.layout;
  10. import web.layout.behavior.dropdown;

  12. namespace web.layout.behavior.mouse{
  13.     //namespace sinking{
  14.         onMouseDblClick = function( ltTarget,ltOwner,x,y,ltMouseParams ) {
  15.                         import console
  16.                         console.dumpJson(ltTarget.innerHTML)
  17.                 }
  18.    // }
  19. }

  21. var wbLayout = web.layout(winform.custom);
  22. wbLayout.html = /**
  23. <!doctype html>
  24. <html>
  25. <body>
  26. <select type="droptree">
  27. <caption>hahahahha</caption><div role="dropdown"></div>
  28. <popup>
  29. <widget #dd type="tree" treelines>
  30.         <option id="alltype" expanded>所有类型
  31.         <option>新类型</option>
  32.         </option>
  33.         <option id="alltype" expanded>所有类型
  34.         <option>新类型
  35.         <option id="alltype" expanded>所有类型
  36.         <option>新类型</option>
  37.         </option>
  38.         <option id="alltype" expanded>所有类型
  39.         <option>新类型</option>
  40.         </option>
  41.         <option id="alltype" expanded>所有类型
  42.         <option>新类型</option>
  43.         </option>
  44.         <option id="alltype" expanded>所有类型
  45.         <option>新类型</option>
  46.         </option>
  47.         </option>
  48.         </option>
  49.         <option id="alltype" expanded>所有类型
  50.         <option>新类型</option>
  51.         </option>
  52.        
  53. </widget>
  54. </popup>
  55. </select>
  56. </body>
  57. </html>
  58. **/

  60. wbLayout.css = /**
  61. html,body{ height:100%; margin:0px; }
  62. select[type=droptree]{
  63.         font:system;
  64.         padding:0;
  65.         flow:horizontal;  /* caption, button*/
  66.         background-repeat:stretch;
  67.         background-image:url(theme:edit-normal);
  68.         width: *;
  69.         height: *;
  70.         overflow-x:hidden;
  71.         behavior:dropdown;
  72. }
  73. select[type=droptree]:disabled
  74. {
  75.         background-image:url(theme:edit-disabled);
  76.         color:graytext;
  77. }
  78. select[type=droptree] > caption{
  79.         padding:1px;
  80.         margin:2px 1px 2px 2px;
  81.         overflow-x:hidden;
  82.         overflow-x:hidden;
  83.         width:100%%;
  84.         height:100%%;
  85.         min-height:1em;
  86.         min-width: system-scrollbar-width;
  87.         vertical-align:middle;
  88.         white-space: nowrap;
  89.         color:windowtext;
  90. }
  91. select[type=droptree]:focus > caption
  92. {
  93.         background-color:highlight; color:highlighttext;
  94. }
  95. select[type=droptree] > popup
  96. {
  97.         overflow-x:hidden;
  98.         overflow-y:auto;
  99.         padding:0px;
  100.         display:block;
  101.         visibility:collapse;/* invisible normally */
  102.         border:none;
  103.         width: *;
  104.         min-width: max-intrinsic;
  105.         height: min-intrinsic;
  106.         transition:window-slide-ttb;
  107. }

  109. select[type=droptree] > popup:popup
  110. {
  111.     width: *;
  112.     min-width: max-intrinsic;
  113.     height:min-intrinsic;
  114.         visibility:visible;
  115. }

  117. select[type=droptree] > popup #dd{
  118.         width: *;
  119.         height: max-intrinsic;
  120.         behavior:~ mouse;
  121. }

  123. select[type=droptree] div[role=dropdown]
  124. {
  125.     display:inline-block;
  126.         width        :system-scrollbar-width;
  127.         height        :100%%;
  128.         margin        :system-border-width; /*1px 1px 1px 0px;*/
  129.         padding        :0;
  130.         background-repeat        :stretch;
  131.         background-image        :url(theme:combobox-button-normal);
  132.         /*behavior            :clickable; */
  133.         white-space        :nowrap;
  134. }
  135. select[type=droptree] div[role=dropdown]:hover
  136. {
  137.         transition :none;
  138.         background-image:url(theme:combobox-button-hover);
  139. }

  141. select[type=droptree] div[role=dropdown]:active
  142. {
  143.         background-image:url(theme:combobox-button-pressed);
  144. }

  146. select[type=droptree]:disabled div[role=dropdown]
  147. {
  148.         background-image:url(theme:combobox-button-disabled);
  149.         color:graytext;
  150. }
  151. **/

  153. import console;
  154. var eleTree = wbLayout.querySelector("#dd");

  156. eleTree.onMouseDblClick = function( ltTarget,ltOwner,x,y,ltMouseParams ) {
  157.         console.log(ltTarget.innerHTML)
  158. }

  160. eleTree.attachEventHandler();

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


在单独的tree控件里 ，可以响应到鼠标双击事件，但是放在弹出层中后，试了这几种方法，都不起作用。
回复

举报

快手风雨

14

主题

28

回帖

422

积分

培训班

积分
422
发表于 2018-4-6 17:15:51 | 显示全部楼层
  1.     import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form(text="aardio form";right=400;bottom=184)
  4. winform.add(
  5. custom={cls="custom";text="custom";left=20;top=70;right=369;bottom=94;db=1;dl=1;dr=1;dt=1;edge=1;z=1}
  6. )
  7. /*}}*/

  9. import web.layout;
  10.     import web.layout.behavior.dropdown;

  12.     namespace web.layout.behavior.mouse{
  13.         //namespace sinking{
  14.             onMouseDblClick = function( ltTarget,ltOwner,x,y,ltMouseParams ) {
  15.                             import console
  16.                             console.dumpJson(ltTarget.innerHTML)
  17.                     }
  18.        // }
  19.     }

  21.     var wbLayout = web.layout(winform.custom);
  22.     wbLayout.html = /**
  23.     <!doctype html>
  24.     <html>
  25.     <body>
  26.     <select type="droptree">
  27.     <caption>hahahahha</caption><div role="dropdown"></div>
  28.     <popup>
  29.     <widget #dd type="tree" treelines>
  30.             <option id="alltype" expanded>所有类型
  31.             <option>新类型</option>
  32.             </option>
  33.             <option id="alltype" expanded>所有类型
  34.             <option>新类型
  35.             <option id="alltype" expanded>所有类型
  36.             <option>新类型</option>
  37.             </option>
  38.             <option id="alltype" expanded>所有类型
  39.             <option>新类型</option>
  40.             </option>
  41.             <option id="alltype" expanded>所有类型
  42.             <option>新类型</option>
  43.             </option>
  44.             <option id="alltype" expanded>所有类型
  45.             <option>新类型</option>
  46.             </option>
  47.             </option>
  48.             </option>
  49.             <option id="alltype" expanded>所有类型
  50.             <option>新类型</option>
  51.             </option>
  52.            
  53.     </widget>
  54.     </popup>
  55.     </select>
  56.     </body>
  57.     </html>
  58.     **/

  60.     wbLayout.css = /**
  61.     html,body{ height:100%; margin:0px; }
  62.     select[type=droptree]{
  63.             font:system;
  64.             padding:0;
  65.             flow:horizontal;  /* caption, button*/
  66.             background-repeat:stretch;
  67.             background-image:url(theme:edit-normal);
  68.             width: *;
  69.             height: *;
  70.             overflow-x:hidden;
  71.             behavior:dropdown;
  72.     }
  73.     select[type=droptree]:disabled
  74.     {
  75.             background-image:url(theme:edit-disabled);
  76.             color:graytext;
  77.     }
  78.     select[type=droptree] > caption{
  79.             padding:1px;
  80.             margin:2px 1px 2px 2px;
  81.             overflow-x:hidden;
  82.             overflow-x:hidden;
  83.             width:100%%;
  84.             height:100%%;
  85.             min-height:1em;
  86.             min-width: system-scrollbar-width;
  87.             vertical-align:middle;
  88.             white-space: nowrap;
  89.             color:windowtext;
  90.     }
  91.     select[type=droptree]:focus > caption
  92.     {
  93.             background-color:highlight; color:highlighttext;
  94.     }
  95.     select[type=droptree] > popup
  96.     {
  97.             overflow-x:hidden;
  98.             overflow-y:auto;
  99.             padding:0px;
  100.             display:block;
  101.             visibility:collapse;/* invisible normally */
  102.             border:none;
  103.             width: *;
  104.             min-width: max-intrinsic;
  105.             height: min-intrinsic;
  106.             transition:window-slide-ttb;
  107.     }

  109.     select[type=droptree] > popup:popup
  110.     {
  111.         width: *;
  112.         min-width: max-intrinsic;
  113.         height:min-intrinsic;
  114.             visibility:visible;
  115.     }

  117.     select[type=droptree] > popup #dd{
  118.             width: *;
  119.             height: max-intrinsic;
  120.             behavior:~ mouse;
  121.     }

  123.     select[type=droptree] div[role=dropdown]
  124.     {
  125.         display:inline-block;
  126.             width        :system-scrollbar-width;
  127.             height        :100%%;
  128.             margin        :system-border-width; /*1px 1px 1px 0px;*/
  129.             padding        :0;
  130.             background-repeat        :stretch;
  131.             background-image        :url(theme:combobox-button-normal);
  132.             /*behavior            :clickable; */
  133.             white-space        :nowrap;
  134.     }
  135.     select[type=droptree] div[role=dropdown]:hover
  136.     {
  137.             transition :none;
  138.             background-image:url(theme:combobox-button-hover);
  139.     }

  141.     select[type=droptree] div[role=dropdown]:active
  142.     {
  143.             background-image:url(theme:combobox-button-pressed);
  144.     }

  146.     select[type=droptree]:disabled div[role=dropdown]
  147.     {
  148.             background-image:url(theme:combobox-button-disabled);
  149.             color:graytext;
  150.     }
  151.     **/

  153.     import console;   
  154.         var eleTree=wbLayout.getEle("dd")
  155.         eleTree.onSelectSelectionChanged = function (ltTarget,ltEle,reason,behaviorParams) {       
  156.                 var txt=ltEle.getValueObject().value;
  157.                 console.log(txt)               
  158.         }
  159.                
  160.         eleTree.attachEventHandler()

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

举报

daheian

8

主题

32

回帖

384

积分

培训班

积分
384
 楼主| 发表于 2018-4-6 17:37:23 | 显示全部楼层
本帖最后由 daheian 于 2018-4-6 19:02 编辑
快手风雨 发表于 2018-4-6 17:15


感谢您的回复，选项被更改这个是可以响应的，我想问的是怎么响应选项的双击事件 ？
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2025-1-19 03:53 , Processed in 0.058540 second(s), 22 queries .

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

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