OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1490064973265
注意 转载须保留原文链接,译文链接,作者译者等信息。  

表单提交与保存

OnceVI是基于SVG来进行数据绑定和可视化的。目前各大主流的专业设计软件(illustrator、autocad等)均支持转化成svg格式。您也可以在网上找到海量的svg矢量图资源,例如: www.freepik.com,您不需要任何设计即可实现一个精美的报表界面。在这里我们将介绍如何通过对相应svg模板进行表单绑定,实现表格信息的提交与保存。

以网站登录系统模板为例(见下图),在界面左侧选择edit field tool,模板上添加输入框,并进行数据绑定。

Form Template

在Data Binding工具栏中,目标对象为Form格式,可供选择的输入类型(Type)包括:

text: 文本
textarea: 文本区域
password: 密码
file: 文件
radio: 单选
checkbox: 复选

默认值绑定

此处选择文本模式,在edit data source对话框中编辑数据源加载的地址,预览后保存。然后在需绑定对象上选择目标数据源,该目标数据值为填写表单的默认值,可在后续表单填写过程中按照实际内容填写。 data source

提交地址设定

进行表格提交,选定模板中含login字样的矩形框图案,将其设置为提交按钮。勾选data binding对话框中的submit选项。

我们这里使用oncevi.sample,OnceDoc的一个扩展插件来处理后台请求。基于onceio: https://github.com/OnceDoc/onceio 模块化Web框架编写。

源码地址:https://github.com/OnceDoc/OnceVI/tree/master/svgsample

您可以以OnceDoc插件的形式编写后台数据Web Service。或者用其它编程语言编写独立的数据源WebService或表单接收请求接口,此时只需在提交时选定 “Using Proxy” 即可解决跨域问题,否则会新弹出窗口进行提交。

并在submit url填入保存地址/oncevi.sample/api/post 默认为当前域。

 

data binding

将生成的表单进行预览,如下图所示,username 和 password 均为默认值。

demo1

模拟用户登录,并点击LOGIN,表单信息将被提交,并以对话框形式反馈提交信息。 demo2

 

示例地址: http://cn.oncedoc.com/oncevi.player/oncevi.player.html?file=demo/svgbinder/LoginTemplate.svg

更多示例: http://cn.oncedoc.com/page/view/oncevi-demo

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 开源项目 RethinkDB 关闭,创始人总结失败教训
  2. Github Pages疑似被封: 再也不能用Pages搭建个人博客了
  3. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  4. 关于华为优化30、40老员工的争议
  5. OnceVI前后端分离的数据可视化报表工具简介
  6. 2016 年崛起的 JS 项目
  7. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  8. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  2. OnceDB支持全文搜索和关系查询的Redis内存数据库:驱动安装及使用教程
  3. 在OnceIO(Node.JS)中用Redis储存Session
  4. OnceIO的模块拦截与注入:模板文件路由重定向与Model数据改写
  5. OnceIO模块开发:模块注册、模块路由、静态文件重定向以及如何开发与设计一个功能扩展模块
  6. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  7. NodeJS教程:基于OnceIO框架实现文件上传和验证
  8. 在Debian(Raspberry Pi)树莓派上安装NodeJS
  9. OnceIO(Node.JS)服务器端Cookie设置、添加、删除、显示及其实现原理
  10. OnceIO(Node.JS)的网页(模板)的引用与嵌套

 关键字 - JavaScript
  1. 如何用CSS将select/option文本居中或居右对齐
  2. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  3. JavaScript中怪异的地方
  4. 在JavaScript中创建命名空间的几种写法
  5. JavaScript中的继承,构造函数以及new关键字的作用
  6. 纽约时报使用Html5 WebRTC记录访问者IP地址
  7. 正则中test、exec、match的简单区别,以及括号的用法
  8. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  9. 2015年的JavaScript:Angular之类的框架将被库取代
  10. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号