zoukankan      html  css  js  c++  java
  • SharePoint Online 定制左侧导航

      前言

      之前几篇文章,都是为大家介绍工作流相关的知识,这一篇文章,我们先暂别工作流,定制一下左侧导航,因为实在是太丑了。

      正文

      1.先看看我们定制完的左侧导航吧,虽然不是特别的美观,但是!但是跟页面看起来很协调,有木有!

      如果你觉得这款导航不好看,其实可以用本文的方式,定制成你喜欢的样子

     

      2.首先创建一个自定义列表用来保存导航,过程比较简单就不截图详解了,有前面基础的朋友,应该很容易做到,如下图:

      有几点特别说一下,MenuSort是排序,ParentMenu就是子菜单的父级,为了实现二级导航

     

      3.用SharePoint Designer打开站点,找到母版页,我们选中这个母版页,发现不能设置为默认和自定义,说明,这个就是我们站点现在的默认母版页,如下图:

     

      4.我们需要签出母版页,然后,在高级模式下编辑文件,如下图:

     

      5.查找左侧导航的位置,用浏览器的开发人员工具,如下图:

     

      6.根据找到的ID,很容易在母版页里找到这个元素,如下图:

     

      7.我们不要删除默认的节点,可能会带来未知错误,我这里是隐藏默认的,添加新的元素占位,如下图:

      好奇的小伙伴也可以删掉试试,记得备份就好

     

      8.在头部引用脚本和样式,还有添加一些自定义样式,如下图:

      这个样式全局生效,只要是引用了这个母版页的页面都生效

     

      9.添加主要方法,一是读取所有项目初始化到数组里,二是通过筛选过滤,拼成我们需要的HTML,输出到占位符,三就是用layui控件初始化这个左侧导航,如下图:

     

      结束语

      至此,所有操作就完成了,就做成了文章第一张图的左侧导航了。其实,整个操作对于熟悉前端的小伙伴,是非常简单的,这就是SharePoint Online的便捷性。

  • 相关阅读:
    在线编辑器 复制word里面带图文的文章,图片可以直接显示
    php 支持 超大上G,多附件上传
    jsp 支持 超大上G,多附件上传
    java 支持 超大上G,多附件上传
    网页实现大文件上传下载
    HTML5实现大文件上传下载
    百度WebUploader实现大文件上传下载
    WebUploader实现大文件上传下载
    BZOJ 2064: 分裂 状压动归
    [POI2005]AUT-The Bus 树状数组维护最大前缀和
  • 原文地址:https://www.cnblogs.com/jianyus/p/12514134.html
Copyright © 2011-2022 走看看