DHTMLX-Form
DHTMLX-Form
dhtmlxForm提供了一个标准形式与一些有用的补充,如不同风格,使用的数据从客户端和服务器端,与其他dhtmlx组件的集成、验证等。
例子
<!DOCTYPE html>
<html>
<head>
<title>Web skin</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../skins/web/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<script>
var myForm, formData;
function doOnLoad() {
formData = [
{type: "settings", position: "label-right", labelWidth: "auto", inputWidth: 130},
{type: "label", label: "Web Skin"},
{type: "checkbox", label: "Sync data with FTP server", checked: true, list:[
{type: "settings", labelWidth: 90, inputWidth: 200, position: "label-left"},
{type: "input", name: "ftp_server", label: "Server", value: "ftp://backup.mydomain.com"},
{type: "input", name: "ftp_login", label: "Login", value: "user"},
{type: "password", name: "ftp_pwd", label: "Password", value: "password"},
{type: "select", name: "ftp_sync", label: "Sync every", options:[
{value: "day", text: "day"},
{value: "2ndday", text: "second day"},
{value: "friday", text: "friday"},
{value: "2ndfriday", text: "second friday", selected: true},
{value: "Month", text: "last friday in a month"}
]},
{type: "checkbox", name: "ftp_log", value: 1, label: "Enable log", checked: true}
]},
{type: "checkbox", label: "Init system hardware upgrade", offsetTop: 10, checked: true, list: [
//
{type: "settings", labelWidth: 90, inputWidth: 100, position: "label-left"},
{type: "calendar", label: "Start Date", name: "reminder", enableTime: false,
calendarPosition: "right", value:"2013-03-01" },
{type: "select", label: "Duration", options:[
{value: "day", text: "day"},
{value: "week", text: "week", selected: true},
{value: "2weeks", text: "two weeks"}
]}
]},
{type: "checkbox", label: "Use custom UI colors", checked: true, offsetTop: 10, list:[
{type: "settings", labelWidth: "auto", inputWidth: "auto"},
{type: "fieldset", label: "Font", inputWidth: 160, list: [
{type: "radio", name: "fontcolor", label: "Black", checked: true},
{type: "radio", name: "fontcolor", label: "Blue"},
{type: "radio", name: "fontcolor", label: "Green"}
]},
{type: "newcolumn"},
{type: "fieldset", label: "Background", inputWidth: 160, offsetLeft: 30, list:[
{type: "radio", name: "bgcolor", label: "White", checked: true},
{type: "radio", name: "bgcolor", label: "Yellow"},
{type: "radio", name: "bgcolor", label: "Gray"}
]}
]},
{type: "checkbox", label: "Custom font", checked: true, offsetTop: 10, list:[
{type: "combo", label: "", inputWidth: 120, options: [
{value: "tahoma", text: "Tahoma"},
{value: "arial", text: "Arial", selected: true},
{value: "verdana", text: "Verdana"}
]},
{type: "newcolumn"},
{type: "combo", label: "", inputWidth: 70, offsetLeft: 5, options: [
{value: "12", text: "12px"},
{value: "13", text: "13px"},
{value: "14", text: "14px", selected: true}
]}
]},
{type: "checkbox", label: "Upload new data", checked: true, offsetTop: 10, list:[
{type: "fieldset", label: "Files", inputWidth: 350, list:[
{type: "upload", name: "myFiles", inputWidth: 330,
url: "../07_uploader/php/dhtmlxform_item_upload.php", _swfLogs: "enabled",
swfPath: "../../../codebase/ext/uploader.swf",
swfUrl: "../../samples/07_uploader/php/dhtmlxform_item_upload.php"}
]}
]},
//
{type: "checkbox", label: "Yes! I'm sure to save changes", offsetTop: 10, checked: 1, list:[
//
{type: "button", value: "Save", offsetLeft: 50, offsetTop: 10, inputWidth: 50},
{type: "newcolumn"},
{type: "button", value: "Cancel", offsetLeft: 8, offsetTop: 10}
]}
];
myForm = new dhtmlXForm("myForm", formData);
myForm.setFocusOnFirstActive();
}
</script>
</head>
<body onload="doOnLoad();">
<div id="myForm"></div>
</body>
</html>效果
DHTMLX-Form的更多相关文章
- DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中
绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form
添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...
- 前端JS开发框架-DHTMLX
一:介绍 dhtmlxSuite是一个JavaScript库,提供了一套完整的Ajax -驱动UI组件.我们能够使用dhtmlxSuite构建 简洁界面,快速性能,和丰富用户体验的企业级web应用程序 ...
- DHTMLX 前端框架 建立你的一个应用程序教程(二)--设置布局
Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中 布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form ...
- 2014-11-21 DHTMLX是什么
什么是dhtmlx? dhtmlx是一套网页开发 的函式库,他提供了树状元件.数据方格组件.工具列等组件供开发 人员使用. dhtmlx组件是一个JavaScript 库,提供了一套完整的Ajax驱动 ...
- 前端angularjs+requirejs+dhtmlx 后端asp.net webapi
享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi 一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家 ...
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
- Form 表单提交参数
今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...
随机推荐
- 最新ecshop v2.7.3版本去版权完全版
该偏文章模板堂搜集总结,包括ecshop前台版权,ecshop后台版权,一个都不留,干干净净,推荐收藏 一.去掉网页标题 Powered by ECShop 打开includes/lib_main.p ...
- Loadrunner 脚本错误问题汇总(非原创，部分转自互联网)
在运行脚本回放过程中,有时会出现错误,这在实际测试中是不可避免的,毕竟自动录制生成的脚本难免会有问题,需要运行脚本进行验证,把问题都解决后才加入到场景中进行负载测试.下面结合常用的协议(如Web.We ...
- DWR同步异步设置
做项目时遇到一个问题,使用DWR发现js总是执行完了之后再执行DWR的内容,后来发现然来DWR也有一种同步机制:DWREngine.setAsync(false); 还需要在代码末尾恢复异步DWREn ...
- Linux学习之路—磁盘分区
1.各硬件设备在Linux中的文件名 在Linux系统中,每个设备都被当做一个文件来对待,同时在Linux系统中,几乎所有的硬件设备文件都在/dev这个目录中. 设备 设备在Linux内的文件名 ID ...
- 利用 ipset 封禁大量 IP
使用 iptables 封 IP,是一种比较简单的应对网络攻击的方式,也算是比较常见.有时候可能会封禁成千上万个 IP,如果添加成千上万条规则,在一台注重性能的服务器或者本身性能就很差的设备上,这就是 ...
- ubuntu14 opencv python 安装
本文记录了Ubuntu 14.04下使用源码手动安装OpenCV 3.0的过程.此外记录了在Python中安装及载入OpenCV的方法. 1.安装OpenCV所需的库(编译器.必须库.可选库) GCC ...
- WPF学习笔记——依赖属性（Dependency Property）
1.什么是依赖属性 依赖属性是一种可以自己没有值,并且通过Binding从数据源获得值(依赖在别人身上)的属性,拥有依赖属性的对象被称为"依赖对象". 依赖项属性通过调用 Regi ...
- 【转】JavaScript获取节点类型、节点名称和节点值
DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...
- uart启示2_异步操作的bug
发现代码中的隐藏bug真的是一件令人振奋的事情,当然也会疲倦那么一下午! 这个bug只有在一种在一个2604计数周期的一种情况下发生,所以即使是大量的仿真,未必也会发现的了,只有在以后的设计过程中,遇 ...
- flume 不报错但是不能正常使用
flume-ng agent --conf ./conf/ --conf-file ./conf/test1.conf --name a1 -Dflume.root.logger=INFO,conso ...