新版高级选项卡演示

JacenHe · 发表于 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();

popdes · 发表于 2018-1-12 23:07:36

本帖最后由 popdes 于 2018-1-14 15:08 编辑

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

import win.ui;
import gdip.fontAwesome;
/*DSG{{*/
var winform = win.form(text="aardio form";right=939;bottom=772;bgcolor=3947580;border="none")
winform.add(
custom2={cls="custom";left=121;top=43;right=939;bottom=773;bgcolor=8421376;db=1;dl=1;dr=1;dt=1;z=4};
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};
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};
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}
)
/*}}*/
//设置右上角最小化/最大化/关闭按钮图形
import win.ui.simpleWindow;
win.ui.simpleWindow(winform,17,47,43)
//设置拖动窗体功能
winform.wndproc = function(hwnd,message,wParam,lParam){
select( message ) {
case 0x201/*_WM_LBUTTONDOWN*/{
winform.hitCaption();
}
}
}
//创建高级选项卡
import win.ui.tabs;
//至少要添加2个创建好的选项卡(作为设计模板,创建成功后可清除)
var tbs = win.ui.tabs(winform.strip2,winform.strip1);
//指定选项卡的外观样式
tbs.skin(
background = {
disabled = 0xFF3C3C3C;
}
color = {
hover = 0xFF3a9ff7;
}
checked = {
color = {
hover = 0xFF3a9ff7;
default = 0xFF3a9ff7;
}
}
)
//设置的模版项也可以显示关闭按钮
winform.strip2.hasCloseButton = true;
//方式一:给模版项绑定加载的窗体
//tbs.loadForm(1,"\res\aa.aardio");
//tbs.loadForm(2,"\res\layuitable.aardio");
//动态添加更多选项卡
tbs.add({
text='\uf216';
}//,"\res\layui.aardio" //方式二:直接绑定需要加载的窗体
)
//动态添加更多选项卡
tbs.add(
text='\uf1c5';
)
//动态添加更多选项卡
tbs.add({
text='\uf008';
hasCloseButton = true;//允许显示关闭按钮
}//,"\res\set.aardio"
)
tbs.add(
text='\uf201';
)
//方式三: 后面追加形式绑定窗体
//tbs.loadForm(6,"\res\test.aardio");
//设置tabs选项卡默认选中项
tbs.selIndex = 3;
//也可以用下面的代码自定义关闭按钮的外观样式
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.left + 5, rcStrip.top + ( rcStrip.height() - rcCloseButton.height() )/2;
}
import win.ui.shadow;
win.ui.shadow(winform,,10);
winform.show();
win.loopMessage();

复制代码

JacenHe · 发表于 2018-1-12 23:18:34

popdes 发表于 2018-1-12 23:07
tabs+fontAwesome 实现的简单界面, 真心简单,谢谢Jacen

感谢,

JacenHe · 发表于 2018-1-13 00:22:35

popdes 发表于 2018-1-12 23:07
tabs+fontAwesome 实现的简单界面, 真心简单,谢谢Jacen

创建标题栏按钮，在新版可简化为

import win.ui.simpleWindow;
var sw = win.ui.simpleWindow(winform,17,47,37)

fatalis · 发表于 2018-1-14 21:33:36

popdes 发表于 2018-1-12 23:07
tabs+fontAwesome 实现的简单界面, 真心简单,谢谢Jacen
更新了下, 添加了tabs的使用方法
同时添加了两三个 ...

界面真心好看啊，收藏级别的界面模板，编译成功了，但是运行的时候出错了
{File}:~lib\win\ui\tabs.aardio
{Line}:#426
{Error}:
{File}:res\layuitable.aardio
{Line}:#19
{Error}:import web.kit.form failed :
{File}:lib\web\kit\form.aardio
{Line}:#6
{Error}:import web.kit failed :
{File}:lib\web\kit\_.aardio
{Line}:#10
{Error}:Cannot load library '~\lib\web\kit\.dll\wke.dll'.

复制代码

popdes · 发表于 2018-1-14 22:00:01

fatalis 发表于 2018-1-14 21:33

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

fatalis · 发表于 2018-1-14 23:59:03

popdes 发表于 2018-1-14 22:00
要是编译为独立exe的话，要把几个二级界面中使用webkit功能的代码前面那个允许编译为独立那句的注释解除 ...

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

kaba47 · 发表于 2018-1-15 08:37:06

很强大，收藏！！！！

fatalis · 发表于 2018-1-15 20:35:15

已经编译发布成功了哈哈，感谢xauto前辈的指导，只需在main文件导入 import web.kit.portable 这个库就行了，会提示下载，等下载完，发布就不会出错了，小菜鸟一枚，再次感谢两位的帮忙，辛苦啦（拥抱），让我少走了不少弯路，学到了很多东西。

		自动登录	找回密码
密码			注册会员