97 lines
3.0 KiB
Markdown
97 lines
3.0 KiB
Markdown
---
|
||
title: 高级选型卡
|
||
updated: 2022-03-08 02:37:50Z
|
||
created: 2022-01-25 08:39:06Z
|
||
---
|
||
|
||
|
||
用plus制作高级选项卡，原理是plus制作菜单，根据需要弹出
|
||
|
||
```js
|
||
//list["padpath"]为菜单数组
|
||
winform.padpath.text=list["padpath"][2]//默认显示值
|
||
winform.psmpath.text=list["psmpath"][2]
|
||
|
||
winform.padpath.oncommand = function(id,event){
|
||
menu.setItemTexts(list["padpath"])//动态生成菜单
|
||
menu.popup(true,winform.padpath)//弹出菜单
|
||
}
|
||
winform.psmpath.oncommand = function(id,event){
|
||
menu.setItemTexts(list["psmpath"])
|
||
menu.popup(true,winform.psmpath)
|
||
}
|
||
|
||
menu.onOk = function(strip){
|
||
menu.$popBuddy.text = strip.text//$popBuddy为父控件句柄
|
||
}
|
||
```
|
||
|
||
# 折叠弹出菜单
|
||
当菜单项目太多时，弹出后会超出屏幕区域，以下代码可实现折叠效果
|
||
```js
|
||
tbs.clear()//清空原tbs
|
||
tbs.initPopup()//必须初始化
|
||
|
||
//tbs.setItemTexts(str[tmp].data)
|
||
for(i=1;#str[tmp].data;1){
|
||
//for(k,v in str[tmp].data){
|
||
tbs.add({
|
||
text=str[tmp].data[i];
|
||
})
|
||
|
||
//折叠过长的列表
|
||
var col = 6;
|
||
if( i%col == 0){
|
||
var tbrec = winform.tab1._defRect;
|
||
var x2,y2,cx2,cy2 = tbrec.left,tbrec.top,tbrec.right-tbrec.left,tbrec.bottom-tbrec.top
|
||
//x2,y2 = win.getPos(ctrl.hwnd,true)
|
||
var rec = tbs.strips[tbs.count()]._defRect;
|
||
rec.left=x2+(cx2+tbs.itemMargin)*math.floor(i/col)
|
||
rec.right = rec.left+cx2
|
||
rec.top=y2-cy2-tbs.itemMargin//
|
||
rec.bottom=rec.top+cy2
|
||
}
|
||
|
||
}
|
||
```
|
||
## 预览
|
||
|
||
## 原理
|
||
在创建菜单过程中新菜单的位置是根据上一个菜单自动计算的，故要实现折叠效果，只需在需要折叠的菜单创建前手动修改最后一个菜单项的位置，此时不能用`setItemTexts`自动创建
|
||
## 源码
|
||
|
||
[串口配置界面](串口配置界面.md)
|
||
|
||
[serialcfgv3.aardio](../_resources/serialcfgv3.aardio)
|
||
|
||
|
||
## 存在的问题
|
||
同样的代码在不同列表中表现不一
|
||
[数字华容道](../工具/aardio/数字华容道.md)中可正确折叠，但是 [串口配置界面](串口配置界面.md)不行
|
||
重新梳理原理和代码如下：
|
||
```js
|
||
tbs.clear()//清空原tbs
|
||
tbs.initPopup()//必须初始化
|
||
var col = 4; //每列最大项数量
|
||
var tbrec = winform.plus._defRect;
|
||
var x2,y2,cx2,cy2 = tbrec.left,tbrec.top,tbrec.right-tbrec.left,tbrec.bottom-tbrec.top
|
||
|
||
for(i=1;8;1){
|
||
tbs.add({
|
||
text=(i+2) ++ "阶";//最小为3阶
|
||
})
|
||
|
||
//折叠过长的列表
|
||
if( i%col == 1){//第n列的第一个元素为(n-1)*col+1，即余数为1
|
||
var rec = tbs.strips[#tbs.strips]._defRect;
|
||
rec.left=x2+(cx2+tbs.itemMargin)*math.floor(i/col)//floor为获取整数部分
|
||
rec.right = rec.left+cx2
|
||
rec.top=y2//此列的第一个数据顶头放置
|
||
rec.bottom=rec.top+cy2
|
||
}
|
||
|
||
}
|
||
```
|
||
以上代码放到 [串口配置界面](串口配置界面.md)时不正常，需还列顶头的项出现在前列最底处，第一列比其他列数量多1，如下图（col=6）
|
||
|