[펄스나인] 쉽게쓰는 UI/UX - 자동롤링 탭 정보
레이아웃 [펄스나인] 쉽게쓰는 UI/UX - 자동롤링 탭
관련링크
첨부파일
테스트한 버전5.4.2.5
호환 가능 버전무관
본문
저같은 짜지퍼는.. 만들어진거 줍줍해서 레이아웃에 맞게
짜맞추려면 여간 귀찮은게 아닙니다..ㅎ
그래서! 만들어보았습니다.
가로 100% 라서 아무곳에나 때려넣어도 잘돌아 가게,
갯수 조절이 쉽고 제이쿼리는 없어도 되고!
불필요한 css 없어서 레이아웃 안깨지고!
클래스명은 알아먹을 순 있지만 겹치지 않도록,
ul li 안쓰고 dl, dd 사용...ㅎ
기능은 자동롤링(시간조절), 마우스 오버하는 동안 롤링 정지, 정도 입니다.
사용법은 딱히 없고, html 파일 열으셔서 코드 복붙 하시면 됩니다.
style 은 동일 문서안에 포함 했습니다.
-------------------------------------------------
탭 추가방법 간략하게! (3개 > 4개로 변경)
01. <dd></dd> 추가(복사)후 onclick="contabroll(4);" 숫자변경.
02. <dl></dl> 추가(복사) 후 내용넣기.
03. 스타일 .contabroll dd:nth-child(4) 숫자변경.
04. 탭 가로사이즈 변경 width: 33.33333%; > width: 25%;
끝!
-------------------------------------------------
위에 말씀드린 내용은 파일에 상세하게 주석 달아놓았습니다.
건강 유의하세요~!
크로스브라우징 : 익스11, 엣지, 크롬, 웨일
추천은 사랑인거 아시죠?
추천
52
52
댓글 전체
좋은자료 잘 사용 하겠습니다.
감사합니다.
감사합니다.
감사합니다 잘쓰셔요~
♥♥♥
♥♥♥♥♥
감사합니다.
감사합니다 !!
와 감사합니다. ^^ 따랑 합니다 `~~~~~
ㅎㅎㅎ 사랑합니다 ㅋㅋ
감사합니다 ~~
감사합니다 잘쓰세요~
감사합니다.
오늘도 사랑을 실천하고 갑니다^^
오늘도 사랑을 실천하고 갑니다^^
어 또 실천해주셨네요 ㅎㅎ
감사합니다 !!
감사합니다 !!
사랑을 한 개 밖에 못드려 아쉽네요 ^^;
무조건 추천 누루고 시작입니다 ㅎㅎ
감사합니다
무조건 추천 누루고 시작입니다 ㅎㅎ
감사합니다
ㅎㅎㅎㅎ 감사합니다 테루님 ㅎ
감사합니다.
감사합니다~!
감사합니다. 깔끔하고 너무 좋습니다.
감사합니다 잘쓰셔요 ㅎㅎ
하~ 필요한데 만들어야 하나..하는 참이었습니다. 감사합니다. 느므 좋네요 ^^
엇 도움이 되셨다니 좋습니다 ! ㅎㅎ
감사 합니다.
감사합니다~!
감사합니다.
감사합니다!
굿굿!
ㅎㅎ 감사합니다~ 잘써주세요~
좋은 자료 감사합니다.~~~
감사합니다 ^^
유용한 자료네요. 감사합니다.
쓸만한가요? 감사합니다~
감사합니다.
감사합니다~
얼릉 적용했습니다.! 감사합니다
ㅎㅎ 감사합니다~
유영한 자료군요..ㄳ
감사합니다~
감사합니다~~
감사합니다!
좋은 자료 감사합니다.^^
감사합니다~잘쓰셔요~
감사합니다~~~~추천은 사랑 ㅋ
ㅋㅋ 감사합니다~!
굿굿굿!!!!
^^ 감사합니다!
굿 완전 감사합니다. 필요하였는데 잘 사용하겠습니다.
감사합니다~ 잘 써주세요~ ㅎ
좋은 기능이네요~
감사합니다~
감사합니다.^^
감사합니다~!!
이런 내가 원하던것! 너무 감사합니다!!! 흡...
별거 없어요...ㅠ 잘써주세요 ㅎㅎ
진짜 필요했는데 잘쓰겠습니다!!
ㅎㅎ 잘쓰세요~ 댓글 감사합니다~
스크랩!!
^^
줍줍도 능력이죠 ㅎㅎ 스크랩 해둬야겠습니다
ㅎㅎ 감사합니다~
필요했는데...감사합니다ㅠㅠ
도움이 되셨으면 좋겠습니다 ^^
굿굿 찾고 있었던건데 유익하게 사용하겠네용~
ㅎㅎ 잘쓰세요~
감사합니다.
감사합니다~
감사합니다~~~!!!
감사합니다~
좋습니다.ㅎ
그런데 이런 코드가 포인트 10원이라니요,,
최소 1000원으로 올려주세요,,ㅜㅜ
포인트가 남아돌아 미치겟습니다.
그런데 이런 코드가 포인트 10원이라니요,,
최소 1000원으로 올려주세요,,ㅜㅜ
포인트가 남아돌아 미치겟습니다.
포인트가 크게 의미가없어서 ㅎㅎㅎ
좋은 말씀 감사합니다!
좋은 말씀 감사합니다!
감사합니다. 잘 사용하겠습니다. ^^
댓글 감사합니다 ^^
감사합니다.
댓글 감사합니다~
필요했는데 정말 정말 감사합니다....
댓글 감사합니다~ 잘쓰세요~
다양하게 이용할 수 있는 탭기능, 감사합니다.
추천 꾹! 하고 갑니다.
추천 꾹! 하고 갑니다.
추천 감사합니다 ^^
유용하셨으면 좋겟네요~!!
유용하셨으면 좋겟네요~!!
우와 감사합니다
감사합니다 ^^
감사합니다
감사합니다!
감사합니다
감사합니다~!
아주 유용한 자료 감사합니다 ~
댓글 감사합니다~ 잘쓰셔요!
우와 유용한 자료 감사합니다!!!ㅎㅎㅎㅎ
^^ 감사합니다~!! 잘 써주십시요~~
스타일에 넣고 태그넣고 사용하면 되는건가요?
네 그냥 복붙 하시면 되세요~
감사합니다.
댓글 감사합니다~
감사합니다.
감사합니다 ^^
외계어 같은 제이쿼리 꺼려했는데... 제이쿼리없이 작동하게 만들어 주셔서 감사합니다
^^ 감사합니다 잘쓰셔요~
네이버우측 처럼
< 1/10 > 이런거
페이지 넘기는거 하나 맹들어 주세요 ^^
< 1/10 > 이런거
페이지 넘기는거 하나 맹들어 주세요 ^^
swiper 플러그인 사용을 추천드립니다~
감사합니다.
댓글 감사합니다~
좋은자료 감사합니다! 그런데 하나 여쭤보고 싶은게 있는데 영카트에서 각 탭 내용에 상품을 뿌려주고 싶은데, 상품리스트가 보였다가 안보였가 하내요... ㅠ..
제 지식으로는 감이 안잡혀서 그런데 혹시 감이 잡히시는게 있으신지요 ㅠㅠ.... 상품리스트 코드는 아래같은 기본코드를 사용했습니다.
<?php
$list = new item_list();
$list->set_category('20',1);
$list->set_list_mod(5);
$list->set_list_row(1);
$list->set_img_size(250,250);
$list->set_list_skin(G5_SHOP_SKIN_PATH.'/main.20.skin.php');
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_basic', false);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', false);
$list->set_view('sns', false);
echo $list->run();
?>
제 지식으로는 감이 안잡혀서 그런데 혹시 감이 잡히시는게 있으신지요 ㅠㅠ.... 상품리스트 코드는 아래같은 기본코드를 사용했습니다.
<?php
$list = new item_list();
$list->set_category('20',1);
$list->set_list_mod(5);
$list->set_list_row(1);
$list->set_img_size(250,250);
$list->set_list_skin(G5_SHOP_SKIN_PATH.'/main.20.skin.php');
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_basic', false);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', false);
$list->set_view('sns', false);
echo $list->run();
?>
음. 단순히 현재탭이 아니면 display: none; 만 해주는 구조라
감이 안잡히네요 ㅠㅠ
도움이 못되어 죄송합니다..
감이 안잡히네요 ㅠㅠ
도움이 못되어 죄송합니다..
한 페이지에서
올려주신 탭을 2번 사용하니 이름이 중복되는지 안되더라고요.
어디를 수정해야 하는지 좀 알려주시면 감사하겠습니다.
좋은 자료 공개 감사합니다.
올려주신 탭을 2번 사용하니 이름이 중복되는지 안되더라고요.
어디를 수정해야 하는지 좀 알려주시면 감사하겠습니다.
좋은 자료 공개 감사합니다.
같은 아이디를 가진 엘리먼트는 중복으로 사용할 수 없습니다~
id="contabroll" 부분을 다른걸로 바꾸시고
아래쪽에 있는 스크립트도 복사하셔서
id를 지정하고 있는 부분을 모두 추가한 ID 로 바궈주셔야 합니다!
id="contabroll" 부분을 다른걸로 바꾸시고
아래쪽에 있는 스크립트도 복사하셔서
id를 지정하고 있는 부분을 모두 추가한 ID 로 바궈주셔야 합니다!
감사합니다.
감사합니다~
스크룰도 넣을수있나요?
네 css로 가능합니다~
overflow-y:scroll;
overflow-y:scroll;
.contabroll dl에 넣으니 잘됩니다.
정말 감사합니다.
정말 감사합니다.
해결되셨다니 다행입니다 ^^
