引用外部文件

Foxtable为WeUI提供了一个AppendHTML方法，用于添加原生的HTML代码。

语法：

AppendHTML(HTML，Head)

很少用这个方法生成可视的HTML元素，通常用来添加第三方库文件，如CSS或JavaScript文件，或动态合成JavaScript代码。

引用外部文件

假定有下图所示的一个手机录入界面，希望录入单价、折扣和数量后，能自动计算出金额 ，而且当金额超过30000时，字体颜色自动变为红色：

设计步骤

1、在"d:\web"目录下，建立一个子目录lib，在这个目录建立一个文本文件，文件名为"mark.css"，文件内容为：

input.mark{color:red;}

再另外建立一个文本文件，文件名为"calc.js"，文件内容为：

function markCalc(){
    je.value=dj.value * sl.value * (1 - zk.value);
    if(je.value >= 30000){
        if(!je.classList.contains('mark')){
            je.classList.add('mark');
        }
    }
    else{
        if(je.classList.contains('mark')){
            je.classList.remove('mark');
        }
    }
}

提示：

dj.value表示id为"dj"的输入框框的值，需要注意的时候，WeUI在生成网页时，会自动将所有id转换为小写，所以即使你在HttpRequest事件中设置的id是大写的"DJ"，在js代码中依然应用用小写的"dj"。

2、将HttpRequest事件代码设置为：

Select Case e.Path
    Case "addnew.htm"
        Dim wb As New weui
        wb.AppendHTML("<link rel='stylesheet' href='./lib/mark.css'/>",True)  '引入样式文件,参数True表示添加到head区
        wb.AddForm("","form1","addnew.htm")
        With wb.AddInputGroup("form1","ipg1","新增订单")
            .AddInput("cp","产品","text")
            .AddInput("gy","雇员","text")
            .AddInput("kh","客户","text")
            .AddInput("dj","单价","number").Attribute = "step='0.1' onchange='markCalc()'" '事件调用
            .AddInput("zk","折扣","number").Attribute = "step='0.01' onchange='markCalc()'"
            .AddInput("sl","数量","number").Attribute = "onchange='markCalc()'"
            .AddInput("je","金额","number")
            .AddInput("rq","日期","date")
        End With
        With wb.AddButtonGroup("form1","btg1",True)
            .Add("btnok","确定")
        End With
        wb.AppendHTML("<script src='./lib/calc.js'></script>") '引入脚本文件
        e.WriteString(wb.Build)
End Select

再谈Attribute属性

这里特意通过Attribute来设置step属性。

Attribute可以用一行代码集中设置各种属性，例如下面的代码设置折扣的输入精度为0.01，最小值为0，最大值为0.15，值发生变化后调用calc函数。

.AddInput("zk","折扣","number").Attribute = "step='0.01' min='0' max='0.15' onchange='calc()'"

遗憾的是，精度、最大值和最小值属性在iOS平台的设备上是无效的。