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的更多相关文章

  1. DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中

    绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...

  2. DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form

    添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

  3. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

  4. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  5. 前端JS开发框架-DHTMLX

    一:介绍 dhtmlxSuite是一个JavaScript库,提供了一套完整的Ajax -驱动UI组件.我们能够使用dhtmlxSuite构建 简洁界面,快速性能,和丰富用户体验的企业级web应用程序 ...

  6. DHTMLX 前端框架 建立你的一个应用程序教程(二)--设置布局

    Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中 布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form ...

  7. 2014-11-21 DHTMLX是什么

    什么是dhtmlx? dhtmlx是一套网页开发 的函式库,他提供了树状元件.数据方格组件.工具列等组件供开发 人员使用. dhtmlx组件是一个JavaScript 库,提供了一套完整的Ajax驱动 ...

  8. 前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi   一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家 ...

  9. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  10. Form 表单提交参数

    今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...

随机推荐

  1. eclipse新建文件模板默认charset=ISO-8859-1解决

    在安装目录下找到eclipse.ini用记事本打开,添加一行-Dfile.encoding=utf-8,就ok了. 这是应为模板中使用了encoding这个变量

  2. SE Homework 1 —An Error Impressed Me

    在对两个对象进行比较.判断是否相等时,直接用 == 放在两个对象中间,例如下面的代码: Infor i1 = new Infor(111,"AA"); Infor i2 = new ...

  3. Cruehead.1

    查壳   没有 我拖 alt+F9 到上面        入口处   下断 关键跳      略过   就没了 要实现 强暴  直接过... 仔细来看看... 那两个调用   都下断   看看  判断 ...

  4. div中显示页面

    在css中显示页面,在页面布局中很多时候都要在一个div 里显示某些页面.在这里写下我用到的一种方式. <script type="text/javascript"> ...

  5. 项目用到的icarouls类和UIEffectDesignerView类，菜单技巧，构思（金方圆）

    // //  MenuHomeViewController.m //  HFYS // //  Created by Showsoft_002 on 13-8-14. //  Copyright (c ...

  6. android库站点

    图片加载库picasso:让本地图片.网络图片的加载变得如此简单. 引导页面的开源框架 guideshow自带小动画,但sdk要求18+ AppIntro界面很简约漂亮 circleindicator ...

  7. CLR via C# 3rd - 06 - Type and Member Basics

    1. Different Kinds  of Type Members        A type can define zero or more of the following kinds of ...

  8. Java设计模式（一） 简单工厂模式不简单

    摘要:本文介绍了简单工厂模式的概念,优缺点,实现方式,以及结合Annotation和反射的改良方案(让简单工厂模式不简单).同时介绍了简单工厂模式(未)遵循的OOP原则.最后给出了简单工厂模式在JDB ...

  9. SQL_Server_2008修改sa密码的方法

    转载自:http://blog.csdn.net/templar1000/article/details/20211191 1. 先用Window身份验证方式登陆进去,选择数据库实例,右键选择属性—— ...

  10. mysql 根据某字段特定值排序

    比如: 表 :user 字段:orders (值为 1,2,3) 要求根据字段  orders 按2 -> 1 -> 3 排序 使用以下语句实现SELECT *FROM userORDER ...