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

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

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

一、SharePoint Online默认导航

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

  在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" />

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

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

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

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

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

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

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

二、SharePoint Online自定义导航

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

时间: 2024-11-03 21:47:49

SharePoint Online 创建门户网站系列之导航的相关文章

SharePoint Online 创建门户网站系列之创建栏目

前 言 SharePoint Online的栏目,简单描述即显示在首页上的各个模块信息,这里,我们主要介绍我们首页上的栏目,包括简介类型.新闻列表类型.图片类型: 下面,让我们开始在SharePoint Online的门户网站中创建栏目吧 . 一. SharePoint Online 为栏目创建列表 创建新闻中心列表,如下图: 我们创建一个内容(多行文本)字段,用来保存新闻的内容: 创建联系我们列表,如下图: 字段:联系人.电话.手机.邮编.网址,类型均为单行文本: 二. SharePoint

SharePoint Online 创建门户网站系列之图片滚动

前 言 创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式.自带WebPart方式和JavaScript读取后台数据前台做展示的三种: 但是,对于复杂的展示来说,这些方式还是会比较难以实现,虽然对于首页的图片轮播来说,通过JavaScript方式已经完全能够胜任,但是,我还是想通过这个栏目,为大家介绍如何使用沙盒解决方案创建WebPart,来完成更加复杂的前台展示. 下面,让我们开始在SharePoint Online的门户网站中创建沙盒解决方案吧 . 一.

SharePoint Online 创建门户网站系列之准备篇

前 言 门户是SharePoint自推出以来,就非常适合的一种站点类型,在Server版本中,发布站点的应用非常广泛.这里,我们以一个个简单的例子,然后以一个固定的项目Demo,为大家演示如何一步步在SharePoint Online中创建门户网站. 一. 设计工具SharePoint Designer简介 打开Designer,首先需要点击红框的按钮打开站点,输入站点的地址即可:一般来说,网站地址是打开的首页(如:https://linyus-public.sharepoint.com/Pag

SharePoint Online 创建门户网站系列之定制栏目

前 言 SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受. 下面,我们就开始学习如何定制SPO的二级页面和详细页面. 一. SharePoint Online定制列表的二级页面 在"新闻中心"的列表页创建一个视图,用来当做二级页面,如下图: 视图类型,选择 基于所有项目创建一个新的视图,如下图: 输入视图名称为"新闻中心",同时设置为

SharePoint Online 创建门户网站系列之首页布局

前 言 SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Online的资源库,在Designer中创建页面,添加Html页面,修改引用. 下面,让我们一步步来演示这一过程. 一. 拿到效果图,进行切图 SharePoint Online的布局,通常由美工制作效果图,并且切图为Html+图片+样式+脚本的方式,到我们开发人员手里,就方便页面的创建了. 这里,我已经由

SharePoint Online 创建门户网站系列之母版页

前 言 虽然SharePoint中母版页看起来只是头部Banner和底部版权信息这两个部分,但是实质在SharePoint Online中的页面模型中占有重要地位,而且SPO对母版页有着完善的签入签出机制和版本控制,方便使用. 同时,除了保持网站所有页面的一致性,还方便所有页面中使用的脚本.样式表引用,可以同时影响所有页面. 一. SharePoint Online母版页的签入签出和版本控制 查找母版页和页面库位置,首先进入"网站设置",如下图: 到网站设置页面以后,点击"母

JS+CSS实现的日本门户网站经典选项卡导航效果_javascript技巧

本文实例讲述了JS+CSS实现的日本门户网站经典选项卡导航效果.分享给大家供大家参考.具体如下: 这里介绍的是来自日本门户网站的一款CSS+JavaScript选项卡导航菜单,银灰色风格,看来日本人和中国人的审美是接近的,都喜欢这种风格,如果你要用的话,直接拷贝代码部分到你的网页中,注意你需要修改编码才行,日本的编码和中国可是不一样哦,只要把文字改为中国的就行了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-japan-web-

地方门户网站前景广阔 知科地方网站系统受站长欢迎

中介交易 SEO诊断 淘宝客 云主机 技术大厅 当今时代,互联网飞速发展成为人们生活的重要组成部分,网络媒体的传播已渗透到经济.政治.社会生活的方方面面,逐渐改变着人们的生活方式,特别是近几年来地方门户的兴起,让网民数量迅速膨胀,地方门户以多元化.本土化优势在互联网中占有巨大市场. 互联网的发展趋势逐渐垂直化.区域化,越来越多的人都依赖在网上查找本地的酒店.订票.送水餐饮等商家的信息.而这些本土信息在搜狐.新浪这样的大型门户是几乎找不到,而在百度也只能查到很零碎的一小部分,地方门户网站这片市场目

探讨导航的重要性分析门户网站中导航的表现

网页制作Webjx文章简介:网站导航中的信息架构设计. 在进入今天的主题之前,我们先来探讨导航的重要性,并分析一下门户网站中导航的表现. 导航直接影响到公司的财政收入 导航会给我们带来哪些好处?导航不光只是提供信息获取的途径,它的设计优劣会直接影响到整个公司财政收入.下面我们看一个例子(以下内容来自alibaba李凡的<设计师的商业意识>): alibaba大致的广告价格 上图反映了阿里巴巴网站大致的广告价格. 其实页面上方大量的空间都被导航占据了,见下图: 可以看出,上方的导航非常庞大,在一