代码示例1：
import win.ui;
/*DSG{{*/
var winform = ..win.form( right=586;bottom=414;parent=...;text="Dropdown-select";border="resizable" )
winform.add( )
/*}}*/
import console;
import web.layout;
var wbLayout = web.layout( winform );
wbLayout.html = /**
<body>
爱好：
<select #test>
<option>体育</option>
<option>足球</option>
<option>篮球</option>
<option>羽毛球</option>
</select>
<div #sel-html></div>
</body>
**/
wbLayout.css = /**
html { font: system; }
**/
//输出HTMLayout中select的源码就知道是为什么了
wbLayout.getEle("sel-html").innerText = wbLayout.getEle("test").outerHTML
var ltPopup = wbLayout.getEle("test").child(3)
ltPopup.child(2).detach(); //在IDE函数提示中,或者库源码中都可以看到此函数分离节点
var ltEle = ltPopup.child(3).clone(-1); //复制一个节点并添加到尾部
ltEle.innerHTML = "新增的节点"
winform.show();
win.loopMessage();
return winform;
|
代码示例2：
用 innerHTML 动态生成字符串也可以，这也是HTMLayout官方推荐的方法。
import win.ui;
/*DSG{{*/
var winform = ..win.form( right=586;bottom=414;parent=...;text="Dropdown-select";border="resizable" )
winform.add( )
/*}}*/
import console;
import web.layout;
var wbLayout = web.layout( winform );
wbLayout.html = /**
<body>
<div #sel />
</body>
**/
wbLayout.getEle("sel").innerHTML = /*<select #test>
<option>体育</option>
<option>足球</option>
<option>篮球</option>
<option>羽毛球</option>
</select>
*/
winform.show();
win.loopMessage();
return winform;
|
代码示例3：
import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=276;parent=...;right=797;text="Dropdown-select" )
winform.add( )
/*}}*/
import web.layout;
import web.layout.behavior;
var wbLayout = web.layout( winform );
wbLayout.html = /**
<body>
<div id="addselect">
<div id="addtxt">请选择你喜欢的体育项目：</div>
<div id="sel" >
<select id="test">
<option>足球</option>
<option>篮球</option>
<option>羽毛球</option>
</select>
</div>
<div id="txt">追加体育项目：<input type="text" id="addoption" novalue="增加一个体育名称" /></div>
<button id="mybutton1">追加一个下拉式选项中的选项</button>
<button id="mybutton2">替换所有下拉式选项中的选项，但也是固定的选项</button>
</div>
</body>
**/
namespace web.layout.behavior.command1{
onButtonClick = function (ltTarget,ltEle,reason,behaviorParams) {
// wbLayout.getEle("test").child(3).insertAdjacentHTML("beforeEnd","<option>乒乓球</option>") //增加固定的
// wbLayout.getEle("test").child(3).insertAdjacentHTML("beforeEnd","<option>"+wbLayout.getEle("addoption").innerText+"</option>") //增加动态的，但不能为空，否则给出错误提示
if(wbLayout.getEle("addoption").innerText!=null){ //非空值时追加，但没有给出是否重复判定
wbLayout.getEle("test").child(3).insertAdjacentHTML("beforeEnd","<option>"+wbLayout.getEle("addoption").innerText+"</option>")
winform.msgbox("成功插入，请查看下拉列表项！","aardio提示")
}
else{
winform.msgbox("输入为空值，请重新输入！","aardio提示")
}
}
}
namespace web.layout.behavior.command2{
onButtonClick = function (ltTarget,ltEle,reason,behaviorParams) {
wbLayout.getEle("sel").innerHTML =
/*<select #test>
<option>足球</option>
<option>篮球</option>
<option>羽毛球</option>
<option>乒乓球</option>
</select>
*/
}
}
wbLayout.css = /**
#mybutton1{
behavior:~command1;
}
#mybutton2{
behavior:~command2;
}
#addselect{
flow:h-flow;
}
#addtxt{
width:200px;
}
#sel{
width:100px;
}
#txt{
width:150px;
}
#addoption:empty{
color:graytext;
}
**/
//可以与数据库连了
var input=wbLayout.createEle("option")
var str=wbLayout.$1("select")
str.child(3).append(input)
input.value="自行车"
winform.show();
win.loopMessage();
|
原文链接：https://bbs.aardio.com/forum.php?mod=viewthread&tid=8139
