具有顶部导航和左侧导航的自定义母版页

时间:2015-03-27 06:56:03

标签: javascript jquery html sharepoint

我已成功将HTML页面转换为SharePoint 2013母版页。我还创建了自定义页面布局。使用它们我创建了我的SharePoint站点超过30页。每个页面都包含顶部页眉导航,因为它继承自我使用的母版页。现在我还需要从母版页继承左导航。它为我提供了从母版页更新它并通过整个SharePoint站点影响它的优势。

但目前我正在为每个页面单独使用Web部件作为HTMl代码段插入Left Nav。如果需要修改,我必须浏览所有页面并进行修改。这也不方便。我希望这个左侧导航像SharePoint当前导航替代,但在我的页面布局中。

是否可以在这些论坛中聊天?

有人可以帮我解决这个问题吗?

谢谢和问候,

Chiranthaka

1 个答案:

答案 0 :(得分:1)

以下是我认为你要做的一个例子:

http://info.scdot.org/StructuralDesign/SitePages/BridgeDrawingsDetails.aspx

这是一个带有HTML页眉,页脚和左手风琴导航的sharepoint页面。我没有使用单独的"页面布局"作为SP术语。它在SP 2010中。

我在母版页中添加了一个DIV以容纳左手风琴导航,并使用CSS定位它。

HTML代码段:

<div id="AccordionContainer">
            <div id="Accordion1" class="Accordion">
<h3 class="accordionShow"><a>CADD Design</a></h3>
<div class="insideAccordionPanelContent">
    <!-- First link is for site Map Only and should not appear in Accordion -->
    <a href="http://www.scdot.org/doing/cadd.aspx" class="siteMapShow panelTitle">CADD Design</a>
    <!-- Accordion Links -->
    <p><a href="http://www.scdot.org/doing/cadd_DesignFiles.aspx">CADD Design Files</a></p>
    <p><a href="http://www.scdot.org/doing/cadd_SUE.aspx">Subsurface Utility Engineering (SUE)</a></p>
    <p><a href="http://www.scdot.org/doing/cadd_RoadwayDesign.aspx">Roadway Design Files</a></p>
    <p><a href="http://www.scdot.org/doing/cadd_BridgeDesign.aspx">Bridge Design Files</a></p>
    <p><a href="http://www.scdot.org/doing/cadd_Traffic.aspx">Traffic Engineering Files</a></p>
</div>
<h3 class="accordionShow"><a>Engineering Directives</a></h3>
<div class="insideAccordionPanelContent">
    <!-- First link is for site Map Only and should not appear in Accordion -->
    <a href="http://info.scdot.org/Construction_D/sitepages/Engineering_directives.aspx" class="siteMapShow panelTitle">Engineering Directives</a>
    <!-- Accordion Links -->
    <p><a href="http://info.scdot.org/Construction_D/sitepages/Engineering_directives.aspx">Engineering Directives</a></p>
    <p><a href="http://info.scdot.org/Construction_D/ED/ED-index.pdf">Engineering Directives Index (PDF)</a></p>
</div>
<h3 class="accordionShow"><a>Hydraulic Engineering</a></h3>

也许如果您使用开发人员工具(F12)或Firebug检查我的页面,它会有所帮助。希望有所帮助!

d