百度的Tangram 入门开发
2011-06-14 17:46
246 查看
入门
Tangram是一个简单可依赖的开源js框架。它使用简单,功能丰富,容易扩展。它经过了Baidu专业QA的测试和百度各产品线巨大流量的考验,质量有充分的保障。使用它进行开发,除了能提高开发效率,减少工作量,还能减少bug数,提高代码质量。下面让我们开始tangram框架的入门之旅。建立一个测试页面
在我们开始一切工作之前,要有页面;你可以创建一个新的html,也可以在你已有的页面里面加上一句引入tangram的标签:<script src="http://img.baidu.com/js/tangram-1.3.5.js"></script> ;
Tangram框架可以和任何已有的框架集成在一起,Tangram是友好的,不用担心它们发生冲突,让你已有的功能失效。
现在,假设你已经建立了下面这样的一个页面:
<!doctype html> <html> <head> <script src="http://img.baidu.com/js/tangram-1.3.5.js"></script> </head> <body> <div id="byG"> <div class="byQ"> <h2>Tangram是个简单可依赖的框架。</h2> </div> </div> </body> </html>
获取一个dom节点
通常我们对页面上DOM节点的操作,都是从获取该节点的引用开始。 Tangram提供了常用的节点获取方法的封装。如果想获得id为byG的DOM节点,那么你可以使用 T.dom.g("byG")。
如果想获得class为byQ的DOM节点集合,那么你可以使用 T.dom.q("byQ")。
如果想获得class为byQ下的H2节点,那么你可以使用 T.dom.query("byQ>h2")。
T.dom.query支持通过css选择符的方式获取节点,当然,如果是对有id或class的节点而言,用T.dom.g或T.dom.q会更快些。
节点样式设置
设置节点的样式也是我们经常做的操作,tangram也提供了支持;如果我们想把id为 byG的节点设置多种样式,那么我们可以直接使用:T.dom.setStyles("byG",{ position:"absolute", top:50, left:100, opacity:.5 });
px值、透明度的设置,直接使用数字就可以了,tangram会帮你处理好浏览器的差异。
节点class名增删
除了直接设置节点样式,我们还可以通过添加class的方法来让节点一次性更改多种样式。这会让我们的代码更加精简,同时也会提高性能。我们在页面上添加一个样式
<style> .blue{ color:blue } </style>
然后我们调用
T.dom.addClass("byG","blue");
怎么样? 有点难看? 那好吧:
T.dom.removeClass("byG","blue");
绑定事件
万事俱备,只欠东风! 现在开始,我们就让页面动起来吧。T.event.on("byG", "click",function(event){ alert(this.innerHTML);});
除了标准的事件,tangram还支持一些特殊的事件,比如IE的mouseenter:
T.event.on("byG", "mouseenter",function(){ alert("在我地盘这你就得听我的");});
插入HTML
除了对已有节点的操作,我们也经常需要插入新的节点到DOM树里;方式有两种,一种是插入HTML字符串,另外就是创建DOM节点。 这里先说第一种,现在有这样一段文本:
var htmlString = "<strong>我是插班生</strong>";
我们把它插入id为byG的节点内部末尾,类似appendChild,那么我们可以这样:
T.dom.insertHTML("byG", "beforeEnd", htmlString);
那么如果想插入到内部开头呢? 将"beforeEnd"替换成"afterBegin"; 插在外部前面?换成"beforeBegin"; 外部后面? "afterEnd"; 如果你熟悉IE的insertAdjacentHTML,那么这就是这个方法的浏览器兼容版。
创建DOM节点并插入
再说第二种方式,创建dom节点。同样,浏览T.dom包下的方法,你能大致猜出来实现这个功能的就是那个 T.dom.create。var iframe = T.dom.create("IFRAME",{ id:"newDIV", "class":"myClass", frameborder:"none", src:"http://www.baidu.com" });
如此,再使用
T.dom.insertAfter(iframe,"byG");
就可以将它插入到买卖IC网页面中了。
当然,也可以选择T.dom.insertBefore,如果不清楚差别,请参考各自文档。
Ajax请求
到此为止,买卖IC网对于如何渲染当前页面,我们已经有了大概的了解。 接下来我们了解一下如何进行AJAX请求。T.ajax.get("http://yourDomain.com/yourAjaxUrl",function(response){ alert("成功获取如下文本: " + response); });
如果是post请求,那么在上面搜索框中搜索post, T.ajax.post就是你要的方法。 如果需要复杂的处理,比如设置header,添加错误响应,甚至添加安全认证,那么可以直接使用 T.ajax.request,具体使用方法请参考文档页面描述。
到此,你已经基本了解了tangram在DOM节点操作上的主要的方法,也可以使用进行一些页面的辅助编程了。下面,我们来了解一些更高级的应用,看看tangram还能做些什么。
下一步:
dom包只是tangram整个框架中一个很重要的包,除此之外,还有许多其他的有用的工具包。相关文章推荐
- 百度的Tangram 入门指南高级开发
- 百度JavaScript项目Tangram 入门指南 - 高级篇
- 寻找正在使用百度tangram开发的朋友
- iOS开发百度导航SDK的使用入门
- 百度前端开发框架tangram
- 百度JavaScript项目tangram开源 促进国内前端开发水平提升
- 前端开发入门:前端构建工具百度FIS
- 百度tangram框架开发工具小结
- 百度JavaScript框架Tangram正式开源 开发人员反应不一
- 百度JavaScript项目Tangram 入门指南 - 初级篇
- 转:eclipse开发hibernate,spring官方入门教程
- scala 开发入门(1)-- 变量及基本数据类型
- MMORPG开发入门[转]
- 以太坊(Ethereum)开发框架 Truffle 入门(五):部署到网络
- ASP.NET Aries 入门开发教程5:自定义列表页工具栏区
- web app开发入门
- (pomelo系列入门教材)深入浅出node.js游戏服务器开发1——基础架构与框架介绍
- WinCE嵌入式开发程序入门
- DELPHI FOR IOS 开发入门指南
- Linux设备驱动开发详解:入门与编程实践