初识dwz富客户端框架--dwz学习笔记（一）

dwz下载地址: http://lizinet.com/Download1/File/5.aspx http://code.google.com/p/dwz/

文件中已包含使用文档和完整的示例。官方的学习建议是

1.通读DWZ文档，很多新手提的问题文档中都写了。
2. 看demo每个组件演示效果和代码（留意组件html结构）。
3.建议安装firebug，用firebug看html结构、CSS和调试JS都非常方便。见附录一 firebug介绍。
4. 对于初学者不建议看DWZ全部源码，但还是非常有必要看看dwz.ui.js和dwz.ajax.js
5.可以从google code下载dwz_thinkphp版本，结合php后台去理解DWZ和服务器端的交互方式

个人觉得DWZ确实做得简单方便，容易使用，各种js效果也做得很丰富，其实参考demo每个组件的用法，再结合一下文档还是很容易上手的。

以下是自己对dwz的学习笔记，使用工具VS2010和SQL2005，后台Linq操作数据库

首先做一个master页（系统框架页），包括左侧菜单导航，页头工具导航和多选择的页面。

新建一个网站，使用默认创建的页面Default.aspx做master页，dwz的文件和Default.aspx放在同一目录下，

如图

在Defalut.aspx页面，在<head></head>之间放入所需的css和js，其实Default.apx中的html直接在dwz-ria目录中的index.htm直接复制过就可以了。

<!--[if IE]>

<![endif]-->

$(function () {

DWZ.init("dwz.frag.xml", {

loginUrl: "Login.aspx", loginTitle: "登录", // 弹出登录对话框

statusCode: { ok: 200, error: 300, timeout: 301 }, //【可选】

pageInfo: { pageNum: "pageNum", numPerPage: "numPerPage", orderField: "orderField", orderDirection: "orderDirection" }, //【可选】 debug: false, // 调试模式【true|false】

callback: function () {

initEnv();

$("#themeList").theme({ themeBase: "themes" }); // themeBase 相对于index页面的主题base路径

//$("#sidebar .toggleCollapse div").trigger("click");

}

});

</script>

说明：js文件在项目发布的时候，js部份可以使用红色字体标明的js代替，dwz.min.js是编译的js文件，体积比较小。

1、整个页面框架在<div id="layout"></div>中

2、然后就是框架的头部 <div id="header"></div>

3、页面样式设置部份

</li>

</li>

</li>

</li>

</li>

</ul>

4、横向工具条

<ul>

</ul> </div>

5、左侧菜单导航部份

</div>

</div>

上面红色字体部份是在cs文件写的从数据库读取菜单的方法，如下：

public string writeTree() {

tree = new StringBuilder();

List<BX.Modules.SYS_AuthorityList> tempList = list.Where(a => a.ParentID == 0).ToList();

foreach (BX.Modules.SYS_AuthorityList authority in tempList)

{

tree.Append("<div class='accordionHeader'>");

tree.Append("<h2>");

tree.Append("<span>Folder</span>" + authority.AuthorityName + "</h2></div>");

tree.Append("<div class='accordionContent'>");

tree.Append("<ul class='tree expand treeFolder'>");

CreateTreeNode(authority.ID);

tree.Append("</ul>");

tree.Append("</div>");

}

return tree.ToString();

}

/// <summary>

/// 树递归

/// </summary>

/// <param name="parentid"></param>

protected void CreateTreeNode(int parentid) {

List<BX.Modules.SYS_AuthorityList> tempList = list.Where(area => area.ParentID == parentid).ToList();

if (tempList.Count > 0)

{

foreach (BX.Modules.SYS_AuthorityList a in tempList)

{

if (a.IsWhole == 1)

{

tree.Append("<li><a target='" + a.Target + "' rel='" + a.Rel + "' mask='" + a.Mask + "' href='../" + a.AuthorityUrl + "'>" + a.AuthorityName + "</a>");

CreateSubNode(a.ID);

tree.Append("</li>");

}

/// <summary>

/// 树递归

/// </summary>

protected void CreateSubNode(int parentid) {

List<BX.Modules.SYS_AuthorityList> tempList = list.Where(area => area.ParentID == parentid).ToList();

if (tempList.Count > 0)

{

StringBuilder str = new StringBuilder();

foreach (BX.Modules.SYS_AuthorityList a in tempList)

{

if (a.IsWhole == 1)

{

str.Append("<li><a target='" + a.Target + "' rel='" + a.Rel + "' mask='" + a.Mask + "' href='../" + a.AuthorityUrl + "'>" + a.AuthorityName + "</a>");

CreateSubNode(a.ID);

str.Append("</li>");

}

if (str.Length > 0)

{

tree.Append("<ul>");

tree.Append(str.ToString());

tree.Append("</ul>");

}

6、剩下的就是页面选择卡的内容，在<div id="container"></div>之间

posted on 2012-11-26 22:23 柏柏阅读(792) 评论(0) 收藏举报