返回目录
在写完首篇cache文章后,有些朋友给我来信,希望可以使用JS的方法来实现这个导航功能,所以,才有了这篇文章,JS与C#不同,它虽然有引用类型,但它不具备一些引用类型的特性,如它的方法参数为对象时,也是通过值传递的,而不是通过内存地址,而在进行导航制作时,我们正是使用了引用类型的这个特性,所以,我们的JS方法,就不能和C#相同了,如果使用其它方式,如,使用名称保存在一个变量里。
下面是JS方式实现的导航,希望对JS朋友有些帮助
<script type="text/javascript"> //对象实体 var BannerModel = function (name, url, id, parentID) { return { Name: name, Url: url, ID: id, ParentID: parentID, Parent: {} }; } var BannerStr = ""; var Data = [new BannerModel("首页", "/", 1, 0), new BannerModel("用户中心", "/UserInfo", 2, 1), new BannerModel("基本信息设置", "/UserInfoSet", 3, 2)]; //找老祖宗... function GetParent(o) { if (o != undefined && o.ID != undefined) { BannerStr = "<a href=" + o.Url + ">" + o.Name + "</a>" + ">" + BannerStr; for (var i in Data) { if (Data[i].ID == o.ParentID) { o.Parent = Data[i]; break; } } GetParent(o.Parent); } } //导航工厂 var BannerFactory = { GetTreeBanner: function (url) { var temp = ""; BannerStr = ""; for (var i in Data) { if (Data[i].Url == url) { temp = Data[i]; break; } } GetParent(temp); return BannerStr; } } document.write(BannerFactory.GetTreeBanner("/UserInfoSet")); </script>
看JS生成的导航截图
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
新闻热点
疑难解答