AJAX类库ADL新接触

最新推荐文章于 2024-07-15 22:52:27 发布

AJAXBloger

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量1.1k

点赞数

分类专栏： AJAX 文章标签： ajax div javascript button ui function

AJAX 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

AJAX类库ADL新接触

1 ADL 简介

ADL（AJAX Dev Library），是一个面向对象的AJAX SDK，是FAC组织下的一个开源项目。它符合相关标准和规范，能兼容主流浏览器包括IE，FIREFOX等，同时能够被其他可视化开发工具(如webshop）所集成和使用。

2 主要的核心类介绍

System.js :最基础的核心类，包括继承，引用，包含功能的实现，并且有其它类常用的基础方法的实现，如，取得类名，消息监听等。

UI.js：系统常用颜色的常量化定义，Component组件类，Container容器类的实现，提供公用的属性，方法和事件处理机制，以方便后续的UI高级类的继承。

DHtml.js：标准DHtml的一些DOM对象的封装。如Table,Div,Span,Iframe,Button等等。

var newButton = js.dhtml.button();

这样只需要通过上面的方式就可以生成一个简单DHtml控件了。

DHtml2.js：扩展DHtml的一些DOM对象的封装，对应于DHtml.js，通过继承具有Component或Container的高级特性。

3 UI基类介绍，及基础运用指南

UI类的基本结构：

Object—

|_Component

|_Container

| |

|_DHtml,DHtml2

|_UI Component

|_DB UI Component

|_Other Class

我们可以看到ui中的类继承结构。 Component类继承与Object类，Container容器类继承于Component类，DHtml中的类，属于容器性质的类（如Table,Div，IFrame）继承于Container，其他的继承与Component.其他的高级UI类大多继承于DHtml2中的类。

下面我举个简单的例子来说明UI的基本方法的用法：SetBounds(),SetSize(),SetMoveable(),SetResizeable(),Add(),Remove(),Hide(),Show().

<html>

<head>

<title>TestComponentMove</title>

</head>

<BODY οnlοad='afterload();'><span>可以移动和改变大小</Span>

</BODY>

</html>

function afterload(){

var div1 = new js.ui.Div();/**Div继承于Container容器类，含有Container的属性和方法。这里需要注意js.ui是这个类的命名空间，用来防止类重名，注意一定要写上。**/

div1.style.position = 'relative';

div1.style.backgroundColor = Color.Silver; /**设置这个对象的背景色。这里Color.Silver是ADL自定义的颜色常量。还有很多颜色大家可以参考UI.js中。**/

div1.SetBounds(70,23,356,245); /**设置位置和大小，这个方法是从Component中继承而来的，当然div这个Container容器继承于Component，所以也有了这个方法。当然还有GetBounds(),SetSize(),GetSize()等等一系列的方法。设置这个方法的前提是这个对象的布局方式不是默认的static,也就是必须设置div1.style.position = 'relative';或者div1.style.position = “absolute”; absolute表示绝对定位。**/

div1.SetMoveable(true); /**设置这个对象使它可以拖动。这个方法也是继承于Component中的。所以如果需要设置某个控件可以拖动只需要 object. SetMoveable(true)就可以了。**/

div1.SetResizeable(true); //设置这个对象可以通过拖动改变大小。

div1.innerHTML= "通过鼠标拖拽我来自由移动或者拖拽边框改变我的大小";

div1.style.font = ' small-caps 10pt serif';

window.Add(div1); /**将div对象装入到window对象中，window本身也是一个 Container容器类。所以若要将一个对象添加到另一个对象，只需要ContainerObj.Add（object）,即可将其添加到容器对象中了。并且可以通过每个容器对象自带的Components数组来管理。**/

var d2 = new js.ui.Div();

div1.Add(d2);

d2.innerHTML= "通过鼠标拖拽我来自由移动或者拖拽边框改变我的大小";

d2.style.font = ' small-caps 10pt serif';

d2.style.position = 'absolute';

d2.style.backgroundColor = Color.MoneyGreen;

d2.SetBounds(100,55,80,50);

d2.SetMoveable(true);

d2.SetResizeable(true);

var button = new js.ui.Button();//新建一个按钮，继承于Component。

button.onclick = function (){

if(div1.Visible)

div1.Hide();//隐藏div1。Hide()也是继承于Component的方法。

else div1.Show();//显示div1。Show ()也是继承于Component的方法。

}

button.style.position = 'absolute';

button.SetSize(50,25);//设置这个按钮的大小。

button.value='显示/隐藏灰色对象';

button.SetBounds(80,320,120,25);

window.Add(button);

var button1 = new js.ui.Button();

button1.onclick = function (){

div1.Remove(d2); /**在这个点击事件中，将d2从div1中移除。Remove()方法是继承于Container类而来的。**/

}

button1.style.position = 'absolute';

button1.SetSize(50,25);

button1.value='移除浅绿对象';

button1.SetBounds(210,320,120,25);

window.Add(button1);

document.body.style.backgroundColor = DefaultStyle.PanelColor;

}

</SCRIPT>

下面看看页面的效果图：

这个页面有两个div, 灰色div包含了浅绿div,两个div都可以自由拖动和改变大小。在这里，我们只用了两句话就能设置控件的可自由拖拽和根据拖拽改变大小。object.SetMoveable(true); object.SetResizeable(true);想想要自己实现拖拽和改变大小的艰巨任务吧，这真是太简单，太让人兴奋了。

AJAXBloger

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX类库ADL新接触

AJAX类库ADL新接触1 ADL 简介ADL（AJAX Dev Library），是一个面向对象的AJAX SDK，是FAC组织下的一个开源项目。它符合相关标准和规范，能兼容主流浏览器包括IE，FIREFOX等，同时能够被其他可视化开发工具(如webshop）所集成和使用。2 主要的核心类介绍System.js :最基础的核心类，包括继承，引用
复制链接

扫一扫