本文主要介绍了如何创建一个表单,以及如何提交数据,这里当然指的是传统方式的提交数据,webix的请求是post
请求,做出来的效果如下,代码在下面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单</title>
<!-- Webix CSS file-->
<link rel="stylesheet" href="codebase/webix.css" type="text/css">
<!-- Webix JS file-->
<script src="codebase/webix.js" type="text/javascript"></script>
</head>
<body>
<div id="南航"></div>
<script type="text/javascript">
/* 我理解的webix实际上就是一个控制样式的东西,比如下面的表单就是以上面的div作为容器,所以它必须依附于div,所以要
写在script里面 */
webix.ui({
// webix 类似一个javascript里面的函数,在里面声明的变量,出了这个范围,就会失去作用,也就是undefined
container:"南航", //本人名叫南航,这是上面div的id,相当用上面的div作为一个容器
view:"form" , //view指明了该div是什么东西,这里是form表单的意思
id:"form1",
width:350,
elements:[{view:"text",label:"用户名"},//elments表示表单里具体的内容,每一个json就是一行
{view:"text",type:"password",label:"密码",name:"password"},//password是特殊的本文,所有有type这个属性
{cols:[ //表单第三行出现了两列,所以要用cols属性来表示,里面是一个数组
{view:"text",label:"验证码"},
{view:"button",id:"vc",name:"vc",type:"imageTop",image:"code",
click:vc,width:80} //因为验证码类似于图片按钮,所以类型为imageTop或者为image
]},
{cols:[{view:"label",type:" ",width:100}, //label是可以写HTML的,所以这里表示空格
{view:"button",id:"btn_login",value:"登录",type:"form",align:"left",width:100,
click:send}
]}
] //数据是通过一个名叫send的函数进行发送,函数要写在webix外面的地方
})
function vc(){
$$("vc").define("image",'code?rand'+Math.random());//webix通过$$("id")来取得元素
$$("vc").refresh();
}
function send(){
webix.send("login",$$("form1").getValues()); //login为请求的地址,后面为form所有元素的值
//这样就完成了一个表单的数据的发送
}
</script>
</body>
</html>