2013-12-22 1 views
1

Sitecore에 모든 페이지에 사용되는 마스터 레이아웃이 있습니다. 마스터 배치 ...이 탭은 활성 또는 활성 중입니다 ... 예를 들어, 코드는 다음 페이지 상단의 탭의 표식을 나타내는 ...Sitecore 마스터 레이아웃에서 CSSclass를 제어하는 ​​방법

<div class="main-nav> 
    <a id="tabmovies" href="/Movies" class="main-nav-tab active">Movies</a> 
    <a id="tabtheatres" href="/Theatres" class="main-nav-tab">Theatres</a> 
</div> 

매번 일부 동적 기능을 가지고 페이지가로드되면 마크 업이 활성화됩니다. 동영상이 활성 상태입니다. 그 사람이 tabmovies 또는 tabtheatres를 클릭했는지 CSSLC의 "활성화 된"부분을 전환했는지 여부를 제어하고 싶습니다.

이 작업을 수행 할 수있는 방법이 있습니까? 세션 변수는 이것이 훨씬 더 복잡하게하기 위해 모두 "클라이언트 측"임을 유의하십시오.

두 가지 마스터 레이아웃이 있고 사용자가 선택한 항목에 따라 두 가지 마스터 레이아웃 중 하나만 사용해도됩니다.

내 유일한 옵션 일 수 있습니다.

+0

jQuery 또는 원시 JavaScript와 같은 JS 라이브러리를 사용하고 있습니까? – jammykam

+0

자바 스크립트와 jquery 모두 –

답변

5

네비게이션을 생성하고 필요한 로직에 따라 클래스를 적절히 설정하는 것이 좋습니다. 리피터에 네비게이션 아이템의 컬렉션을 바인딩한다.

<asp:Repeater id="rptMainNav" runat="server" OnItemDataBound="rptMainNav_ItemDataBound"> 
    <HeaderTemplate> 
     <div class="main-nav"> 
    </HeaderTemplate> 
    <FooterTemplate> 
     </div> 
    </FooterTemplate> 
    <ItemTemplate> 
     <asp:HyperLink id="NavItemLink" runat="server" /> 
    </ItemTemplate> 
</asp:Repeater> 

그러면 바인딩 된 아이템 데이터에 CSS 클래스를 적절하게 설정할 수있다.

protected void rptMainNav_ItemDataBound(Object Sender, RepeaterItemEventArgs e) { 
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { 
     Sitecore.Data.Items.Item navItem = (Sitecore.Data.Items.Item)e.Item.DataItem; 
     HyperLink navLink = e.Item.FindControl("NavItemLink"); 

     navLink.Text = navItem.DisplayName; 
     navLink.NavigateUrl = Sitecore.Links.LinkManager.GetItemUrl(navItem); 
     navLink.Attributes["class"] = "main-nav-tab"; 

     // This is where you would put whatever check you want... 
     // - For example if the page is the current page 
     // - Or if the nav item is an ancestor of the current page 
     if(Sitecore.Context.Item.Id == navItem.Id) { 
      navLink.Attributes["class"] += " active"; 
     } 

     // set more link attributes, etc. 
    } 
} 

이것은 탐색 요소에서 활성 상태를 설정하고 동적으로 허용하는 꽤 일반적인 방법입니다. 네비게이션 링크와 텍스트를 전체 레이아웃에 하드 코딩하는 것을 강력하게 권장합니다. 예를 들어, 홈페이지 또는 사이트 루트에있는 항목의 TreelistEx 모음이되도록하십시오. Sitecore를 재미있게 즐기십시오.

+0

감사합니다 ... 나는 이것을 시도 할 것이다. –

+0

이것은 내가하는 일이기도합니다. 전체 솔루션의 핵심은 현재 페이지 (컨텍스트 항목)가 루프에있는 항목인지 확인하는 것입니다 : Sitecore.Context.Item.Id == navItem.Id' –

관련 문제