随笔 - 11, 文章 - 0, 评论 - 73, 阅读 -
17391
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
导航公告
搜索最新评论
|
Javascript 实现 BreadCrumbs(原创)Posted on 2009-11-18 15:35 SharePoint-ShareMyPoint 阅读(482) 评论(0) 编辑 收藏 举报 源码： BreadCumbs
可能有些人还不知道什么是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>
该组件已经在实际项目中使用。 代码里面我还没加异常处理什么的，注释也没怎么写，大家见谅下。
标签:
Javascript
, JQuery
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Powered by:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述