使用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 输入框类型,可选值有:
text 文本输入框,参考:文本输入框
password 密码输入框,参考:文本输入框
date 日期输入框,参考:日期时间输入框
time 时间输入框,参考:日期时间输入框
datetime-local 日期时间输入框,参考:日期时间输入框
number 数值输入框,参考:数值输入框
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靠右显示


本页地址:http://www.foxtable.com/mobilehelp/topics/0051.htm