搜索
查看: 13008|回复: 8

[教程] HTMLayout 使用 popup 弹出节点

[复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

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

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

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

  1. _service > popup[role=tooltip]{

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

下面看一个完整的示例:

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

  5. import web.layout;
  6. var wbLayout = web.layout( winform )

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

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

  148. }
  149. **/

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

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

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

  2. <popup id="my-html-title">
  3. 这是一个 <em>示范</em>:
  4. 可以使用html的工具提示tooltip
  5. </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. /*}}*/

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

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

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

  15. winform.show()
  16. 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. /*}}*/

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

  8. import web.layout.behavior.dropdown;

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

  17. wbLayout.css = /**
  18. #pop-button{
  19. behavior:dropdown;
  20. }
  21. **/

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

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

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

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

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

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

  18. wbLayout.css = /**
  19. #pop-button{
  20. behavior:dropdown;
  21. }

  22. #pop-button popup{
  23. behavior:popup;
  24. }

  25. **/

  26. winform.show()
  27. 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. /*}}*/

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

  8. import web.layout.behavior.dropdown;

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

  17. wbLayout.css = /**
  18. #pop-button{
  19.         behavior:dropdown;
  20. }  

  21. popup button.close-popup{
  22.         click!:
  23.                 self.$1p(popup):popup = false
  24.                 ;
  25. }

  26. **/

  27. winform.show()
  28. win.loopMessage()
复制代码
dropdown-popup.png

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

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

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2013-3-31 12:38:40 | 显示全部楼层

上面使用popup弹出节点有一个小问题, 如果popup上有按钮,并且popup的位置超出了主窗体 - 那么在窗体范围外的部分点击按钮时不会重绘(看不到点击效

上面使用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. /*}}*/

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

  8. import web.layout.behavior.dropdown;

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

  17. wbLayout.css = /**
  18. #pop-button{
  19.         behavior:popup-menu;
  20. }  
  21. #pop-button popup{
  22.         behavior:menu;  
  23. }  
  24. **/

  25. winform.show()
  26. 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

主题

1237

帖子

6592

积分

六级会员

Rank: 9Rank: 9Rank: 9

积分
6592
发表于 2013-3-31 12:45:29 | 显示全部楼层

抄范例里面的 用select 控件做了个 类似于grid行为的 table 效果也不错

抄范例里面的 用select 控件做了个 类似于grid行为的 table 效果也不错
我是菜鸟...
回复

使用道具 举报

20

主题

325

帖子

1945

积分

新手入门

积分
1945
发表于 2013-3-31 13:56:09 | 显示全部楼层

效果不错。感谢分享

效果不错。感谢分享
回复

使用道具 举报

48

主题

593

帖子

3336

积分

五级会员

Rank: 8Rank: 8

积分
3336
发表于 2013-4-1 19:46:32 | 显示全部楼层

不久的将来必然会用到,多谢分享

不久的将来必然会用到,多谢分享
回复

使用道具 举报

8

主题

125

帖子

848

积分

三级会员

Rank: 4

积分
848
发表于 2013-4-1 21:49:56 | 显示全部楼层

最近也一直在学习这个东西 非常感谢

最近也一直在学习这个东西
非常感谢
回复

使用道具 举报

9

主题

78

帖子

504

积分

三级会员

Rank: 4

积分
504
发表于 2013-4-2 12:00:56 | 显示全部楼层

这个很值得学习

这个很值得学习
回复

使用道具 举报

18

主题

122

帖子

688

积分

三级会员

各种菜

Rank: 4

积分
688
发表于 2013-4-2 14:33:44 | 显示全部楼层

专程过来学习

专程过来学习
aardio,让我的心插上翅膀
回复

使用道具 举报

39

主题

205

帖子

1351

积分

四级会员

Rank: 6Rank: 6

积分
1351
发表于 2013-10-22 14:55:07 | 显示全部楼层

最近尝试用悬停(非点击)弹出菜单节点,只想到个笨方法,如下:在需悬停弹出菜单的节点上自定义一个behavior,写CSSS!响应hover-on、hover-o

最近尝试用悬停(非点击)弹出菜单节点,只想到个笨方法,如下:在需悬停弹出菜单的节点上自定义一个behavior,写CSSS!响应hover-on、hover-off,然后调用self.自定义函数()实现弹出/隐藏菜单节点。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-10-22 05:32 , Processed in 0.125000 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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