搜索
aardio官方社区 门户 查看主题

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

发布者: daheian | 发布时间: 2018-4-6 12:28| 查看数: 1335| 评论数: 3|帖子模式

  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. /*}}*/

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

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

  18. var wbLayout = web.layout(winform.custom);
  19. wbLayout.html = /**
  20. <!doctype html>
  21. <html>
  22. <body>
  23. <select type="droptree">
  24. <caption>hahahahha</caption><div role="dropdown"></div>
  25. <popup>
  26. <widget #dd type="tree" treelines>
  27.         <option id="alltype" expanded>所有类型
  28.         <option>新类型</option>
  29.         </option>
  30.         <option id="alltype" expanded>所有类型
  31.         <option>新类型
  32.         <option id="alltype" expanded>所有类型
  33.         <option>新类型</option>
  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>
  45.         </option>
  46.         <option id="alltype" expanded>所有类型
  47.         <option>新类型</option>
  48.         </option>
  49.        
  50. </widget>
  51. </popup>
  52. </select>
  53. </body>
  54. </html>
  55. **/

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

  104. select[type=droptree] > popup:popup
  105. {
  106.     width: *;
  107.     min-width: max-intrinsic;
  108.     height:min-intrinsic;
  109.         visibility:visible;
  110. }

  111. select[type=droptree] > popup #dd{
  112.         width: *;
  113.         height: max-intrinsic;
  114.         behavior:~ mouse;
  115. }

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

  133. select[type=droptree] div[role=dropdown]:active
  134. {
  135.         background-image:url(theme:combobox-button-pressed);
  136. }

  137. select[type=droptree]:disabled div[role=dropdown]
  138. {
  139.         background-image:url(theme:combobox-button-disabled);
  140.         color:graytext;
  141. }
  142. **/

  143. import console;
  144. var eleTree = wbLayout.querySelector("#dd");

  145. eleTree.onMouseDblClick = function( ltTarget,ltOwner,x,y,ltMouseParams ) {
  146.         console.log(ltTarget.innerHTML)
  147. }

  148. eleTree.attachEventHandler();

  149. winform.show()
  150. win.loopMessage();
复制代码


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

最新评论

快手风雨 发表于 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. /*}}*/

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

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

  18.     var wbLayout = web.layout(winform.custom);
  19.     wbLayout.html = /**
  20.     <!doctype html>
  21.     <html>
  22.     <body>
  23.     <select type="droptree">
  24.     <caption>hahahahha</caption><div role="dropdown"></div>
  25.     <popup>
  26.     <widget #dd type="tree" treelines>
  27.             <option id="alltype" expanded>所有类型
  28.             <option>新类型</option>
  29.             </option>
  30.             <option id="alltype" expanded>所有类型
  31.             <option>新类型
  32.             <option id="alltype" expanded>所有类型
  33.             <option>新类型</option>
  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>
  45.             </option>
  46.             <option id="alltype" expanded>所有类型
  47.             <option>新类型</option>
  48.             </option>
  49.            
  50.     </widget>
  51.     </popup>
  52.     </select>
  53.     </body>
  54.     </html>
  55.     **/

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

  104.     select[type=droptree] > popup:popup
  105.     {
  106.         width: *;
  107.         min-width: max-intrinsic;
  108.         height:min-intrinsic;
  109.             visibility:visible;
  110.     }

  111.     select[type=droptree] > popup #dd{
  112.             width: *;
  113.             height: max-intrinsic;
  114.             behavior:~ mouse;
  115.     }

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

  133.     select[type=droptree] div[role=dropdown]:active
  134.     {
  135.             background-image:url(theme:combobox-button-pressed);
  136.     }

  137.     select[type=droptree]:disabled div[role=dropdown]
  138.     {
  139.             background-image:url(theme:combobox-button-disabled);
  140.             color:graytext;
  141.     }
  142.     **/

  143.     import console;   
  144.         var eleTree=wbLayout.getEle("dd")
  145.         eleTree.onSelectSelectionChanged = function (ltTarget,ltEle,reason,behaviorParams) {       
  146.                 var txt=ltEle.getValueObject().value;
  147.                 console.log(txt)               
  148.         }
  149.                
  150.         eleTree.attachEventHandler()

  151.     winform.show()
  152.     win.loopMessage();
复制代码
daheian 发表于 2018-4-6 17:37:23
本帖最后由 daheian 于 2018-4-6 19:02 编辑


感谢您的回复,选项被更改这个是可以响应的,我想问的是怎么响应选项的双击事件 ?
Jacen.He 发表于 2018-4-7 00:03:30
能看到一个发完整代码的提问帖子,很不错。
代码还可以尽量再精简一下。

HTMLayout里并不是任何时候都能触发鼠标单击双击事件,
不支持的要添加clickable,这里加了clickable也是不行的。

但是换一个思路,可以响应onMouseUp事件,自己检测是否双击就可以了,代码如下:
import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=400;bottom=184)
winform.add(
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}
)
/*}}*/

import web.layout;
import web.layout.behavior.dropdown;

var wbLayout = web.layout(winform.custom);
import web.layout.debug;
wbLayout.attachEventHandler( web.layout.debug );

wbLayout.html =
/**
<!doctype html>
<html>
<body>
<select type="droptree">
<caption>hahahahha</caption><div role="dropdown"></div>
<popup>
<widget #dd type="tree" treelines >
  <option id="alltype" expanded>所有类型
  <option>新类型</option>
  </option>
  <option id="alltype" expanded>所有类型
  <option>新类型
</widget>
</popup>
</select>
</body>
</html>
**/


wbLayout.css =
/**
html,body{ height:100%; margin:0px; }
select[type=droptree]{
  font:system;
  padding:0;
  flow:horizontal;/* caption, button*/
  background-repeat:stretch;
  background-image:url(theme:edit-normal);
  width: *;
  height: *;
  overflow-x:hidden;
  behavior:dropdown;
}

select[type=droptree] > caption{
  padding:1px;
  margin:2px 1px 2px 2px;
  overflow-x:hidden;
  overflow-x:hidden;
  width:100%%;
  height:100%%;
  min-height:1em;
  min-width: system-scrollbar-width;
  vertical-align:middle;
  white-space: nowrap;
  color:windowtext;
}

select[type=droptree] > popup
{
  overflow-x:hidden;
  overflow-y:auto;
  padding:0px;
  display:block;
  visibility:collapse;/* invisible normally */
  border:none;
  width: *;
  min-width: max-intrinsic;
  height: min-intrinsic;
  transition:window-slide-ttb;
}

select[type=droptree] > popup:popup
{
width: *;
min-width: max-intrinsic;
height:min-intrinsic;
  visibility:visible;
}

select[type=droptree] > popup #dd{
  width: *;
  height: max-intrinsic;
  behavior:~ mouse;
}

select[type=droptree] div[role=dropdown]
{
display:inline-block;
  width:system-scrollbar-width;
  height:100%%;
  margin:system-border-width; /*1px 1px 1px 0px;*/
  padding:0;
  background-repeat:stretch;
  background-image:url(theme:combobox-button-normal);
  white-space:nowrap;
}

**/


var eleTree = wbLayout.querySelector("#dd");
eleTree.sinking = {
    onMouseUp =
function( ltTarget,ltOwner,x,y,ltMouseParams ) {
        
if( eleTree[["lastClick"]] ){
            
if( ..time.tick() - eleTree[["lastClick"]] < ::User32.GetDoubleClickTime() ){
                winform.msgbox(
"双击")
                eleTree[[
"lastClick"]] = null;
               
return;
            }  
        }
        
        eleTree[[
"lastClick"]] = ..time.tick();
    }
}
eleTree.attachEventHandler();

winform.show();
win.loopMessage();

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

GMT+8, 2018-7-17 00:06 , Processed in 0.046875 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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