SharePoint 2013 指定位置增加路径导航(JQuery)



SharePoint 2013 指定位置增加路径导航

由于首页是完全定制化,隐藏了所有SharePoint 本身的元素,但是在知识管理中心,由于文件夹比较深,所有需要返回文件路径导航。以下代码是JQery写的,使用SharePoint 2013 的脚本编辑器实现。 效果如下。

  • 如上图,单击20 信息化时
  • 结果如下图

  • 其实现代码如下,可以直接复制到html 测试;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>nav</title>
    <style>
        .spCustomNav li {display: inline-block}
        .spCustomNav li a { text-decoration: none;}
    </style>
</head>
<body>

    <ul class="spCustomNav">
        <li><a href="#"></a> </li>
    </ul>
    <script src="http://portal.hhgs.cpiw/dep/SiteAssets/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        function redirect(){
            var s = window.location.search;
            if(!s){
                 window.location.href = "?RootFolder=/dep/kjxxb/documents/项目文档/项目一/标书/历史版本/相关图片";            }
        }

        //SP中有自带的函数 GetUrlKeyValue
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURIComponent(r[2]);
            }
            return null;
        }
        //拼接QueryString
        //使用本地html测试正式环境去掉即可
        //redirect();

         var searchStr = decodeURIComponent( window.location.search);         
         //alert(searchStr);
        if(searchStr) {
            var fullPath = getQueryString("RootFolder");
            var  baseUrl = fullPath.split('documents')[0] + "documents/";
              var      foderPath = fullPath.split("Documents/")[1]; 
                          if(foderPath == undefined)//如果路径结果为undefined 则会出现全部路径或乱码
                           { foderPath = fullPath.split("documents/")[1];  } 
               var     control = $(".spCustomNav").eq(0);
               var navBuilder =  spLibNavBuilder({baseUrl:baseUrl,folderPath:foderPath,control:control});
            navBuilder.render();
            control.delegate("a","click",function(ev){
              var GetNev =$(this).attr("href");   
               //单击跳转  
              var x1=   GetNev.split("Documents")[0];
              var x2= GetNev.split("documents")[1];
              var x3=     x1+"Documents"+x2;    
               //alert(x3);
                 var x4= x3.split("ocuments");
                  if (x4.length >= 3) {
                    x5=x4[0]+"ocuments"+x4[1];
                     window.location.href=x5.split("D")[0];       
                  } else
                {  
                   window.location.href=x3;       
                  }             
               

                return false;
            });
        }

         //自定义的 SharePoint Nav Builder
        //可能需要独自考虑文件夹根路径的情况
         function spLibNavBuilder (settings) {
            var _settings = {
                baseUrl: "/",
                folderPath: location.href,
                control: null
            };

            _settings = $.extend(_settings, settings);

            function  render(){
                var baseUrl = _settings.baseUrl,
                        folderArrs = _settings.folderPath.split('/');
                        control = _settings.control, htmlArr =[], tempArr=[],
                        len = folderArrs.length;
                control.empty();
                for(var i=0; i<len;i++){
                    tempArr.push(folderArrs[i]);
                    var title = folderArrs[i] + (  i == len -1 ? "" : ">>  ");
                    var href = baseUrl +  tempArr.join('/');
                    htmlArr.push(builderSingleNav(title,href));
                }
                control.append(htmlArr.join(""))
            }

             function  builderSingleNav(title,href){
                 return  '<li><a href="' + href + '">' +decodeURIComponent( title) + '</a></li>';
             }

            return {render:render};
        };

    </script>
</body>
</html>

  • 代码编写完成了,在你需要添加的位置,插入脚本编辑器即可。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值