搜索
查看: 14967|回复: 12

[win] 新版高级选项卡演示

  [复制链接]

151

主题

2373

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13048
发表于 2018-1-12 17:45:47 | 显示全部楼层 |阅读模式
plus系列控件最强大的功能是贴图功能,
但是这个例子我们不使用图像,纯代码实现(请使用最新版测试):
import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=939;bottom=772;bgcolor=16777215)
winform.add(
custom={cls=
"custom";left=148;top=11;right=921;bottom=751;bgcolor=16777215;db=1;dl=1;dr=1;dt=1;z=4};
static={cls=
"static";left=139;top=7;right=140;bottom=757;bgcolor=16752414;clip=1;db=1;dl=1;dt=1;z=3};
strip1={cls=
"plus";text="测试文本";left=31;top=34;right=139;bottom=63;bgcolor=16752414;clip=1;dl=1;dt=1;z=1};
strip2={cls=
"plus";text="测试文本";left=31;top=63;right=139;bottom=92;bgcolor=16752414;clip=1;dl=1;dt=1;z=2}
)
/*}}*/

//创建高级选项卡
import win.ui.tabs;

//至少要添加2个创建好的选项卡(作为设计模板,创建成功后可清除)
var tbs = win.ui.tabs(winform.strip2,winform.strip1);

//指定选项卡的外观样式
tbs.skin(
    background = {  
        default = 0xFFFFFFFF;
    }
    color = {
        hover = 0xF00000FF;
    }
    border = {
        default = { bottom = 1;color= 0xFF1E9FFF;  }
        hover = { bottom = 1;right = 4;color= 0xFF1E9FFF; }
    }
    checked = {
        background = {
            hover = 0xFF99CCFF;
            focus = 0xFF1E9FFF;
            active = 0xFF333366;
            default = 0xFF1E9FFF;
        }
        color = {
            hover = 0xFF000000;
            default = 0xFFFFFFFF;
        }
        border = {
            hover = { right = 2;color=0xFF1E9FFF}
            default = { right = 2;color=0xFF1E9FFF}
        }
    }
)

//动态添加更多选项卡
tbs.add({
    text=
"标题文本";
})

tbs.add({
    text=
"标题文本";
})

import web.form;
var wb = web.form( win.form() )
wb.go(
"http://bbs.aardio.com/forum.php?mod=viewthread&tid=22149&from=portal");

//动态添加更多选项卡
tbs.add({
    text=
"打开网站";  
    hasCloseButton =
true;//允许显示关闭按钮
},wb._form)

//也可以用下面的代码自定义关闭按钮的外观样式
tbs.closeButton.skin(
    background = {
        hover = 0xFFe35c51;
        active = 0xFF8f241b;
        default = 0x99FFCC66;
    }
    color = {
        hover = 0xFFFFFFFF;
        active = 0xFFEEEEEE;
        default = 0xCCFFFFFF;
    }
)

//可以自定义关闭按钮在选项卡上的显示位
tbs.beforeShowCloseButton = function(strip,rcStrip,rcCloseButton){
   
return rcStrip.right - rcCloseButton.width() - 5, rcStrip.top + ( rcStrip.height() - rcCloseButton.height() )/2;
}

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


回复

使用道具 举报

29

主题

149

帖子

850

积分

荣誉会员

吃白菜的鸟

Rank: 8Rank: 8

积分
850
发表于 2018-1-12 23:07:36 | 显示全部楼层
本帖最后由 popdes 于 2018-1-14 15:08 编辑

tabs+fontAwesome 实现的简单界面, 真心简单,谢谢校长
更新了下, 添加了tabs的使用方法
同时添加了两三个调用layui和echarts图表的示例, 完整工程可以下载链接:https://pan.baidu.com/s/1pMuFpvP 密码:swcq
QQ图片20180114150142.png

  1. import win.ui;
  2. import gdip.fontAwesome;
  3. /*DSG{{*/
  4. var winform = win.form(text="aardio form";right=939;bottom=772;bgcolor=3947580;border="none")
  5. winform.add(
  6. custom2={cls="custom";left=121;top=43;right=939;bottom=773;bgcolor=8421376;db=1;dl=1;dr=1;dt=1;z=4};
  7. plus={cls="plus";text='\uF13B';left=0;top=0;right=120;bottom=43;bgcolor=16095795;color=16777215;dl=1;dt=1;font=LOGFONT(name='FontAwesome';h=-24);z=3};
  8. strip1={cls="plus";text='\uF015';left=0;top=48;right=118;bottom=142;bgcolor=3947580;clipch=1;color=16777215;dl=1;dt=1;font=LOGFONT(name='FontAwesome';h=-40);z=1};
  9. strip2={cls="plus";text='\uF290';left=0;top=142;right=118;bottom=236;bgcolor=3947580;clipch=1;color=16777215;dl=1;dt=1;font=LOGFONT(name='FontAwesome';h=-40);z=2}
  10. )
  11. /*}}*/

  12. //设置右上角最小化/最大化/关闭按钮图形
  13. import win.ui.simpleWindow;
  14. win.ui.simpleWindow(winform,17,47,43)

  15. //设置拖动窗体功能
  16. winform.wndproc = function(hwnd,message,wParam,lParam){
  17.         select( message ) {
  18.                 case 0x201/*_WM_LBUTTONDOWN*/{
  19.                         winform.hitCaption();
  20.                 }
  21.         }
  22. }

  23. //创建高级选项卡
  24. import win.ui.tabs;

  25. //至少要添加2个创建好的选项卡(作为设计模板,创建成功后可清除)
  26. var tbs = win.ui.tabs(winform.strip2,winform.strip1);
  27. //指定选项卡的外观样式
  28. tbs.skin(
  29.      background = {
  30.          disabled = 0xFF3C3C3C;
  31.      }
  32.     color = {
  33.         hover = 0xFF3a9ff7;
  34.     }
  35.     checked = {
  36.         color = {
  37.             hover = 0xFF3a9ff7;
  38.             default = 0xFF3a9ff7;
  39.         }
  40.     }
  41. )
  42. //设置的模版项也可以显示关闭按钮
  43. winform.strip2.hasCloseButton = true;
  44. //方式一:给模版项绑定加载的窗体
  45. //tbs.loadForm(1,"\res\aa.aardio");
  46. //tbs.loadForm(2,"\res\layuitable.aardio");

  47. //动态添加更多选项卡
  48. tbs.add({
  49.     text='\uf216';
  50.    }//,"\res\layui.aardio"  //方式二:直接绑定需要加载的窗体
  51. )

  52. //动态添加更多选项卡
  53. tbs.add(
  54.     text='\uf1c5';
  55. )

  56. //动态添加更多选项卡
  57. tbs.add({
  58.             text='\uf008';
  59.             hasCloseButton = true;//允许显示关闭按钮
  60.         }//,"\res\set.aardio"
  61. )
  62. tbs.add(
  63.     text='\uf201';
  64. )

  65. //方式三: 后面追加形式绑定窗体
  66. //tbs.loadForm(6,"\res\test.aardio");

  67. //设置tabs选项卡默认选中项
  68. tbs.selIndex = 3;

  69. //也可以用下面的代码自定义关闭按钮的外观样式
  70. tbs.closeButton.skin(
  71.     background = {
  72.         hover = 0xFFe35c51;
  73.         active = 0xFF8f241b;
  74.         default = 0x99FFCC66;
  75.     }
  76.     color = {
  77.         hover = 0xFFFFFFFF;
  78.         active = 0xFFEEEEEE;
  79.         default = 0xCCFFFFFF;
  80.     }
  81. )

  82. //可以自定义关闭按钮在选项卡上的显示位
  83. tbs.beforeShowCloseButton = function(strip,rcStrip,rcCloseButton){
  84.     return rcStrip.left + 5, rcStrip.top + ( rcStrip.height() - rcCloseButton.height() )/2;
  85. }

  86. import win.ui.shadow;
  87. win.ui.shadow(winform,,10);

  88. winform.show();
  89. win.loopMessage();
复制代码
!
回复

使用道具 举报

151

主题

2373

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13048
 楼主| 发表于 2018-1-12 23:18:34 | 显示全部楼层
popdes 发表于 2018-1-12 23:07
tabs+fontAwesome 实现的简单界面, 真心简单,谢谢校长

感谢,
回复

使用道具 举报

151

主题

2373

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13048
 楼主| 发表于 2018-1-13 00:22:35 | 显示全部楼层
popdes 发表于 2018-1-12 23:07
tabs+fontAwesome 实现的简单界面, 真心简单,谢谢校长

创建标题栏按钮,在新版可简化为
import win.ui.simpleWindow;
var sw = win.ui.simpleWindow(winform,17,47,37)

回复

使用道具 举报

0

主题

10

帖子

66

积分

一级会员

Rank: 2

积分
66
发表于 2018-1-14 21:33:36 | 显示全部楼层
popdes 发表于 2018-1-12 23:07
tabs+fontAwesome 实现的简单界面, 真心简单,谢谢校长
更新了下, 添加了tabs的使用方法
同时添加了两三个 ...
  1. 界面真心好看啊,收藏级别的界面模板,编译成功了,但是运行的时候出错了
  2. {File}:~lib\win\ui\tabs.aardio
  3. {Line}:#426
  4. {Error}:
  5. {File}:res\layuitable.aardio
  6. {Line}:#19
  7. {Error}:import web.kit.form failed :

  8. {File}:lib\web\kit\form.aardio
  9. {Line}:#6
  10. {Error}:import web.kit failed :

  11. {File}:lib\web\kit\_.aardio
  12. {Line}:#10
  13. {Error}:Cannot load library '~\lib\web\kit\.dll\wke.dll'.  
复制代码
回复

使用道具 举报

29

主题

149

帖子

850

积分

荣誉会员

吃白菜的鸟

Rank: 8Rank: 8

积分
850
发表于 2018-1-14 22:00:01 | 显示全部楼层

要是编译为独立exe的话,要把几个二级界面中使用webkit功能的代码前面那个允许编译为独立那句的注释解除,然后在工程中设置所有文件内嵌,手机码字,提供不了截图了
!
回复

使用道具 举报

0

主题

10

帖子

66

积分

一级会员

Rank: 2

积分
66
发表于 2018-1-14 23:59:03 | 显示全部楼层
popdes 发表于 2018-1-14 22:00
要是编译为独立exe的话,要把几个二级界面中使用webkit功能的代码前面那个允许编译为独立那句的注释解除 ...

谢谢您这么晚还给我回复,小菜鸟一枚给您添麻烦啦,
回复

使用道具 举报

1

主题

52

帖子

347

积分

培训班

积分
347
发表于 2018-1-15 08:37:06 | 显示全部楼层
很强大,收藏!!!!
--雪之梦--
回复

使用道具 举报

0

主题

10

帖子

66

积分

一级会员

Rank: 2

积分
66
发表于 2018-1-15 20:35:15 | 显示全部楼层
已经编译发布成功了哈哈,感谢xauto前辈的指导,只需在main文件导入 import web.kit.portable  这个库就行了,会提示下载,等下载完,发布就不会出错了,小菜鸟一枚,再次感谢两位的帮忙,辛苦啦(拥抱),让我少走了不少弯路,学到了很多东西。
回复

使用道具 举报

2

主题

51

帖子

307

积分

二级会员

Rank: 3Rank: 3

积分
307
发表于 2018-1-18 13:26:40 | 显示全部楼层
仿微信界面时发现,tbs成员太多的情况下下方会出现一个下拉的按钮,稍微有点丑,失去美感了。如果能变成滑块,像列表框一样展示出来就会漂亮狠多,滑块也可以自定义样式
回复

使用道具 举报

151

主题

2373

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13048
 楼主| 发表于 2018-1-18 19:40:38 | 显示全部楼层
幻月 发表于 2018-1-18 13:26
仿微信界面时发现,tbs成员太多的情况下下方会出现一个下拉的按钮,稍微有点丑,失去美感了。如果能变成滑 ...


下拉按钮也是一个plus控件,你可以自己定义外观和样式,
一个下拉按钮,你要说“丑”就不厚道了,你去看看系统提供的选项卡,理解一下什么叫“丑”。
毕竟他是一个控件,不能做成浏览器。

再说了,选项卡拥挤到放不下,
在普通的软件界面中,本来就是很不常见的一个情况,一般都用不到的功能。
类似chrome浏览器,遇到这种情况,就直接挤到一起,没有什么滑块。

如果有进一步的需求,可以
1、重写选项卡对象的 showDropButton 函数,修改默认的下拉按钮。
2、可以考虑用HTMLayout,或浏览器控件实现你要的效果。

win.ui.tabs原则是小轻快,简洁,不求最好,如果越搞越复杂,就不如直接去用其他界面引擎。
回复

使用道具 举报

2

主题

51

帖子

307

积分

二级会员

Rank: 3Rank: 3

积分
307
发表于 2018-1-18 20:31:44 | 显示全部楼层
Jacen.He 发表于 2018-1-18 19:40
下拉按钮也是一个plus控件,你可以自己定义外观和样式,
一个下拉按钮,你要说“丑”就不厚道了,你去 ...

倒不是说plus丑,只是相对HL来讲的,我仔细想了一个一下,对于plus来说已经做得确实很不错了
根据用途来选择吧,或许仿微信电脑版界面来说,还是HL更适合一点
但平时做个简单软件界面什么的plus更方便
回复

使用道具 举报

151

主题

2373

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13048
 楼主| 发表于 2018-1-18 21:15:32 | 显示全部楼层
幻月 发表于 2018-1-18 20:31
倒不是说plus丑,只是相对HL来讲的,我仔细想了一个一下,对于plus来说已经做得确实很不错了
根据用途来 ...
我的理解,你其实要的是一个listview,win.ui.tabs是用来做选项卡、导航按钮的,这种弄个大滚动条上去?!
如果你说的是listview,的确用HTMLayout做这个是比较方便的,而且可以做的很漂亮。

但plus控件也可以跟htmlayout结合使用,htmlayout做tabs是没有plus控件方便的。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-4-24 03:24 , Processed in 0.093756 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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