Dwz(J-UI)框架--入门
http://www.cnblogs.com/chenyongsai/p/4933982.html
Dwz(J-UI)框架--入门
一、了解
概述:是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
目的:简单实用、扩展方便(在原有架构基础上扩展方便)、快速开发、RIA思路、轻量级
使用:用html扩展的方式来代替javascript代码
思路:根据官网页面样例,查看官方代码包,查阅相关子页面,参阅帮助文档,添加固定的标签属性语法
优势:第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量,开源免费
劣势:文档少,开发者少,共享资源少,帮助文档不易阅读
二、资料
官方地址(在线演示地址):http://j-ui.com/ 或 http://www.duqn.com/
源码包下载地址:https://codeload.github.com/dwzteam/dwz_jui/zip/master
帮助文档:解压源码包--》dwz_jui-master\doc
视频讲解:http://pan.baidu.com/s/1bnngfqJ
三、源码目录结构
1.文件夹:
idea:构建代码发布生成的配置文件(不用理会)
bin:压缩了js文件夹里的dwz框架js文件代码与压缩工具
chart:图像化模块的js代码
demo:存储临时演示数据文件
doc:帮助文档
js:Dwz框架核心js代码库
themes:样式表CSS代码
uploadify:上传控件
xheditor:官网默认小图标样式
2.html文件:
index.html:主页面
...
xxxx.html:内容代码片段
...
3.配置文件:
dwz.frag.xml:初始化配置文件
四、Hellow World
1.导入以下依赖文件到工程(具体依赖关系,可以查看index.html所引用的依赖文件)
2.启动服务,访问index.html
页面效果:
五、模块化复用
在官方访问地址里找到你需要的页面效果:
如上所示:页面内容区域所展示的样式效果代码片段就在demo_page1.html文件里
六、数据交互
1.表单提交
提交格式:
默认提交:<Form onsubmit="return validateCallback(this);" action='...' method='...'>
navTab类型页面提交:<Form onsubmit="return validateCallback(this,navTabAjaxDone);" action='...' method='...'>
dialog类型页面提交:<Form onsubmit="return validateCallback(this,dialogAjaxDone);" action='...' method='...'>
服务器返回数据:
json:{
"statusCode":"200",
"message":"操作成功",
"navTabId":"",
"rel":"",
"callbackType":"closeCurrent",
"forwardUrl":""
}
提示:
callbackType如果是closeCurrent就会关闭当前tab,只有callbackType="forward"时需要forwardUrl值
navTabAjaxDone这个回调函数基本可以通用了,如果还有特殊需要也可以自定义回调函数,如果表单提交只提示操作是否成功, 就可以不指定回调函数. 框架会默认调用DWZ.ajaxDone()
...
详细情况,请查看在线帮助文档:http://j-ui.com//doc/dwz-user-guide.pdf
Dwz(J-UI)框架--入门的更多相关文章
- Reactive UI -- 反应式编程UI框架入门学习(二)
前文Reactive UI -- 反应式编程UI框架入门学习(一) 介绍了反应式编程的概念和跨平台ReactiveUI框架的简单应用. 本文通过一个简单的小应用更进一步学习ReactiveUI框架的 ...
- mintUI 移动UI框架入门
入门地址: http://mint-ui.github.io/#!/zh-cn 下载依赖cd到项目目录下, 下载我们用的UI框架: 分为全局引入和按需引入 全局引入: npm install mint ...
- Reactive UI -- 反应式编程UI框架入门学习(一)
推荐一个反应式编程的MVVM跨平台框架. 反应式编程 反应式编程是一种相对于命令式的编程范式,由函数式的组合声明来构建异步数据流.要理解这个概念,可以简单的借助Excel中的单元格函数. 上图中,A1 ...
- 前端UI框架《Angulr》入门
Angulr 项目的名称为 Angulr,对!没错!就是少个 a,少个 a 就是它正确的拼写. 是一个以 Bootstrap 和 AngularJS 为基础,并使用了大量前端开源组件合成的一个前端UI ...
- [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码
MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- 谷歌移动UI框架Flutter入门
引言 作为Android开发人员,很有必要学习一下Flutter,那么Flutter是什么呢?它到底有什么作用呢?我们一一来揭晓. Flutter是谷歌的移动UI框架,可以快速在iOS和Android ...
- 【转】推荐10款最热门jQuery UI框架
推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...
- 基础知识漫谈(2):从设计UI框架开始
说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas.svg等等. 基于这些UI工 ...
随机推荐
- Centos7 配置ssh 免秘钥登陆
1.yum install -y openssh 2.servier1: ssh-keygen -t rsa #有提示的直接enter 3.server 2: ssh-keygen -t rsa # ...
- IPMS 元件实作
一.改用zg框架的jsp 1.引入表头和表尾jsp <%@ include file="../../jsp/menuHeader.jsp"%> <%@ inclu ...
- Java HashMap,LinkedHashMap,TreeMap
Java为数据结构中的映射定义了一个接口java.util.Map;它有四个实现类,分别是HashMap Hashtable LinkedHashMap 和TreeMapMap主要用于存储健值对,根据 ...
- sql:查询课程号'0312091006'成绩排名第5到第10之间的学生学号
select top 6 sno from (select top 10 sno,mark from student_Coursewhere ccno='0312091006' order by ma ...
- mysql数据类型长度
1个字节= 8位 tinyint 为一个字节 2的8次方= 256 所以最多存储到256 日期和时间数据类型 MySQL数据类型 含义 date 3字节,日期,格式:2014-09-18 time ...
- Java的Reflection机制
什么时候使用Reflection: 在java语言中,创建一个类的对象通常使用new operator,但是如果预先不知道Class的名字,类名是在程序运行过程中通过参数传递过来,就没法使用这种方法了 ...
- golang开发集训营
初识golang Go与VScode开发工具 Golang开门见山
- loadrunner12.5-vugen回放脚本提示:URL=“http://www.testclass.net/js/scripts.js”的常规连接当前无套接字 (16 不足) 可用,是什么意思呢?怎么理解呢?
会发生这个报错,是因为每个浏览器都有一个限制,检查哪个浏览器客户正在模拟, 通常只允许16个并发连接. 如果超过此超过接数,将显示该消息,通知您没有可用的连接. 而max connection的默认值 ...
- Codeforces 608B. Hamming Distance Sum 模拟
B. Hamming Distance Sum time limit per test: 2 seconds memory limit per test:256 megabytes input: st ...
- python使用wmi模块获取windows下的系统信息监控系统-乾颐堂
Python用WMI模块获取Windows系统的硬件信息:硬盘分区.使用情况,内存大小,CPU型号,当前运行的进程,自启动程序及位置,系统的版本等信息. 本文实例讲述了python使用wmi模块获取w ...