问题描述

项目中需要在网页上实现可以拖曳改变div大小的功能。由于项目用了roo，roo自带了dojo，所以打算用dojo自带的方法来实现它。

解决方案

首先在google上搜索 “dojo resize” ，搜索结果中发现这个。有具体例子，有api文档，是它了。

首先

做一点准备工作：

dojo.require("dojox.layout.ResizeHandle");

还有下面一个css文件：

<link rel="stylesheet" href="path/to/dojo/dojox/layout/resources/ResizeHandle.css" />

值得一提的是，在roo自带的dojo中没有找到上述css文件，于是只好到官网下载了一个，放置在项目路径中。这个css文件的作用是：

This provides simple styling for your ResizeHandle, and a default handle icon.

然后

有两种使用方式，分别是：

Programmatic （编程式）

var handle = new dojox.layout.ResizeHandle({ targetId:"someNodeId" }).placeAt("someNodeId");

注意，new dojox.layout.ResizeHandle返回了一个handler控件（Widget/Dijit）：

动态创建一个 Dijit 的时候，Dijit 动态构造语句的返回值就为该 Dijit 实体。将这个 Dijit 动态构造语句的返回值赋值给一个变量，则可以通过这个变量实现对新创建 Dijit 实体的操控。

需要插入到受控的node中，用到了placeAt()方法。

关于该方法，这里有一段中文描述：

这是一个常用的方法，dojo 控件都实现了这个方法。运用这个方法可以自由地放置控件的位置。该方法有两个参数：reference, 和 position。可以接受的 reference 参数类型有：String, DomNode 和 _Widget。其中 String 为引用 Dom 节点 (DomNode)，或者 dojo 控件 (_Widget) 的 id。而被座位参数传入的 dojo 控件，必须是实现了 addChild 方法的类型的。可接受的 position 参数类型有 Int, 和 String。传入的 String 参数必须是”first”,”last”,”before”,”after”中的一个。

关于dojo的Widget，这里、这里有一些描述：

widget的英文含义是装饰物或者小器具，有些技术文档将其译为小部件，在这里直接使用其英文名，以免引起不必要的混淆。Dojo提供widget框架的原因来自两方面：一是为了更好的用户体验；二是为了帮助开发人员快速开发Web应用。

Dojo 提供了两种方式给系统开发者去使用其所提供的 Dijit（Dijit 是 Dojo Widget 的简称）。第一种方法是通过直接在页面中静态的写入带有 Dijit 属性的标签去实现该 Dijit 的使用；第二种方法是通过 Javascript 语句，动态的在当前使用页面中生成 Dijit。 第一种方法被称为静态创建 Dijit，而第二种方法则被称为动态创建 Dijit。

动态创建 Dijit 又必须分为两个步骤。第一个步骤 :动态创建一个“替代层”，并将该层插入到当前页面 DOM 结构中 Dijit 应处的位置。第二个步骤 :调用该 Dijit 对应的动态构造语句，例如 new dijit.form.Button(params, srcNodeRef) 去创建该 Dijit。其中“params”是 Dijit 构造时相关的属性参数，“srcNodeRef”是上一步骤中创建的“替代层”。

Declarative （声明式）

<div id="someNode">
  <p class="content">
    Node Content
  </p>

  <div id="someNodeHandle" data-dojo-type="dojox.layout.ResizeHandle" data-dojo-props="targetId:'someNode'">
  </div>
</div>

关于声明式，也就是静态模式创建Dijit，这里也有描述：

首先回顾一下，静态创建 Dijit 的一个完整的过程。当页面加载完成以后，在引入了 Dojo 解析模块的基础上，Dojo 会自动将页面中所有的 Dijit 标签属性解析为标准的 HTML（动态创建的 Dijit，会在创建的过程中自动完成转换）。

其中“引入了 Dojo 解析模块”一句指的是：

<script type="text/javascript"> 
dojo.require("dojo.parser"); 
dojo.require("dijit.form.Button"); 
</script>

静态创建 Dijit 的时候，页面加载完成以后会调用相应的 Dojo 解析模块将整个页面的 Dijit 标签属性解析为 HTML。

注意 ，要添加如下两行css代码：

#someNode { position:relative; }
#someNodeHandle { bottom:4px; right:4px; }

最后

用这里一句话总结一下为了解决这个问题学到的关于动态创建和静态创建的知识：

抛开动态创建和静态创建的表象从本质上说，创建一个 Dijit 对于动态和静态都需要以下相同的几项要素。

  • Dijit 将插入 DOM 结构中的位置。静态创建 Dijit 是通过直接写入到页面中，表明其所在 DOM 结构中的位置；而动态创建 Dijit 则需要通过一个“替代层”来实现 Dijit 插入到 DOM 树中的合适位置。
  • 表明要创建的 Dijit 类型。静态创建 Dijit 是通过使用 dojotype 标签属性来表明；而动态创建 Dijit 则是通过调用该 dijit 相应的动态构造语句来表明。
  • 在创建一个 Dijit 时，需设置其的相关属性。静态创建 Dijit 是通过标签属性来定义的；而动态创建 Dijit 则是通过在该 Dijit 相应构造语句中直接设定属性实现的。

强烈推荐【此处】文章集，学习dojo的好资料！另外【这里】几乎有每一个dojo模块的测试用例！

Koupit Značka Cialis