이온디 온 - 컨텐츠 위젯
첨부파일 https://eond.com/blog/360650

 

메뉴 아래 종속된 여러 게시판을 한 눈에 볼 수 있도록 구성된 위젯입니다.
< 와 > 기능으로 페이지 이동이 가능하며, 현재 보고 있는 이동된 페이지의 카운트를 확인할 수 있습니다.
쇼핑몰, 뉴스사이트, 포털 사이트 등에서 쉽게 볼 수 있는 카운트와 이동 버튼이 같이 구성된 위젯입니다.
그동안 저도 찾아봤는데 이런 구성의 위젯은 없어 거의 보름만에 구현을 했네요.

 

상단은 탭 형식으로 로딩되면 첫번째 탭에 밑줄이 표시되어 지금 하단에 펼쳐진 게시판이 어느 메뉴에 종속된 게시판들인지 확인할 수 있습니다. 다른 탭을 클릭하면 첫번째 밑줄은 제거되고, 해당 탭에 밑줄이 표시됩니다.
화살표를 이용하여 다음 페이지로 이동하면 다음 페이지의 첫번째 탭이 밑줄이 표시되고 동작은 이상 동일합니다.

 

아직은 상단 기능만 구현이 되었고 클릭하면 하단에 게시판들이 펼쳐지는 것은 이제 또 계속 작업해야하네요.
일단 한 고비 넘겨서 밤에 작업하다 와서 글 남깁니다.
사실 위젯으로는 구현하기 어려워 레이아웃에 포함되어 동작하는 녀석입니다. ^^;

 

위젯으로 구현한다면 게시판을 하나씩 선택하는 게 번거로워서 사이트맵을 이용하여 해당 사이트맵 메뉴를 선택하면

하위 메뉴 게시판들을 모두 불러와서 하단 영역에 속하는 게시판을 저런 식으로 뿌려주고 싶은데 위젯을 만드는 건 어려울 것 같네요. @_@;;


[소스 공유]

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

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 164 articles in 6 / 11 pages
번호 제목 제목 날짜날짜
공지 이온디에서 제작 배포 중인 레이아웃 2013/03/13
89 [XE기타] [XE위젯] 이온디 파일박스 배너위젯 2015/09/09
88 [레이아웃제작기] [이온디 에디션] 모바일에서의 터치슬라이딩 구현하기 파일 [2] 2015/09/01
87 [레이아웃제작기] [이온디 레모나] 참조 사이트 2015/08/29
86 [XE기타] 구매 페이지 템플릿 2015/08/26
85 [XE기타] 만들어볼 스타일의 레이아웃 2015/08/25
84 [레이아웃제작기] [이온디 에디션] 사이드바가 있는 경우 반응형 레이아웃의 컨텐츠 코딩 방법 2015/08/22
83 [레이아웃제작기] [이온디 에디션] 반응형 메뉴의 역할 2015/08/22
82 [레이아웃제작기] [이온디 에디션] 참조 반응형 웹사이트 2015/08/21
81 [레이아웃제작기] [이온디 온] 헤더 위젯 파일 2015/08/20
80 [레이아웃제작기] [이온디 에디션] 시안 20150820 파일 2015/08/20
79 [레이아웃제작기] 이온디 온 - 메인 작업 완료 80% 2015/08/18
78 [레이아웃제작기] 이온디 온 - 컨텐츠 위젯 디자인 2015/08/18
현재글 [레이아웃제작기] 이온디 온 - 컨텐츠 위젯 2015/08/12
76 [레이아웃제작기] 이온디 온 - 통합검색 2015/08/09
75 [레이아웃제작기] 이온디 온 레이아웃 로그인 UI 기획 러프 스케치 파일 2015/07/04

해시태그 디렉터리