使用static静态成员实现服务器端缓存(导航面包屑)~续

返回目录

在写完首篇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生成的导航截图

返回目录

时间: 2024-10-10 04:22:26

使用static静态成员实现服务器端缓存(导航面包屑)~续的相关文章

MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航

上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路.所以,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回.(摘自百度百科) 要实现面包屑导航,也可以直接从nuget搜一些sitemap组件直接使用. 当然,和

css制作面包屑导航

css2制作面包屑导航主要的原理就是利用绝对定位以及当元素的宽度和高度都为零时边框的挤压性质,效果图 代码: <ul>     <li>HTML<i></i></li>     <li><em></em>CSS<i></i></li>     <li><em></em>JavaScript<i></i></li

辛星和您一起用纯CSS美化面包屑导航

首先讲一下面包屑导航为什么叫做面包屑导航,它来自于一个童话故事,这个童话故事的名字也非常有特色,叫做"汉塞尔和格莱特",有一天他们去森林里游玩,但是走着走着发现迷路了,大家都知道,森林里都都是数,不管往哪边走,还是茫茫的一片树,于是他们在沿途走过的地方都撒下面包屑,他们利用这些面包屑帮助他们走出了森林,因此,面包屑导航的意思就是说我们去过哪些地方,以及我们如何回到我们之前的位置. 有时候我们特别需要面包屑导航,比如我们在某论坛或者某网上商城闲逛的时候,很容易被茫茫的帖子和众多的商品搞的

C++学习10 static静态成员变量和静态成员函数

一般情况下,如果有N个同类的对象,那么每一个对象都分别有自己的成员变量,不同对象的成员变量各自有值,互不相干.但是有时我们希望有某一个或几个成员变量为所有对象共有,这样可以实现数据共享. 可以使用全局变量来达到共享数据的目的.例如在一个程序文件中有多个函数,每一个函数都可以改变全局变量的值,全局变量的值为各函数共享.但是用全局变量的安全性得不到保证,由于在各处都可以自由地修改全局变量的值,很有可能偶然失误,全局变量的值就被修改,导致程序的失败.因此在实际开发中很少使用全局变量. 如果想在同类的多

如何删除帝国cms面包屑导航中首页链接的/index.html

前面一篇"帝国cms面包屑导航的首页链接锚文本改成关键字"中xmyanke有写到改首页链接的方法,但是感觉比较麻烦,这里就说说如何删除帝国cms面包屑导航中首页链接的/index.html,我们的首页一般都是***.com/结尾的,如果Breadcrumb的中首页链接变成***.com/index.html结尾的话,会造成有两个首页,分散权重.重复收录.(当然可以把index.html 301到不带index.html) 找到e/class/connect.php,搜索$file=$p

Bootstrap面包屑导航

Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>bootstrap面包屑导航</title> <link rel="stylesheet" type

CSS3面包屑导航

原文:http://www.helloweba.com/view-blog-347.html HTML HTML结构非常简单,一个有序列表ol,外面又<nav>包裹. 面包屑导航条的结构,我们给ol加上class样式为:.cd-breadcrumb,那么当前位置的层级li加上class样式为:.current. <nav>     <ol class="cd-breadcrumb">         <li><a href=&quo

Bootstrap中面包屑导航实例

通过重写样式breadcrumb可以更改分割的符默认是单斜杠,实例重写后是双斜杠: <style type="text/css">    .breadcrumb > li + li:before {    color: #CCCCCC;    content: "// ";    padding: 0 5px;}     </style> 代码实例: <div class="container">    

夺命雷公狗---DEDECMS----26dedecms面包屑导航的实现

我们在很多项目里面都会用到面包屑导航,而dedecms里面也是给我们封装好面包屑导航的了,如下图所示: 在dede里面实现面包屑导航主要用到{dede:field.position/}标签,我们首先来修改下article_movie.htm内容页的模版文件: 我们修改成这样: 然后到后台更新下文档: 然后在回到内容页看看效果如何: 见到这里有点小激动,因为我们成功啦..嘻嘻