SharePoint-Office365中修改顶部导航

到晚上我看的时候，突然发现上边我写的这个东西其实很不实用，微软已经准备推出新的方案叫：My apps(我的应用)，可以自定义office启动器，但是现在还没有发布，说是下个月才能发布

要看的戳→→Organize your Office 365 with the new app launcher←←

-------------------------------------------------------------------------------------------------------------------------------------------------

最近在做项目的时候，需要做一个功能，在sharepoint中修改Office 365的导航栏，这里记录一下碰到的问题。

原来的导航栏是这样的：

我要的效果就是在outlook前边增加一个导航。

1.我先想到的是修改sharepoint的masterpage,先找下系统中用到的是哪个masterpage。在网站的母版页设置中发现了这个

嗯 找到了，去修改吧，我觉得直接在SPD中修改是不是会更快一些，所以打开SPD，找到这个seattle.master母版页。

2.找到了，弄出来，放在编辑器中进行编辑吧

3.先看看他们其它导航是什么样子的

ok,我构造一个一模一样的导航出来，加进去就行了

Ctrl+c,Ctrl+v,改改链接，改改文字

咦，放哪呢，居然是个控件，懒得去找了,用jquery处理吧，用jquery来处理它，那得先把jquery加载进去吧，好用这个加（可能jquery放的地方不一样，但是这里是从网站根目录下开始找的）

1 <SharePoint:ScriptLink runat="server" Defer="false" Name="~sitecollection/Scripts/Common/jquery-1.9.1.js" />

jquery文件加好了，那下来把导航加进去吧 

$(document).ready(function() {
            var indexLink = "<div id='index_item_link' class='o365cs-nav-topItem'><div><a class='o365button o365cs-nav-item o365cs-nav-link o365cs-topnavText ms-bgc-td-h' href=" + _spPageContextInfo.siteAbsoluteUrl + "><span style=''>哼哼哈嘿</span><div class='o365cs-activeLinkIndicator ms-bcl-w' style='display: none;'></div></a></div><div style='display: none;'></div></div>";
                    $(".o365cs-nav-O365Links div:first").prepend(indexLink);
        });

 

 好嘞，保存！尼玛，为啥会报这个错

我勒个去~继续搞吧

发现有个seattle.html文件，这个打开看看，里边居然有这么一句

<%-- SPG:
此 HTML 文件已与具有相同名称的 SharePoint 母版页(.master 文件)相关联。当文件保持关联时，不允许编辑该  .master 文件，且任何重命名、移动或删除操作将互换执行。
要直接从此 HTML 文件构建母版页，只需照常编辑页面。使用位于代码段生成器创建和自定义有用的 SharePoint 实体，然后将这些实体作为 HTML 代码段复制粘贴到 HTML 代码。此文件的所有更新将自动同步至关联的母版页。
 --%>

 好吧，应该改这个的，我改错了~

打开这个文件，修改吧，和修改master一样，好了，继续看效果！

啊 直接跳转到错误页去了~~！！！

看看是啥问题，哦 原来在html中不能这样去添加script的，要加上<%-- SPG: -->把script引用文件包起来

继续往下走

为啥不出来呢？

调试了下，原来到js的时候，顶部导航还没有加载出来，所以，这个导航没有被追加上去，怎么办，怎么办！！

算了用个setTimeout吧，等它加载完在把这个加进去，因为也懒得去找它什么时候才加载导航条了。

最终的代码：

 <!--SPM:<SharePoint:ScriptLink runat="server" Defer="false" Name="~sitecollection/Scripts/Common/jquery-1.9.1.js" />-->
<script language="javascript">
        $(document).ready(function() {
            var indexLink = "<div id='index_item_link' class='o365cs-nav-topItem'><div><a class='o365button o365cs-nav-item o365cs-nav-link o365cs-topnavText ms-bgc-td-h' href=" + _spPageContextInfo.siteAbsoluteUrl + "><span style=''>哼哼哈嘿</span><div class='o365cs-activeLinkIndicator ms-bcl-w' style='display: none;'></div></a></div><div style='display: none;'></div></div>";

            function addItemIndexLink() {　
                if ($("#index_item_link").length <= 0) {
                    $(".o365cs-nav-O365Links div:first").prepend(indexLink);
                    setTimeout(addItemIndexLink, 3000);
                }
            }
            addItemIndexLink();
        });
</script>

 

 就是在seattle.html中增加这么一段，ok！