易截截图软件、单文件、免安装、纯绿色、仅160KB

Ajax特效 动态树形列表 之一

树形列表(菜单)在Web应用中十分常见,通常应用于目录式结构,例如产品分类、部门机构等。传统的树形菜单主要有两种加载方式:一种是一次性加载全部数据,另一种是根据用户操作逐步加载数据,但是需要刷新页面。前者加载速度较慢,并且存在大量数据没有被使用的浪费情形。后者可以逐步加载,但是频繁地刷新页面在给用户带来不便的同时,也增加了系统开发的复杂度。
当前使用的Ajax技术,同时兼顾了两种传统方式的优点,即无刷新和动态加载特性。从用户体验到服务器负担来讲都是有利的。
由于编写一个动态树形列表要考虑的问题很多,在进入正式的讲解之前,先以一个简单的页面展示一下树形列表的基本原理。了解了基本原理后,再深入研究树形列表的细节就容易多了。图1.6所示是基本原理演示页面的运行效果。
动态树形列表的基本原理是:每当单击一个子项时,动态地在子项节点内追加新的节点,同时依靠样式表设置新节点的缩进。由于新节点在父节点内追加,因此缩进效果也建立在父节点已有的缩进基础上。通过叠加的缩进使得整个列表具有了树形结构。图1.7所示是各函数之间的调用关系。
                              
图1.6  基本原理演示页运行效果              图1.7  基本原理演示页函数调用关系
样式的缩进写法为margin-left:10px,表示左边距为10像素。为了表示节点的动态性,增加一个计数器变量counter,用于为每个新创建的子项进行编号。在响应onclick事件时,由于新的子项是包含在父节点内的,所以onclick事件会冒泡响应。为了避免出现这种情况造成创建出多余的子项,通过设置event.cancelBubble = true阻止事件冒泡。这种阻止方式仅适用于IE浏览器,在正式的树形列表中,使用了其他方式避免此问题的发生。下面是基本原理演示页面的详细代码。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>动态树形列表基本原理演示</title>
<style>
/* 设置class属性为item的div缩进10px */
div.item {
    margin-le


相关文档:

使用 jQuery 简化 Ajax 开发

jQuery 是一个JavaScript 库,它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery。
jQuery 是什 ......

c#中的Ajax上手篇---JSON的传送与接收

本篇文章主要介绍如何在Ajax的客户端与服务端之间传送JSON格式的数据。那么我们先来说说什么是JSON吧。
JSON,即是JavaScript对象标记法,英文名称是JavaScript Object Notation,简称JSON
,是 JavaScript Programming Language,
Standard
ECMA-262 3rd Edition - December 1999
的子集合,是从JavaScript的o ......

一款经典的ajax登录页面 后台asp.net

 1,新建一名为login.htm的静态网页文件,作为登录页面,如图
body标签代码
<body onkeydown ="enterLogin()"> <!--添加按下键盘事件-->
<div style="text-align: center" mce_style="text-align: center">
<table border="1" cellpadding="1">
<tr>
<td align="center" s ......

解决ajax以post方式传参时,字符串中有单引号的错误。

 今天用ajax的post方式传值时,遇到一个问题,始终没有找到问题原因。后来把传的值中单引号去掉后,js正常了。
经过搜索,也没有找到具体原因。最后通过隐藏域来中转该字符串。最后解决这个问题!无语了!备忘!
js部份:
////异步调用服务器信息
function CallServiceInsert()
{
var url="";
var para ......

drupal模块: Ajax Slideshow

Ajax Slideshow http://drupal.org/project/ajax_slideshow View CVS instructions Modules · Content display udig - October 17, 2009 - 12:05 Sequential presentation of any of your site nodes, using fade effect based on ajax asynchronous calls. Why? Indeed there are plenty of slideshow modules ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号