ASP.net에서 선택 가능한 탭/메뉴를 구현하는 우아한 방법이 있습니까?

ASP.net에서 탭 스타일 메뉴 시스템을 구현하는 방법을 찾기 위해 고심하고 있습니다. 탭은 HTML/CSS 관점에서 잘 보이고 마스터 페이지에 구현되므로 콘텐츠 페이지에서 body 태그에 액세스 할 수 없습니다. 내가 해결하려고하는 것은 사용자가 액세스하는 페이지를 기반으로 "활성 탭"을 변경하는 방법입니다.ASP.net에서 선택 가능한 탭/메뉴를 구현하는 우아한 방법이 있습니까?

내가이 일을 여러 가지 방법을 생각할 수 있습니다

는이 동적 선택된 탭 클래스를 조작하여 Page_Load
사용 jQuery를에 목록 항목을 조작 각 페이지로드
에서 HTML을 생성

일부 솔루션을 적합하지 않게 만드는 추가 문제가 있습니다. 하나의 탭은 여러 다른 페이지 이름을 포함 할 수 있습니다. 예를 들어, 코스 탭은 Default.aspx와 CourseDetail.aspx 모두에 대해 선택되어야합니다.

이들 중 어느 것도 특별히 우아해 보이지 않지만 ASP.net에서이 작업을 수행하는 더 좋은 방법이 있다는 느낌을 갖지만 내가 무엇을보고 있는지 (또는 검색하고 있는지) 알지 못합니다.

HTML :

<div id="tabs"> 
    <ul> 
     <li class="selectedtab"><a href="/">Courses</a></li> 
     <li><a href="#">My Courses</a></li> 
     <li><a href="#">Administration</a></li> 
    </ul> 
</div>

CSS :

#head ul 
{ 
    list-style: none; 
    padding:0; 
    margin:0; 
} 

#head li 
{ 
    display: inline; 
    border: solid; 
    border-width: 1px 1px 0 1px; 
    margin: 0 0.5em 0 0; 
    background: #EEE; 
    font-size: large; 
    font-weight: bold; 
    padding-top: 0.3em; 
} 

#head li a 
{ 
    padding: 0 1em; 
    text-decoration: none; 
    color: Black; 
} 

#head .selectedtab 
{ 
    padding-bottom: 1px; 
    background: white; 
    border-bottom: 1px solid white; 
} 

#tabs 
{ 
    text-align: right; 
    width: 100%; 
    border-bottom: 1px solid; 
}

출처

2009-06-29 Richard Slater

난 항상 과거에 이런 짓을 한 방법은 몸에게 클래스, 다음 각 탭 클래스 (또는 ID)를 제공하는 것입니다 , CSS에있는 것을 사용하십시오.

<!-- the tabs now have a class you can use --> 
<div id="tabs"> 
    <ul> 
     <li class="tabone"><a href="/">Courses</a></li> 
     <li class="tabtwo"><a href="#">My Courses</a></li> 
     <li class="tabtre"><a href="#">Administration</a></li> 
    </ul> 
</div>

첫 페이지

<body class="tabonepage">...

secondpage

<body class="tabtwopage">...

CSS -이 조금 자세한 얻을 수 있지만,이 한 자리에 국한입니다. 당신이 493 개 탭이없는만큼, 당신은

.tabonepage .tabone, 
.tabtwopage .tabtwo, 
.tabtrepage .tabtre, 
{ 
    padding-bottom: 1px; 
    background: white; 
    border-bottom: 1px solid white; 
}

편집로 나는에 ... 클래스를 입수 한 방법에 대한이

이 어디 황금있을거야 I 부끄러움 속에 내 머리를 매달 리라. 보통 BodyClass라는 주 마스터에 속성을 넣은 다음 OnPreRender에 해당 속성을 설정하는 코드를 입력하고 주 마스터에 표현 구멍을 둡니다. 진짜 예쁘지는 않지 만 함께 살았습니다. 바디 클라스가 눈에 띄는 것보다 훨씬 낫습니다 :-) 아마도 코드 숨김을 포함하지 않는 방법이 있습니다. 완전히 조사한 적이 없었습니다. MVC가 도움이 될 것 같은 느낌을받습니다.

MainMaster.Master :

<body class='<%=BodyClass%>'>

MainMaster.Master.cs

public string BodyClass{ get; set; }

everyotherpage.영문은

<%@ MasterType VirtualPath="~/MasterPages/MainMaster.Master" %>

everyotherpage .aspx.cs (I이 필요한 경우, 당신이 강하게 코드 숨김에서 BodyClass 속성에 대한 액세스를 입력 한 그렇게 생각 기억할 수없는)

protected override void OnPreRender(EventArgs e) 
    { 
     base.OnPreRender(e); 
     this.Master.BodyClass = "areamydetails"; 
    }

출처

2009-06-29 10:19:21

좋아요, 저는 ASP.net에서 그것을 구현하는 방법을 좋아합니다. 본문 요소의 CssClass를 변경할 수있는 권한이없는 것처럼 마스터 페이지를 사용하고 있습니다. –

DIV 또는 컨트롤의 CSS 클래스를 현재 위치를 기준으로 전환하는 것은 상당히 우아한 방법이라고 생각합니다. 현재 액세스중인 페이지를 Sitemap을 사용하여 ASP.NET 탐색 API에 연결하는 경우 잘 수행해야합니다.

출처

2009-06-29 10:26:20 Cerebrus

예, SiteMap을 사용하는 것이 좋습니다. – Noldorin

ASP.net에서 선택 가능한 탭/메뉴를 구현하는 우아한 방법이 있습니까?

답변

관련 문제