메뉴 아래 종속된 여러 게시판을 한 눈에 볼 수 있도록 구성된 위젯입니다.
< 와 > 기능으로 페이지 이동이 가능하며, 현재 보고 있는 이동된 페이지의 카운트를 확인할 수 있습니다.
쇼핑몰, 뉴스사이트, 포털 사이트 등에서 쉽게 볼 수 있는 카운트와 이동 버튼이 같이 구성된 위젯입니다.
그동안 저도 찾아봤는데 이런 구성의 위젯은 없어 거의 보름만에 구현을 했네요.
상단은 탭 형식으로 로딩되면 첫번째 탭에 밑줄이 표시되어 지금 하단에 펼쳐진 게시판이 어느 메뉴에 종속된 게시판들인지 확인할 수 있습니다. 다른 탭을 클릭하면 첫번째 밑줄은 제거되고, 해당 탭에 밑줄이 표시됩니다.
화살표를 이용하여 다음 페이지로 이동하면 다음 페이지의 첫번째 탭이 밑줄이 표시되고 동작은 이상 동일합니다.
아직은 상단 기능만 구현이 되었고 클릭하면 하단에 게시판들이 펼쳐지는 것은 이제 또 계속 작업해야하네요.
일단 한 고비 넘겨서 밤에 작업하다 와서 글 남깁니다.
사실 위젯으로는 구현하기 어려워 레이아웃에 포함되어 동작하는 녀석입니다. ^^;
위젯으로 구현한다면 게시판을 하나씩 선택하는 게 번거로워서 사이트맵을 이용하여 해당 사이트맵 메뉴를 선택하면
하위 메뉴 게시판들을 모두 불러와서 하단 영역에 속하는 게시판을 저런 식으로 뿌려주고 싶은데 위젯을 만드는 건 어려울 것 같네요. @_@;;
[소스 공유]
1. 하단 게시물 나타내주기
http://codepen.io/eond/pen/MwRgpg
http://codepen.io/eond/pen/waZwME
2. 페이지 이동 기능 실험
http://codepen.io/eond/pen/MwRgWM?editors=101
http://codepen.io/eond/pen/xGexgW?editors=001
http://codepen.io/eond/pen/eNoppv?editors=001
http://codepen.io/eond/pen/oXObmx?editors=101
최종구현 : http://codepen.io/eond/pen/mJgRro?editors=101
3. 컨텐츠 표시
var $t = $(e.target);
if ($t.hasClass("first")) {
x.all.hide();
x.first.show();
}
http://codepen.io/eond/pen/bdJQrN
- 선택하지 않았을 경우 뜨는 게 필요함.
http://codepen.io/eond/pen/BNEqaY
http://www.websamo.com/bbs/board.php?bo_table=qna&wr_id=416#
http://codepen.io/eond/pen/LVvaxd?editors=101
