HTMlayout练习作品分享

xauto

背景图：

效果图：

1. mainLayout.onButtonClick = function (ltEle) {
   
2.     select(ltEle.id) {
   
3.         case "sysbtn_close" {
   
4.             mainForm.close()
   
5.         }
   
6.         case "sysbtn_min" {
   
7.             mainForm.hitmin()
   
8.         }
   
9.         case "sysbtn_max" {
   
10.             mainForm.hitmax()
    
11.             with header.child(2) {
    
12.                 id = "sysbtn_restore"
    
13.                 title = "还原"  
    
14.             }
    
15.         }
    
16.         case "sysbtn_restore" {
    
17.             mainForm.hitmax()
    
18.             with header.child(2) {
    
19.                 id = "sysbtn_max"
    
20.                 title = "最大化"   
    
21.             }   
    
22.         }
    
23.     }
    
24. }

复制代码

工程下载： web ui.zip (366.4 KB, 下载次数: 798)

2012-6-10 22:38 上传

点击文件名下载附件

劲龙の星星

哇哈哈，偶也来一下，修改好的，可以同步了。代码如下：

1. import win.ui;
   
2. /*DSG{{*/
   
3. mainForm = ..win.form( text="Web UI";bottom=600;parent=...;right=800;border="none" )
   
4. mainForm.add(  )
   
5. /*}}*/
   
6. 
   
7. import web.layout;
   
8. import win.util.round
   
9. import web.layout.behavior.collapsibleList;
   
10. 
    
11. win.util.round(mainForm)
    
12. 
    
13. mainLayout = web.layout(mainForm);
    
14. mainLayout.go("/layout/index.html");
    
15. 
    
16. header = mainLayout.getEle("header")
    
17. header.onMouseDown = function() {
    
18.         mainForm.hitCaption()
    
19. }
    
20. header.onMouseDblClick = function() {
    
21.         mainForm.hitmax();
    
22.         var btn = mainLayout.getEle("sysbtn_max");
    
23.         if(btn){
    
24.                 with header.child(2) {
    
25.                         id = "sysbtn_restore"
    
26.                         title = "还原"               
    
27.                 }
    
28.         }else{
    
29.                 with header.child(2) {
    
30.                         id = "sysbtn_max"
    
31.                         title = "最大化"       
    
32.                 }
    
33.         }
    
34. }
    
35. header.attachEventHandler()
    
36. 
    
37. mainLayout.onButtonClick = function (ltEle) {
    
38.         select(ltEle.id) {
    
39.                 case "sysbtn_close" {
    
40.                         mainForm.close()
    
41.                 }
    
42.                 case "sysbtn_min" {
    
43.                         mainForm.hitmin()
    
44.                 }
    
45.                 case "sysbtn_max" {
    
46.                         mainForm.hitmax()
    
47.                         with header.child(2) {
    
48.                                 id = "sysbtn_restore"
    
49.                                 title = "还原"       
    
50.                         }
    
51.                 }
    
52.                 case "sysbtn_restore" {
    
53.                         mainForm.hitmax()
    
54.                         with header.child(2) {
    
55.                                 id = "sysbtn_max"
    
56.                                 title = "最大化"       
    
57.                         }       
    
58.                 }
    
59.         }
    
60. }
    
61. 
    
62. //防止与 browserMain 控件重叠时 改变窗体大小时重绘覆盖 browserMain
    
63. mainForm.modifyStyle(,0x4000000/*_WS_CLIPSIBLINGS*/)
    
64. 
    
65. mainForm.wndproc = function(hwnd,message,wParam,lParam){
    
66.         if (message === 0x14/*_WM_ERASEBKGND*/) {
    
67.                 return 1;
    
68.         }
    
69. }
    
70. 
    
71. mainForm.show( );
    
72. win.loopMessage();

复制代码

coder

谢谢分享

gxrcn

不错，界面很漂亮，顶上

双书幻

呢。。基本上碉堡了。。。

itworm

很漂亮啊，htmlayout果然不是盖的~~

赜氏

这个实例发布后不能双击标题最大化。可以实现吗？

xauto

赜氏 发表于 2012-6-14 08:49
这个实例发布后不能双击标题最大化。可以实现吗？

可以的、添加一句代码！就可以实现了... 具体细节没考虑太多 只是学习css的练习作业

1. header.onMouseDblClick = function() {
   
2.         mainForm.hitmax()
   
3. }

复制代码

赜氏

xauto 发表于 2012-6-14 19:25
可以的、添加一句代码！就可以实现了... 具体细节没考虑太多 只是学习css的练习作业

太棒了。

哟哟

学习参考下！

cjc0045

很帅。。！！

ayumi502

非常漂亮 谢谢分享 学习学习