SharePoint Online 创建门户网站系列之导航

简介: 前 言   关于SharePoint Online中的导航,基本是由Html + Css + JavaScript组成效果以及样式,然后在后台列表或者SharePoint Online元数据导航当做数据源进行展示,通常数据源为列表的我们称之为自定义导航。

  关于SharePoint Online中的导航,基本是由Html + Css + JavaScript组成效果以及样式,然后在后台列表或者SharePoint Online元数据导航当做数据源进行展示,通常数据源为列表的我们称之为自定义导航。

  下面,让我们分别介绍SharePoint Online的元数据导航和自定义导航。

一、SharePoint Online默认导航

  如果想使用SharePoint Online默认导航,可以用F12的方式,看看控件在母版页中的位置,如下图:

clip_image001

  在Designer里找到导航控件,然后移动到母版页中你导航的位置,即可;

<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" Orientation="Horizontal" StaticDisplayLevels="1" DynamicHorizontalOffset="0" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" StaticPopoutImageUrl="/_layouts/15/images/menudark.gif?rev=38" StaticPopoutImageTextFormatString="" SkipLinkText="" StaticSubMenuIndent="0" />

  我个人习惯,在移动了导航之后,在原来位置上加一个标记,方便以后修改,如下图:

clip_image002

  这样,我们可以看到导航已经变为我们修改后的SharePoint导航了,如下图:

clip_image003

  默认导航的修改方式比较简单,就是在导航上直接编辑、添加即可,同时我们还可以点击那个小眼睛一样的图标,设置是否可见,如下图:

clip_image004

  SharePoint Online默认导航支持三级导航,添加一个连接以后,将其拖动到导航上,即可弹出下一级位置,拖进去即可;

clip_image005

  由于我们的导航,可能和SharePoint Online默认样式有所区别,我们可以使用JavaScript和Css去强制样式修改,具体可以参考之前修改导航的博客;

  参考:SharePoint 2013 托管导航及相关配置 <二>

  http://www.cnblogs.com/jianyus/p/3520623.html

二、SharePoint Online自定义导航

  我们这里采用的就是SharePoint Online的默认导航,因为样式非常方便修改,编辑起来也很友好;但是,可能会遇到非常漂亮的导航,如果用JavaScript和Css的方式很难修改的情况,我们还是需要自定义导航的。

  在这里,我们也简单介绍一下,自定义导航的情况。

  其实在SharePoint Online中自定义导航也非常容易,可以将导航的内容存储到自定义列表,然后用JavaScript API读取,在前台进行展示。

  在站点内容中,添加应用程序,如下图:

clip_image006

  选择自定义列表类型,如下图:

clip_image007

  看一下导航设置,自定义导航比较灵活,可能有是否新选项卡打开等设置,但是默认的导航,是没有这样设置的,我们推荐列表名和字段名,首先用英文命名,然后修改为中文显示,这样内部字段名不会是中文编码,而是一开始的英文名字,如下图:

clip_image008

  修改为中文显示名后,我们创建一条导航数据,如下图:

clip_image009

  当然,在编辑列表的时候,我们还可以使用快速编辑的功能,方便我们编辑和维护自定义导航,如下图:

clip_image010

  然后编写读取数据的JavaScript脚本,如下图:

clip_image011

  在母版页中添加Script.js的引用,然后在母版页里添加JavaScript方法的调用,即可:

clip_image012

  然后,我们就可以看到首页上,自定义导航的效果了,如下图:

clip_image013

  特别要说,细心的朋友可能看到我有一句Caml语句没有填写完整:

  Query.set_viewXml("<View><Query></Query></View>");

  是因为手头没有生成工具,不方便,所以未填写;但是我给出了格式,只需要在Query里面填写一句Hidden等于False,并且按照位置排序,即可;

  而且,后面为了能够给导航排序,我还添加了位置(Position)字段,特此说明;

  其实,SharePoint Online中导航的添加和Server版本非常类似,要么使用自带导航修改样式,要么使用自定义导航,数据保存列表或者以Xml形式保存在文档库,然后在前台通过JavaScript方式或者沙河解决方案读取导航进行展示。

  好了,SharePoint Online的自定义导航,我们就介绍到这里,下一篇,我们将介绍入户为门户网站创建栏目。

目录
相关文章
|
存储
SharePoint Online 创建网站集
  前言   本文介绍如何在Office 365中创建SharePoint网站集。   正文   通过登录地址登录到Office 365环境中,我们可以在左上角的按钮中点开,进入管理员,也可以直接在页面中点击管理;   登录地址:https://login.
1719 0
SharePoint Online 设置网站集
  前言   本文介绍如何在Office 365中设置SharePoint Online网站集,当我们创建好SharePoint Online站点,开始使用之前,一定会有一些基本的设置,本文就为大家介绍这些基本的设置。
1455 0
|
Web App开发 前端开发 JavaScript
10分钟精通SharePoint - SharePoint定位
我们致力于将复杂技术简单化,简单技术商业化。希望能把《10分钟精通SharePoint》打造成“SharePoint产品的道德经”。
1525 0
SharePoint Online 创建门户网站系列之定制栏目
前 言   SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受。   下面,我们就开始学习如何定制SPO的二级页面和详细页面。
1417 0
|
JavaScript 前端开发 数据格式
SharePoint Online 创建门户网站系列之创建栏目
前 言   SharePoint Online的栏目,简单描述即显示在首页上的各个模块信息,这里,我们主要介绍我们首页上的栏目,包括简介类型、新闻列表类型、图片类型;   下面,让我们开始在SharePoint Online的门户网站中创建栏目吧 。
1367 0