WEB开发网
开发学院软件开发Java 使用 Dojo 的 Ajax 应用开发进阶教程,第 7 部分:... 阅读

使用 Dojo 的 Ajax 应用开发进阶教程,第 7 部分: Dojo 核心库深入介绍

 2010-09-26 00:00:00 来源:WEB开发网   
核心提示: 代码清单 4 中给出了采用声明式的方式实现的简单拖放操作,默认情况下,使用 Dojo 的 Ajax 应用开发进阶教程,第 7 部分: Dojo 核心库深入介绍(9),被拖拽的条目会从拖放源中删除,添加到拖放目标中,代码清单 5 中给出了动态添加拖放条目和定制条目拖动时显示方式的一个示例,清单 5

代码清单 4 中给出了采用声明式的方式实现的简单拖放操作。默认情况下,被拖拽的条目会从拖放源中删除,添加到拖放目标中。如果希望只是从拖放源复制到目标的话,在创建 dojo.dnd.Source的时候,可以指定 params的属性 copyOnly的值为 true。

如果希望定制拖放条目被拖动时的显示方式,需要利用 creator方法创建出所需的节点。代码清单 5 中给出了动态添加拖放条目和定制条目拖动时显示方式的一个示例。

清单 5. 动态添加拖放条目和定制条目拖动时显示方式

 var source = new dojo.dnd.Source("source", { 
  creator : function(item, hint) { 
    var n; 
    if (hint == "avatar") { 
      n = dojo.create("div", { 
        innerHTML : dojo.replace("<span>{title}</span>", item) 
      }); 
    } 
    else { 
      n = dojo.create("div", { 
        innerHTML : dojo.replace("<h4>{title}</h4><div>{description}</div>", item) 
|-------10--------20--------30--------40--------50--------60--------70--------80--------9| 
|-------- XML error: The previous line is longer than the max of 90 characters ---------| 
      }); 
    } 
    return { 
      node : n, data : item, type : ["book"] 
    }; 
  }, 
  copyOnly : true 
 }); 
 var target = new dojo.dnd.Target("target", { 
  creator : function(item, hint) { 
    return { 
      node : dojo.create("span", { 
        innerHTML : item.title 
      }), 
      data : item, 
      type : ["book"] 
    }; 
  }, 
  accept : ["book"] 
 }); 
 source.insertNodes(false, [ 
  {title : "图书 1", description : "一本不错的书。"}, 
  {title : "图书 2", description : "这也是一本好书。"} 
 ]); 

上一页  4 5 6 7 8 9 10  下一页

Tags:使用 Dojo Ajax

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接