---
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
			}
			
		}
```
## 预览
![ca6550d1787218a2240bda829ef5eea8.png](../../_resources/ca6550d1787218a2240bda829ef5eea8.png)
## 原理
在创建菜单过程中新菜单的位置是根据上一个菜单自动计算的，故要实现折叠效果，只需在需要折叠的菜单创建前手动修改最后一个菜单项的位置，此时不能用`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）
![a91cdab0ba285360474ed4ee55dc8a0a.png](../../_resources/a91cdab0ba285360474ed4ee55dc8a0a.png)