web-development-kb-ko.site

탭 오버플로 : 매년 탭을위한 공간이 부족하면 어떻게해야합니까?

매년 수상자를 구분하는 탭과 함께 이전에 수상한 사람을 나열하는 페이지가 있습니다.

  • 매년 40 명의 수신자가 있습니다.
  • 받는 사람의 이름이 직책 및 회사와 함께 표시됩니다.
  • 최대 3 년 동안 같은 사람을 선택할 수 있습니다.
  • 3 년의 우승자는 명예의 전당에 들어갑니다.
  • 현재 매년 수상자는 별도의 탭에 표시됩니다.

문제는 공간이 부족하다는 것입니다. 내년 이후에는 탭을 더 추가 할 여유가 없습니다 . 이 데이터를 구성하여 최대 20 년 동안 수상한 다른 방법은 무엇입니까?

Screenshot of tab interface

참고 : 감사합니다 Robert Fraser " Tab Overflow "

32
Patrick McElhaney

지난 10 년간 수상한 11 번째 탭에서 지난 10 년의 수상 내역을 보여주는 것은 어떻습니까?

2011 | 2010 | 2009 | 2008 | 2007 | 2006 | ... | Older

대부분의 사람들은 가장 최근의 어워드에만 관심이 있기 때문에, 한 번의 클릭으로 더 오래된 어워드를받는 것은 큰 문제가되지 않습니다.

"이전"을 클릭하면 다음 탭이있는 페이지가 표시됩니다.

Recent | ... | 2000 | 1999

그렇지 않으면 현재 페이지와 동일하게 보입니다. 추가 시각적 단서처럼 색 구성표를 변경할 수 있지만 "있는 힘"에 달려 있습니다.

40
ChrisF

'...'탭이 있고 JavaScript를 클릭하면 오른쪽으로 '스크롤'하고 다른 탭을 표시하기 위해 일부 JavaScript (yay jQuery)를 사용할 수 있습니다. 그런 다음 왼쪽에 화살표가있어 새로운 탭으로 돌아갈 수 있습니다. (영감을주는 TY @ChrisF)

11
LoganGoesPlaces

레코드의 경우 @ChrisF의 답변이 마음에 들지만 Google 스프레드 시트에서 처리하는 방법은 다음과 같습니다.

alt text

8
jessegavin

목록 위에 막대를 추가하고 막대의 왼쪽에서 연도를 선택하는 드롭 다운을 추가합니다. 그런 다음 드롭 다운을 통해 다른 필터링 옵션을 추가 할 여지가 있습니다.

6
LoganGoesPlaces

페이지 매김에 탭이 올바른 메타포가 아닐 수도 있습니다. 주어진 공간에 맞지 않는 연도에 페이지를 다시로드하지 않으려면 가로 스크롤 목록이 더 잘 작동 할 수 있습니다.

Apple 's Mac page 상단의 제품 목록을 확인하십시오.

당신의 연도 목록은 엄청나게 커질 수 없으므로 즉시 페이지가 아닌 페이지를 숨기는 등의 일반적인 페이지 매김 문제에 대해 걱정할 필요가 없습니다.

"‹... 148 149 150 151 152 ...›"

모든 연도를 나열하고 즉시 관련성이없는 것을 폐색하는 방법을 찾는 것이 가장 좋습니다.

5
Brendan Berg

연도가 그렇게 많지 않으면 '이전'연도를 드롭 다운 메뉴 아래에 둘 수 있습니다.

enter image description here

3
Ades

Firefox처럼 할 수 있습니다. 숨겨진 탭에 대한 스크롤이 있습니다. 공간보다 탭을 더 많이로드 할 수 있습니다. 또는 Chrome처럼 더 많은 탭을 추가하여 탭을 더 작게 만들 수 있습니다 (탭을 작게 만들면 레이블이 사라지기 때문에이 솔루션은 작동하지 않습니다). 탭의 스크롤 영역을 갖는 것이 가장 좋은 해결책이라고 생각합니다. 이런 식으로 사용자는 제한이 없습니다. 드롭 다운 목록을 추가하여 사용자가 페이지 사이를 빠르게 전환 할 수 있습니다.

2
Morteza Milani

탭에 대해 경계가 설정되어 있기 때문에 ( "20 년"가치가 있음) "수직 탭"을 사용할 수 있습니다. 대부분의 블로그 소프트웨어가 사이드 바에 "범주"또는 "아카이브"를 갖는 방식과 같습니다. 그런 다음 필요한 경우 가장 중요한 트래픽이 많은 항목을 현재 탭이있는 상단의 사용하기 쉬운 형식으로 넣을 수 있습니다.

예를 들어 내 웹 사이트 (기본 제공 템플릿)에는 왼쪽에 "아카이브"목록이 있습니다.

http://www.aaronlerch.com/blog/

(참고로 사이트를 포주하려고하지는 않습니다. 내가 찾고있는 것을 알았 기 때문에 가장 먼저 떠 올랐습니다.)

2
Aaron Lerch

여기 다른 사람들과 마찬가지로 탭에서 벗어나는 것이 좋습니다.

그러나 당신이 그들에 붙어 있다면, 당신은 행에 더 많은 탭을 넣고 축소 할 수 있습니다. (Chrome의 탭을 생각하고 있습니다.) 레이블이 맞지 않을 정도로 좁 으면 레이블을 자릅니다. 당신의 경우에, 당신은 년의 시작을 자르고 싶습니다 :

| ..12 | ..11 | ..10 | ..09 | ..08 | ..07 | ..06 | ..05 | ..04 | ..03 | ..02 | ..01 | ..00 | ..99 |

확실히 최적은 아니지만 탭을 버리는 데 동의 할 때까지 클라이언트를 대체 할 수 있습니다.

2
Ken Mohnkern

탭을 표시하는 가장 좋은 방법이 아닐 수도 있습니다. 그러나 클래식 탐색을 중단하지 않으려면 화살표 2 개를 배치해야합니다. 하나는 왼쪽을 가리키고 다른 하나는 오른쪽을 가리 킵니다.

1
David Lalo Matus

가장 자주 사용한다고 생각되는 탭을 표시 할 수도 있습니다 (또는 지난 10 년까지). 마지막에 "이전"이라고 표시된 탭이 있으며 JavaScript를 사용하여 클릭하면 남은 년의 목록이 표시됩니다. 이 방법은 목록이 실제로 너무 길다는 것을 표시하기 위해 오랜 세월이 지난 경우에는 효과가 없을 수 있습니다. 또한 JS를 사용하지 않는 사용자에 대해 수행 할 작업도 고려하지 않습니다.

1
lori.lee

이 탭들은 모두 매우 바쁘고 시끄러운 디자인입니다. 또한 think 탭은 동일한 데이터의 변형이 아닌 다른 데이터 세트를 그룹화하는 데 더 적합합니다.

양쪽에 이전/다음 버튼이있는 드롭 다운과 같은 것을 제안합니다. 또는 사이드 바 등의 목록.

사용자가 호기심으로 몇 년 동안 탐색을 기대하거나 특정 연도의 수상 내역을 검토하고 싶습니까? 후자의 경우 텍스트 필드가 더 빠릅니다.

0
Peter Frings

다음 탭, 이전 탭, 탭의 다음 페이지, 탭의 이전 페이지, 버튼이 필요하지만 충분하지 않습니다.
-원격 탭으로 스크롤하면 정말 성 가실 것입니다.

연도 탭이있는 계층 탭 (십년 탭)을 사용해보십시오.
또한 연도를 입력하여 원하는 탭으로 바로 이동할 수 있습니다.

0
Danny Varod