zoukankan      html  css  js  c++  java
  • 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的自定义导航,我们就介绍到这里,下一篇,我们将介绍入户为门户网站创建栏目。

  • 相关阅读:
    vue : 无法加载文件 C:UsersXXXAppDataRoaming pmvue.ps1,因为在此系统上禁止运行脚本
    js全屏和退出全屏浏览器
    js 如何保存代码段并执行以及动态加载script
    计算年龄,精确到年月日
    js闭包问题
    构造函数和继承方法
    js 箭头函数不适用的场景
    获取一组数据的最大值和最小值
    地图
    json传输
  • 原文地址:https://www.cnblogs.com/martin-roger/p/5489142.html
Copyright © 2011-2022 走看看