可能有些人还不知道什么是BreadCrumbs， 中文叫面包屑，不知道鬼佬为什么喜欢这么叫，大概效果就是这样，其实就是网站的导航，效果如下：
- 实现原理
根据用户访问的url， 采用JQuery 读取存放BreadCrumbs数据的xml文件，然后进行展现。
2. 具体实现
网站的导航一般都是树形结构，所以设计了以下的数据结构，并采用xml文件保存。
Code
<menuItem url="/pages/default.aspx" name="Home">
<menuItem url="/econamine/Pages/efgprocess.aspx" Key="/quickwinjslibrary/breadcrumbs/demo.htm" name="Page1">
</menuItem>
<menuItem url="/breadcrumbs/demo.htm" Key="/breadcrumbs/demo2.htm" name="Page2">
<menuItem url="/breadcrumbs/demo.htm" Key="/breadcrumbs/demo.htm" name="Page22">
</menuItem>
</menuItem>
</menuItem>
接下来就是实现BreadCrumbs.js。
Code
// Constructor function
function BreadCrumbs(_dataSource, _targetDiv) {
//datasource path
var obj = this;
this.dataSource = _dataSource;
//targetDIV id
this.targetDiv = _targetDiv;
//root node styleclass
this.NodeStyleCSS = "BreadCrumbs_Node";
//current node styleclass
this.currentNodeStyleCSS = "BreadCrumbs_CurrentNode";
this.SeparatorTemplate = "->";
this.outputHtmlStr = "";
//递归读取节点
this.getNode = function(currentNode) {
if (this.outputHtmlStr != "") {
this.outputHtmlStr = "<span class='" + this.NodeStyleCSS + "'><a href='" + currentNode.attr('url') + "'>" + currentNode.attr('name') + "</a></span>" + this.SeparatorTemplate + this.outputHtmlStr; //currentNode.attr('name');
}
else {
this.outputHtmlStr = "<span class='" + this.currentNodeStyleCSS + "'>" + currentNode.attr('name') + "</span>";
}
var tempnode = currentNode.parent();
var name = tempnode.attr('name');
if (name != null || name != undefined) {
this.getNode(tempnode);
}
};
this.getPagePath = function() {
var url = window.location.href.toLowerCase();
var host = "";
if (url.indexOf("http") != -1) {
host = "http://" + window.location.host;
}
if (url.indexOf("https") != -1) {
host = "https://" + window.location.host;
}
return url.replace(host, "");
};
this.render = function() {
requestUrl = obj.getPagePath();
jQuery.ajax({
type: "GET",
url: this.dataSource,
dataType: "xml",
success: function(xml) {
jQuery(xml).find("menuItem[Key='" + requestUrl + "']").each(function() {
obj.getNode(jQuery(this));
jQuery("#" + obj.targetDiv).html(obj.outputHtmlStr);
});
}
});
}
}
最后，在demo.htm 文件调用该组件：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="BreadCrumbs.js"></script>
<script type="text/javascript">
breadcrumbs = new BreadCrumbs("/BreadCrumbs/Menu.xml", "testbc");
breadcrumbs.render();
</script>
</head>
<body>
<div id="testbc"></div>
</body>
</html>
该组件已经在实际项目中使用。
代码里面我还没加异常处理什么的，注释也没怎么写，大家见谅下。
