使用InputCell
我们之前定义的各种输入框,其实都是放在输入格中的,每个输入格被分成两部分,左边显示标签,右边显示输入框。
通过InputCell,我们可以对格子进行更多的控制。
一个例子
我们先用一个例子说明如何使用InputCell。
在运行这个例子之前,先下载下面的图片到"d:\web\images"目录中,名称为"vcode.jpg":
HttpRequest事件代码:
Select
Case e.Path
Case "test.htm"
Dim wb
As New
weui
wb.AddForm("","form1","test.htm")
With wb.AddInputGroup("form1","ipg1","基本资料")
.AddInput("xm","姓名","text")
'常规语法增加输入框
With .AddInputCell("ic1")
'通过InputCell增加输入框
.AddLabel("lnl","年龄",0)
'增加标签,0显示在左边
.AddInput("nl","number",1)
'增加输入框,1表示显示在中间
End With
With .AddInputCell("ic2",1)
'通过InputCell增加输入框,1表示突出显示
.AddLabel("lkh","卡号",0)
'增加标签,0显示在左边
.AddInput("kh","number",1).PlaceHolder=
"请输入卡号"
'增加输入框,1表示显示在中间
End With
With .AddInputCell("ic3",2)
'通过InputCell增加输入框,
2表示突出显示(含图标)
.AddLabel("lmm","密码",0)
'增加标签,0显示在左边
.AddInput("mm","text",1).PlaceHolder=
"请输入密码"
'增加输入框,1表示显示在中间
End With
With .AddInputCell("ic4")
'通过InputCell增加输入框
.AddLabel("lsj","手机",0)
'增加标签,0显示在左边
.AddInput("sj","text",1)
'增加输入框,1表示显示在中间
.AddVcodeButton("hym","获取验证码",2)
'增加获取验证码按钮,2表示显示在右边
End
With
With .AddInputCell("ic5")
'通过InputCell增加输入框
.AddLabel("lyzm","验证码",0)
'增加标签,0显示在左边
.AddInput("yzm","text",1)
'增加输入框,1表示显示在中间
.AddImage("pim",".\images\vcode.jpg",2)
'增加一个图片,2比表示显示在右边
End
With
With .AddInputCell("ic6")
'通过InputCell增加输入框
.AddSelect("zn","+86|+87|+88|+89",0)
'增加下拉列表,0表示显示在左边
.AddInput("dh","text",1).PlaceHolder
= "请输入联系电话"
'增加输入框,1表示显示在中间
End
With
End With
e.WriteString(wb.Build)
'生成网页
End
Select
下图是是通过手机访问的显示效果:
上面的例子基本涵盖了InputCell的全部用法。
增加InputCell的语法很简单:
AddInputCell(ID)
AddInputCell(ID,Warn)
ID | InputCell的ID |
Warn | 可选参数,设为1左边标签会套红显示,设为2右边还会显示一个红色警示图标。 |
AddLabel
InputCell中通过AddLabel方法增加标签,语法为:
AddLabel(ID, Text, Position)
ID | 标签ID |
Text | 标签内容 |
Position | 标签位置,0靠左显示,1居中显示,2靠右显示 |
AddInput
InputCell通过AddInput方法增加输入框,语法:
AddInput(ID, Type, Position)
ID | 输入框ID | ||||||||||||
Type | 输入框类型,可选值有:
|
||||||||||||
Position | 输入框位置,0靠左显示,1居中显示,2靠右显示 |
AddSelect
InputCell通过AddSelect方法增加列表输入框,语法:
AddSelect(ID, Values, Position)
ID | 列表输入框ID。 |
Values | 列表项目,用符号"|"隔开,例如"大专|本科|硕士|博士"。 |
Position | 标签位置,0靠左显示,1居中显示,2靠右显示 |
AddVcodeButton
InputCell通过AddVcodeButton方法增加类似"获取验证码"的按钮,语法:
AddVcodeButton(ID, Text, Position)
ID | 按钮ID |
Text | 按钮标题。 |
Position | 按钮位置,0靠左显示,1居中显示,2靠右显示 |
AddImage
InputCell通过AddImage方法增加图片,语法:
AddImage(ID, File, Postion)
ID | 图片ID |
File | 图片文件,包括路径。 |
Position | 图片位置,0靠左显示,1居中显示,2靠右显示 |