aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步，快速开始

搜索
aardio 官方社区»首页 › 标准库、扩展库 › htmlayout/sciter › HTMLayout 使用 popup 弹出节点
返回列表 发新帖
查看: 39583|回复: 8

HTMLayout 使用 popup 弹出节点

[复制链接]
编程

42

主题

625

回帖

3755

积分

版主

积分
3755
发表于 2013-3-31 12:22:52 | 显示全部楼层 |阅读模式
<popup>
HTMLayout扩展的HTML标记 - block样式显示的块标记( 类似<div> ),
用于定义可在页面上弹出显示的节点, 默认的popup是隐藏不显示的。
一个常用的功能是使用<popup> 显示复杂些的工具提示(tooltips)

HTML元素的title属性也会自动创建popup节点用于显示默认的提示信息：

  2. <div title="这是提示" >鼠标放在这里</div>  
复制代码
修改这种内置popup节点的样式可使用如下CSS:

  2. _service > popup[role=tooltip]{

  4. }
复制代码
所有浏览器引擎自动创建的节点可以在CSS选择器指定父节点为 _service ，而 popup[role=tooltip] 匹配用于工具提示的popup（这些提示节点的HTML属性中指定了 role="tooltip"）.

下面看一个完整的示例：

  2. import win.ui;
  3. /*DSG{{*/
  4. var winform = win.form(text="HTMLayout - 气泡提示框 ";right=599;bottom=399)
  5. /*}}*/

  7. import web.layout;
  8. var wbLayout = web.layout( winform )

  10. wbLayout.html = /**
  11.         <span title="这是一个漂亮的气泡提示框" style="margin:20px;">鼠标停在这里试试</span>         
  12. **/

  14. wbLayout.css = /**
  15. _service > popup[role=tooltip]
  16.   {
  17.     border:0;
  18.     width:max-intrinsic;   
  19.     font: 11pt "Comic Sans MS", Verdana;  
  20.     font-weight:normal;
  21.     background-color:transparent;
  22.     background-repeat: expand;
  23.     padding:71px 25px 25px 16px;
  24.     background-position:80px 33px 33px 74px; /*top right bottom left offsets*/
  25.     background-image:url(data:image/png;base64,
  26. iVBORw0KGgoAAAANSUhEUgAAAKsAAACoCAYAAACffB63AAAACXBIWXMAAA7DAAAO
  27. wwHHb6hkAAAXM0lEQVR4nOydCZAc1XnH/93TPdfOzsIKHUhCSAgsSlicwi47Tigo
  28. 2yQC20CMcQgmjiFgqFRSGMeVFI4NSShjCBWcKpePFIbCVCBAwATLmFiAAMsCITkS
  29. KgGSVtLqWGmlvWbn7vPlvZl5uz2jnt3Ze3vn+5mn6e3tGb21fvv1O79WMAKMXR9G
  30. r76m9IWVr5x1epTFLx0a6X0EMRUo3i9Y9u8WAcaNcIwrwJyPwTHnw7X5N1zuqCmu
  31. KL+Kc669nR+/BstYr5y75bUZqj/RRJRkZeyuGJz4g3Cs22AXw8j3DmLwUBi5EzHY
  32. BR5Vc2VhFRUIJwBVByLJAejxOBc7wq/ZifzgrcqlR7bM9A9EzF3Ksg587VnE2q/B
  33. 8R0ODv8uUpKz0bdH2wC9JQMzrZkuuzTyqez7KIVggphctNKfXe/8MYyMjfSh6Nje
  34. zp0spmD1p1pTXUC6gD/gJ/fx4vDiVgqJS0wKJVnN/bseyA/iX2wD6dgpSMZ4sFS1
  35. 0d+c7ga6d6HQewBhvRWd/7EZG/npOMqyimJXijgmaYkJMdTB6vkpPm8auI83US90
  36. uF6KgrQWBVNDCPGmaoJx3VyXt2pNDOZ6EC6mEeV9Lc0qIt+TwdP3b8Uj244ji2pJ
  37. zUqxKl+TsMS4UWpPvH8/PsrVWsflXMvV+ghX7DR+0RKH6+Y6sPJF7DV4BO7P44N9
  38. fXjvh1vwdmcaRZRFFLd9KauQVJw3KsWsnCeIcXGSrCg3DcK8xColXnnVeQnxolZK
  39. LbWyCkHzlVKofG2BoisxTvxapkJg1fMqBBXyRirHXsGZ5z3ya1FEFHVqPsfvF4Mg
  40. GsZPVhkhmedYREohm4ysfuLJ62Vk9XaqaFSAmDAjySrbnWrlnLcZoOBkYf3arPLW
  41. L4exCGLc+MkqhbMqXwsJ7cq1Q23Wr3/13MXnn9e2dMni+IrWpH56TFfaQ6rCWuJY
  42. Gg2rbXoILBJRmK6xA5FwqDeiKyykunv5x/XDtrbDdjuUlRsGp+WnJOYE9dqR8pav
  43. yfKLp65ac86q5J9wKS8O67hIAVsAMZ7FWKkwM5dS4bqa6ughxdVCsOxwOBzSdNUI
  44. KcxRdS0CVWstTdsOl938M7bAdd6AZf1aWbW5a9p+ciJwjNjpyWS+uUBz7dsV5n7N
  45. ta3lruPALQyk3VSXpuR74ij285s97+w7hXK7gP+h8rgbqhRxLM8Pocf5N3lfLZrk
  46. XbZT0wi3qFBDCSE+s51NLnMePbB/4D/PWddhTOlPTgQOX1kZuzcB27mPW3gHXDuG
  47. 1IFB1r2jjaUOcaGKMpgOf4gy/Koq1ecaQosC8XaXxeZnlZCWZI59tJA3v9uy9oPH
  48. Ud3ZI5qYk5Rixl1roIRfhKqfie7tRRx6Mw4jPX01CvMgG1/IpQ0lLMN4/Zn1mZtv
  49. ure/F+V2M3XUmpjq9awnbjob0cQ73AcdH77YitzxmaoXbyIkXOgtjlUs7PzsN9JX
  50. bXwXYimYd60BSdtkVM9EmYOPINcTw3tPzqyoAiOr8rroISN78Y+/jr/iZ1pQnk0T
  51. K8PEJIXo+NFEQxNRLWu26wocezc0vIVlhmEuBrvdtF7EH/GvEijLKoWV475Ek1A9
  52. zpo53M179/NQjlwzjstv9gMHET6eKTUBRGQVgorFMd5ZNDlrRsxxqiNruu+nVjqX
  53. tI2Z/8cXw7D7N6GQPY7w05vwS1QvqhFF/EIJeak50CRUR9Y+9yFTxRou642qhlzL
  54. PLSoM3CjzfK+/wf/i7xdQPz3fXj4399CB4YX0ghE50qukRWv4pduxn/BiKnFNyL1
  55. Po57HAvfZjbUaCvcltMQ1SJTX5nBLqBzGwrpw4iZDnpfOYLvP/QutnoukSu6sp4i
  56. GtiiaUCyznHq3j63/jNWzkvg27qKL/P4FeUxOBs/FbFoEqGI2OA6CRFXTH7l+nhA
  57. PwSjvxPMKSJqmujf1YNnH9yGFw+mS+tgvZCsTcxIbT3RRIjdcTkWX78Wf8rFXZcM
  58. 4xNcF1V0fPgNOR+OwwlHEY20Qg9p5YmoIZhnyokfGBl+zza4Xf0oFrJwjAFojomI
  59. aJtaNjI9OWz9v6PY8MA7eLto+46hygU1QsxcpcjF3XL9LDGHGUlWueh6aMfA6W1I
  60. 3nkZLl69EGsWJnFeXMfSuIYz+IfEhqZg3craFu9rZcJUvBo2ennpH8ih41AKu7Z0
  61. 4cMndmD/CPWoXbIoZBURV4oqt8zQdOwcZyRZxffkFhcRM2OVV9F61THcEw/Na0Hk
  62. xrU4iznlz4uFEVlxKpbsPFaRkMe8nAHjie042GC9ahdyezcgFmsKRdUmYbQhH9HL
  63. FkIKMSOVIre4yPMhVO/NkkV+tt9CbQHzvHqLnP+v3c4tev0yispNiBZom3fTMFp2
  64. ADlE5I104mshjIyuct1rrbBy7xVQf2eBn6ReWeU6AMtTvFu7SdQmYiyD6TKCytu/
  65. LFMtq+059kpKC1majLHO/Hh3vPqVk2T93JXLWtd9dsmKpUtiy2O60ppMhpdrKmtV
  66. QgqLhtXFusrmKeWF2oyfgir+cFkf9/ewzs+pmpJS4HZEw6EBhbl745q9h7bDNCcT
  67. maaU4kp51Q0vfv7slWfFPxkJaxeFQuz8ENhqLl1SXMwc2QdiYFY+w0+YKuwwF1BT
  68. +EepIS6qGBdTFaaoqs2PLS2s66qmJ8VC7tJibnforj8I190Jxd3Oj7fBtH6rnL2x
  69. YwI/CxEAJjSnzgbvaodqfYZ/yrVcxstc113EXBfMNoqs0F9g+d4Y8n1RJgZZRV7X
  70. 4kDVFgMpoeI99nxdVc0Id740mBsXW2KK0BMFhBPlEYryZ/aU9nIx9hwi1m+UMzb3
  71. T+RnI2YfY5aVsetDMJddC8f5Cn/7VXDtEOxiHqkDPN4djCN7jHeBslNRV3/ETESk
  72. jSvbnkfsFJE7Ns6DsgOmrOe/IT/H2cteUJRnaWhrDtCwrKWEw1bLbVyEb4C5y2Dm
  73. cjixQ0ffbpF8eCrrODb0FiA+z2TxBbaiKFxcp5uXh5CI/4hH29rpWyJANCQrs79z
  74. A7/yYS7pEqQOZnB4UytSI006zRJ404G1LMoqejTBmwjdjmPdpV2w579Aw12BZERZ
  75. GbszATPxGL+1fhGFviz2/jKB9JHpqtvkoce4tKdnFTWUcCzrxbd2pr56+V+mxC5I
  76. Gv4KEHVlZYO3tCMUexUh/aM4vFlB19vB30ISSToszKOtbe7asClz9ZV3F7pBY7aB
  77. oU7eAN6J6o9v5L3vj6PjFR2ZAEbTeoiHd4TjpmWYOy65uXDlzkOl9QU00RAA/PKs
  78. Al35W2BlP4X9v5lbogpcS6xXDGtO4dJf3I/bUL1jNvh3jzmMv6xW9jakD6UwOEef
  79. zcZcFLPItGm4CdU7ZmmL9yzGfyFLvnc1L3M6yjAbcSeNVShv8ZY7ZuU0MaWUn4X4
  80. y5rr6efRtQ2zZEv2VJDugZntKy3eFlHVm3fWu7iGJhNmEf7NACP9a5hFfZrrMm2I
  81. md/+TmgHu/EuhheWy0LNgVmKv6x28QHbcC0zh2mcN50exNaavW+iYGTBfrwRT6Is
  82. pVhMLndBePMR+P//Q8wIvv8YyuXosC3cbhUR47fKLJsjAzpiw+LO9cinjyL2Wgce
  83. fG4nRPJimTg5jGpRZdOAmCWMeJtLPYUbXBuPc1ndxDzEwy3TVa3Jp+8A8OEGGPxn
  84. UTZ148G/34hXay4Rv5Jix6x3m7dYS2BOc1WJOozaJnvvX3HJgiQeUxnWKDpyyYVo
  85. Cceno2qTQ/oYsOctFHLHEcvb6HhiN7739G7f3bSiMyU6XCTrLKWRDoS+ZhkSP7sd
  86. t57eirtVBQuZinzbAsRLK/IaeMbrdCNu9yKSHtqOvDmIeNFE744ePHnPZrw0Qk4C
  87. sWXGK6t82Jzlcz0xAzQiq2i7ic5HfOV8tP3bV3DDR+bjppYwzuXnXCWCfHI+EuLh
  88. xNORYqgevDOI1BHgxH7kst28V8+gZg10cElfeHgLXj2WQ71nFMjkGfKJiFJUmZOA
  89. hq9mCY3IKq6RuQPkbE/sbz6N1VdfgHVL23BZPILlbvl5gsVIK9x4G+IR3r4VbdzQ
  90. FAyAichZSJXLwDHks71QmIGYqEPBxuHDKbzxq73Y8NSHo+YpkBsTxa3emzhDHMuc
  91. BLSccJbQ6DiiiK5yeMc7LllKePGFi7D0mjW4ZOVCXDwvhvMiGpaIN5WysSiweVu3
  92. qEfAeOTVYwlEZZ4sPeaR2ZNuSIyDmpV8xuIBx/kBFE0TVjENReTD4nppbiXeFUx0
  93. 9eexqzOFHes7sPWVDpxo4OeRu2nl1m4RQWWmF6+oFFVnEY3KKrOzCLXkeKQUVw73
  94. DI1N8uZC/LoLcdZ5i7BiURLLExEsiKpYyCVu11WcNpTdwvOQTJluqHRcSTUkz5sW
  95. eg0H/TkTx/mt/cSJLDp39+LgSx+gY9/AScnbRqI2y4t8xLx8erd8penWWchYZmjk
  96. eKRfdhbv+KQcoxzpOa+4+WM4MxnGcCvXrQ5jpXRD2xpON1QP77Nja5NmeB/Z6X3M
  97. PGV5maWMZzpRCitKuObVT1hvPgHFU2phY6hPvWtHSkNUm4pIiinTEnkTaBCzkPHO
  98. fctcAbJpoHuOvTmwNM+1tbmwVM9neevjzZHlpTY3lvd4pKwutaJ6M7tYnmMbFE1n
  99. NRNdqOGVtjadUG10rZe8rV7x1q+enI2K6peKiJ6pFTAma1WRbM96izeq1pO1Nrr6
  100. CSuplVPgfVTmaLL6FYqkAWJSl8CZPbev5cHqEtex1rq2kXBtZ5Xj2uD/KbbN4Lqu
  101. 4nCNXJeJTECKy52SSYh5URg/L45dOSpQcUmpVFOVGVv4AX9lMoOLKv4XAlP5+fID
  102. jlWmaUo5fxb/Q9Mq3wspTHyWQstTJgi/ITlsN5xilv9jbuMtqW3Kma9vm+q/dcKy
  103. MvPuS+A4t3D7boBjt5f2ONnFAsxMgTlWlDl2Sb6SoJXhKbciJWNMcZyykC5jJz3A
  104. WB57H2QsX1WlLF3pVVFY+YncSvlJ3PK4JLMytoceE6MjBrkVFHmJ8YMYbEskM+vn
  105. HjzHhXhUWbV1y1T8teP+Z2Ts3gt55R4Bsy+DlTPQu8dB/+44MkfLU0x131e5bw9H
  106. 1PJ5+Is6VFGl+ljxHtfNkUVMOWK3cFSkbzo1h+gp/B5mRcDcN2CZdyvnfzip0XYc
  107. ua7u4r9Jse9B1f4WVj6Pgxuj6N6uins90eSIW1283WWx+QXeSmtxbfuHx4/kv7X4
  108. c0cn5fmqY5KVFf56BdTY87xS5+PYNgudGyMkKXES4vYWP81AuFVnrrv7QGf2mpXX
  109. 9e7DcId4fB/b6IUse+eFULSX+W0/iT3r4xic6OQSMefRomDR9gLvOGfe329cu+bP
  110. +kWzYNwjMY0lZhu85Wwo+u/gGHF88N8tMNJj/XuIZkUM00RPyfHOdPHl3xavvPqb
  111. +d0Y52zhqLkBWP9tvPXsvgnXaC+JambGWWuiKRFjkrYRFuOGKxbhqlRBfX7LLse7
  112. +6LhCDv6iKNT+Am/9S/nt/6WaU0STMwdxMY3IxfTVfeMf/oL9giGn24uH1HV0B1+
  113. RFlZz5ev4hH7Bhx5R0Ghb8J1JpoYsdbTKeKUFvvq138A7tVQyib5EMBRha0raymT
  114. oGM8iGIqjb49czqVEDFNMBZyLDf38XNwz7wEWjHGHGP1I2tX4Vq47mp0b0/SFDox
  115. WagqWsIalj/zHXwB1TtORs3iWF9WZt8BM51Btnsy60o0OWII1jaRW70MX8Jwuqah
  116. LVIYQVhfWdm+Ty8rTaMOdEb9vk8QE0HVEEtGcMHNl2M5qh9gPWJzwD+yKtZlcOwQ
  117. ct1zNjkbMXNoOvfOhfrFP8QnMLxFyiurb3T1l9W1roBZzMGiJ/EQk49YQuDYKCw/
  118. DRdgeFuUlFW2XU+KrnVkdVbBylDaHGLKcHnTNRnFGShH0rCnyF0mJ7lZR1ZzBe9c
  119. zWB+FWKuEwohHCvnlxAOSkG9+/lOagrUkdVO8KbALMxiRcwV+D1eU5xS50rg3bfn
  120. lbWqKeAvJHMTolFBEFOFqiKkDEdPmUSlNueEKEOLXfwja+0yfYKYZGp2hghZazeX
  121. nhRZaescMVuot02/6gKCmA3I6For7BAkKzFbGCnZSQmSlZitNDgpQBAzQ730USVI
  122. ViIwkKxEYCBZicBAshKBgWQlAgPJSgQGkpUIDCQrERhIViIwkKxEYCBZicBAshKB
  123. gWQlAgPJSgQGkpUIDCQrERhIViIwkKxEYCBZicBAshKBgWQlAgPJSgQGkpUIDCQr
  124. ERhIViIwkKxEYCBZicBAshKBgWQlAgPJSgQGkpUIDCQrERhIViIwkKxEYCBZicBA
  125. shKBgWQlAgPJSgQGkpUIDCQrERhIViIwkKxEYCBZicBAshKBgWQlAgPJSgQGkpUI
  126. DCQrERhIViIwkKxEYCBZicBAshKBgWQlAoO/rK5jgjFnmutCNBOM/+eO7S11Iqub
  127. haJaE68RQfhjW7AsG7mxvMdfVsfohgJjUmpFED4UczCNAtJjeY+/rIx1QA2NMUgT
  128. ROOYObDBPA6O5T3+strGNt5uTYKHV4KYbERb1c0jeqwXe8byPn9ZVfYa/8QQQtqk
  129. VI4gvBQGRR8e2ub92FrzLeYp8LyW8Jd1f89muFY3VC0z6TUlmp7UUeSLJvofeRW7
  130. RriM1Z7wlVX5Ehw41s95dI1TU4CYTGwTyB5H+MAJvJ4twtsvYnXKEPUnBVT8oBSs
  131. FRSnoM5Ek9KzF6ZtAz96A8/UfEuI6daUxmRVPlnogmU9ylymT3aFiebEzAEDnQh1
  132. 9mD9S+/jRM23a0VtXNYSDv6B2TjOQ3d2EutMNCFiBGDfZuQNE5l//BUerf02hG3V
  133. ZWyyKp/BoGXjVuYgZhWpOUCMn0PbYJhpxP9nF773+6Oo7bhLWe1KkbJWjfWPupAl
  134. ug4vG0V81zEQNfMwJ6nuRBNxZDvM3n2I7OrCY/e+ii0+l3hF9ZYxNAMqtF6HBwpF
  135. /IS3OcLFQYqwRGMwrtr+zTCP7uC9/3688OfP4wmfy0T0tCrFrLzaqImqgkbHpcR1
  136. kcM/w32tEXyLK577/3bN5bWJKArj30wyMZM+0EJBXAgVdFFcuBG6140gbl2pa/8G
  137. 8Q8QQdCt1JW4VURc6CoKdSFFlMSFUIpCDYrWtmmb6eTl/cg9cJvMtHnVx+R+cMgw
  138. mZmbMD++e+49Z2IaY26qz39hlXhxMVV8gUrwE/5SGQ+vPO3IUyk6J+GsqGBTy6Y+
  139. 3kYL3F3O2ssmKstZ2be3cXlmGveUcXv+YTj+EaQduxVrpdVQnrjyAbXlNyBd1Vcr
  140. uHVzAfmYy+mgnKkJ55b+3NbnOlpUe/FGUu7cf4lP41k8PnkUJ5wAp8o/sNOsoZnK
  141. IOXa6uzIik5aKqBWeI7qry/IfN/C6zvvcGO+gI8xtxBGumegg466oyOyl7pXTyTc
  142. GRW+itzdqzh7fhbXJzycUxmGq0aoZMfVl5PwXZUNezlEFM2s/nfxlYZqwq4qxDa+
  143. IVgvoRGWkeP2VGkd+WdLePSguGeTigmquGlFR4ghwUrRPw+pyKogjv7FMzh2bQ4X
  144. jk9hbtLD6bSDqXrYSrA5LVglS416693yHYchVlc3UVxew+L8e+QXv2Jtj1tli4pA
  145. 0kEFUJn6eS6WmH5g5T2satFhCayvg8eE2FPQjl2axUzrn/UxgtU/LbG9JwV8Lm10
  146. 3aRPEgiigCrTv4AaImK7ylS/SyMTWAJqwprRQQdO6WvtEmw0Jc0o5Fu2pyQvDYzY
  147. F1RqkM0nKYdJmPXcBnaXzNp/hIU3mTJZEEDFSQVQmfoFVNlX3Xd1M8j6vWkMIj+u
  148. pgens3o6UjpcHQ6s2yZRUcZlVqbEVQVgKQDU0eUyfFjAEMa0DkkB2mE1UwILa/LU
  149. 3ocqDSkmrJKzVo3vu9YwgeGzBMq0EdZZR0NxzhpV9+/oqOpGBwEMn0koTUd1jfOu
  150. cZ1VciTwRfWl1hDTo9qLDhoYAdQxjv/EuFZ/Ryawpsva0pCVlZWVlZXVIPoNKHSN
  151. mMco0NIAAAAASUVORK5CYII=);

  153. }
  154. **/

  156. winform.show();
  157. win.loopMessage();
复制代码
在指定popup样式中需要注意（menu节点有类似问题）：popup如果指定背景色会自动加上阴影（不能使用outline调整，如果指定圆角就会在右上角显示阴影内角），所以需要在CSS中指定 background-color:transparent; 清除背景色，然后自定义一个背景图像即可（背景图像不会自动添加阴影，可以使用png图像自己画阴影上去），或者在popup里面用一个子节点指定背景色（避免HTMLayout添加阴影）。

在需要显示popup的节点上指定titleid，那么当鼠标悬停在该节点上时，
会使用指定ID的popup节点代替默认的title提示。

  2. <p titleid="my-html-title">把鼠标放在这里别动哦, 然后可以看到提示</p>

  4. <popup id="my-html-title">
  5. 这是一个 <em>示范</em>:
  6. 可以使用html的工具提示tooltip
  7. </popup>
复制代码
下面再看一个完整的例子下面是一个简单的aardio范例：
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=399;parent=...;text="HTMLayout popup 工具提示";right=599 )
  4. winform.add( )
  5. /*}}*/

  7. import web.layout;
  8. wbLayout = web.layout(winform)

  10. wbLayout.html = /**
  11. <p titleid="my-html-title">把鼠标放在这里别动哦, 然后可以看到提示</p>

  13. <popup id="my-html-title">
  14. 这是一个 <em>示范</em>:
  15. 可以使用html的工具提示tooltip
  16. </popup>
  17. **/

  19. winform.show();
  20. win.loopMessage();
复制代码
popup.png

如果我们需要在鼠标按下时弹出popup节点（ 而不是鼠标悬停在上面时显示 ）
那么需要使用一个 behavior:dorpdown, 首先使用  import web.layout.behavior.dropdown; 自标准库导入这个behavior，
然后在需要弹出节点的对象上指定behavior:dorpdown, 并且在该节点内部增加一个 <popup> </popup> 子节点。
下面是一个简单的示例：
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=399;parent=...;text="HTMLayout behavir:dropdown 演示";right=599 )
  4. winform.add( )
  5. /*}}*/

  7. import web.layout;
  8. wbLayout = web.layout(winform)

  10. import web.layout.behavior.dropdown;

  12. wbLayout.html = /**
  13. <button #pop-button>点击这里弹出popup子节点
  14.     <popup>
  15.         这是一个popup子节点，默认他是隐藏的:
  16.         <button>按钮</button>
  17.     </popup>
  18. </button>
  19. **/

  21. wbLayout.css = /**
  22. #pop-button{
  23. behavior:dropdown;
  24. }
  25. **/

  27. winform.show();
  28. win.loopMessage();
复制代码
dropdown.png
在上面的示例中 - 如果你在弹出的popup外面点击他就会自动隐藏、
但是你在popup节点自身上点击鼠标他并不会隐藏。

如果希望在popup自身上点击也隐藏popup，那就要在popup上添加behavoir:popup，
同样的popup也是标准库实现的behavior( HTMLayout并没有名字是popup的内部behavior - 虽然他确实有一个叫popup的HTML标记 ），所以首先要调用  import web.layout.behavior.popup;

  2. import win.ui;
  3. /*DSG{{*/
  4. var winform = ..win.form( bottom=399;parent=...;text="HTMLayout behavior:popup 演示";right=599 )
  5. winform.add( )
  6. /*}}*/

  8. import web.layout;
  9. wbLayout = web.layout(winform)

  11. import web.layout.behavior.dropdown;
  12. import web.layout.behavior.popup;

  14. wbLayout.html = /**
  15. <button #pop-button>点击这里弹出节点
  16.     <popup>
  17.         这是一个 <em>弹出节点</em>:
  18.        鼠标点击 关闭自己
  19.     </popup>
  20. </button>
  21. **/

  23. wbLayout.css = /**
  24. #pop-button{
  25. behavior:dropdown;
  26. }

  28. #pop-button popup{
  29. behavior:popup;
  30. }

  32. **/

  34. winform.show();
  35. win.loopMessage()
复制代码
如果希望点击popup节点不关闭，但是点击popup上的按钮关闭，可以使用CSSS!来实现，如下：
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=399;parent=...;text="HTMLayout behavior:popup 演示";right=599 )
  4. winform.add( )
  5. /*}}*/

  7. import web.layout;
  8. wbLayout = web.layout(winform)

  10. import web.layout.behavior.dropdown;

  12. wbLayout.html = /**
  13. <button #pop-button>点击这里弹出节点
  14.     <popup>
  15.         这是一个 <em>弹出节点</em>:
  16.         <button .close-popup>关闭自己</button>
  17.     </popup>
  18. </button>
  19. **/

  21. wbLayout.css = /**
  22. #pop-button{
  23.         behavior:dropdown;
  24. }  

  26. popup button.close-popup{
  27.         click!:
  28.                 self.$1p(popup):popup = false
  29.                 ;
  30. }

  32. **/

  34. winform.show();
  35. win.loopMessage()
复制代码
dropdown-popup.png

click!:
    self.$1p(popup):popup = false
    ;

self.$1p(popup) 函数向上查找第一个popup父节点，
self.$1p(popup):popup = false  是修改节点的popup状态为flase - 也就是隐藏弹出节点。
回复

举报

编程

42

主题

625

回帖

3755

积分

版主

积分
3755
 楼主| 发表于 2013-3-31 12:38:40 | 显示全部楼层
上面使用popup弹出节点有一个小问题，
如果popup上有按钮，并且popup的位置超出了主窗体 - 那么在窗体范围外的部分点击按钮时不会重绘（看不到点击效果）

要解决这个问题，就可使用 behavior:popup-menu，
popup-menu是一个内建的behavior，使用时无需导入，
这个behavior通常用于弹出一个菜单（menu节点 ），但也可以用于弹出一个普通的 popup节点 - 这时候他的作用类似于标准库里的dropdown，不过使用这个 behavior 弹出的节点没有前面所说的问题（ popup上的按钮不能超出 窗体范围）

关于 popup-menu 的官方文档
http://www.terrainformatica.com/wiki/h-smile/built-in-behaviors/popup-menu

下面是使用 popup-menu 弹出节点的示例代码：
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=164;parent=...;text="HTMLayout behavior:popup-menu 演示";right=184 )
  4. winform.add(  )
  5. /*}}*/

  7. import web.layout;
  8. wbLayout = web.layout(winform)

  10. import web.layout.behavior.dropdown;

  12. wbLayout.html = /**
  13. <button #pop-button>点击这里弹出节点
  14.     <popup>
  15.         这是一个 <em>弹出节点</em>:
  16.         <button>.........................测试</button>
  17.     </popup>
  18. </button>
  19. **/

  21. wbLayout.css = /**
  22. #pop-button{
  23.         behavior:popup-menu;
  24. }  
  25. #pop-button popup{
  26.         behavior:menu;  
  27. }  
  28. **/

  30. winform.show();
  31. win.loopMessage()
复制代码
需要注意按钮内的popup子节点需要在CSS中指定 behavior:menu;  
否则 - 在按钮外面点击一下窗口范围外的按钮又无法重绘了。

popup-menu.jpg
上面是运行上面代码的效果，用鼠标点击按钮可以看到问题解决。

另外HTMLayout内置一个 behavior: popup-selector 也有类似 popup-menu的作用。
参考官方文档：http://www.terrainformatica.com/ ... iors/popup-selector
popup-selector 实现的是下拉列表框，与popup-menu不同的他可以点击子节点切换选项值。这个 popup-selector 如果使用 <button type="selector" menu="popup#some-popup" /> 这种方式使用时会添加一个向下的箭头，而且按钮总是会被自动调整到大于需要弹出的popup的宽度（ popup-menu 没有这个功能）， 如果弹子节点的某个选项很长的话那么按钮就会不必要的显示的太长，这时候可以使用类似下面的CSS让按钮自适应标题的长度：
  1. .my-popup-selector{
  2.     overflow:hidden;
  3.     white-space:nowrap;  
  4.     width:calc( text-width(  self.child(1):value  ) + 20px ) !important;
  5. }
复制代码
关于CSS中 calc 函数的用法可参考 HTMLayout中使用 calc() 表达式写CSS属性

HTMLayout另外一个behavior: dropdown-select 也可以实现下拉列表框，
与 popup-selector 的区别是：popup-selector是一个单纯的弹出列表控件 - 弹出节点的是一个弹出菜单，并且该菜单是可以多个控件共享的。而 dropdown-select 弹出节点不是一个弹出菜单并且也不能多控件共享，behavior: dropdown-select的功能更多，可以添加editable支持编辑框，也可以对子节点进行分组、子节点也可以是一个树视图(treeview) 。

在HTMLayout里，select控件可以显示为下拉列表框，behavior 为select-dropdown，代码如下：
<select>size属性默认等于1</select> 或者 <widget type="select-dropdown">…</widget>
参考：http://terrainformatica.com/wiki ... ors/select-dropdown 注意还有一个 behavior: popup-selector 也可以实现下拉列表框, 区别是 popup-selector 是弹出一个菜单，并且多个popup-selector 可以共用同一个弹出菜单。

select控件还可以显示普通的展开的列表框，类似listbox控件，这时候 behavior 为select，HTML代码如下：
<select size=N>N指定显示行数，必须大于1</select>
<widget type="select">默认显示为列表框（也没有下拉按钮，直接显示列表）</widget>
参考：http://terrainformatica.com/wiki ... in-behaviors/select  HTMLayout 使用select控件实现列表视图( listview )




回复

举报

落伍者

117

主题

1101

回帖

6497

积分

六级会员

积分
6497
发表于 2013-3-31 12:45:29 | 显示全部楼层
抄范例里面的 用select 控件做了个 类似于grid行为的 table 效果也不错
回复

举报

ljtnine

19

主题

293

回帖

1945

积分

新手入门

积分
1945
发表于 2013-3-31 13:56:09 | 显示全部楼层
效果不错。感谢分享
回复

举报

jyb21

48

主题

541

回帖

3328

积分

五级会员

积分
3328
发表于 2013-4-1 19:46:32 | 显示全部楼层
不久的将来必然会用到，多谢分享
回复

举报

renmin

8

主题

110

回帖

904

积分

三级会员

积分
904
发表于 2013-4-1 21:49:56 | 显示全部楼层
最近也一直在学习这个东西
非常感谢
回复

举报

rimren

9

主题

68

回帖

506

积分

三级会员

积分
506
发表于 2013-4-2 12:00:56 | 显示全部楼层
这个很值得学习
回复

举报

我是老废

18

主题

101

回帖

688

积分

三级会员

各种菜

积分
688
发表于 2013-4-2 14:33:44 | 显示全部楼层
专程过来学习
回复

举报

wudijushi

39

主题

163

回帖

1351

积分

四级会员

积分
1351
发表于 2013-10-22 14:55:07 | 显示全部楼层
最近尝试用悬停（非点击）弹出菜单节点，只想到个笨方法，如下：在需悬停弹出菜单的节点上自定义一个behavior，写CSSS！响应hover-on、hover-off，然后调用self.自定义函数()实现弹出/隐藏菜单节点。
回复

举报

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

本版积分规则

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

GMT+8, 2026-4-19 16:17 , Processed in 0.095611 second(s), 25 queries .

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

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