펄스나인

[펄스나인] 쉽게쓰는 UI/UX - 자동롤링 탭

01.png

저같은 짜지퍼는.. 만들어진거 줍줍해서 레이아웃에 맞게

짜맞추려면 여간 귀찮은게 아닙니다..ㅎ

그래서! 만들어보았습니다.

 

가로 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, 엣지, 크롬, 웨일

 

 

추천은 사랑인거 아시죠?

버전 정보

테스트한 버전 5.4.2.5
호환 가능 버전 무관

첨부파일

01.png (24 KB)
0회 2020-05-31 10:58 포인트 차감 10
roll_tab.zip (1.3 KB) 247회 2020-05-31 10:55 포인트 차감 10
|

댓글 110개

좋은자료 잘 사용 하겠습니다.
감사합니다.
감사합니다 잘쓰셔요~
감사합니다 !!
와 감사합니다. ^^ 따랑 합니다 `~~~~~
ㅎㅎㅎ 사랑합니다 ㅋㅋ
감사합니다 ~~
감사합니다 잘쓰세요~
감사합니다.
오늘도 사랑을 실천하고 갑니다^^
어 또 실천해주셨네요 ㅎㅎ
감사합니다 !!
사랑을 한 개 밖에 못드려 아쉽네요 ^^;

무조건 추천 누루고 시작입니다 ㅎㅎ

감사합니다
ㅎㅎㅎㅎ 감사합니다 테루님 ㅎ
감사합니다~!
감사합니다. 깔끔하고 너무 좋습니다.
감사합니다 잘쓰셔요 ㅎㅎ
하~ 필요한데 만들어야 하나..하는 참이었습니다. 감사합니다. 느므 좋네요 ^^
엇 도움이 되셨다니 좋습니다 ! ㅎㅎ
감사 합니다.
감사합니다~!
ㅎㅎ 감사합니다~ 잘써주세요~
좋은 자료 감사합니다.~~~
감사합니다 ^^
유용한 자료네요. 감사합니다.
쓸만한가요? 감사합니다~
얼릉 적용했습니다.! 감사합니다
ㅎㅎ 감사합니다~
유영한 자료군요..ㄳ
좋은 자료 감사합니다.^^
감사합니다~잘쓰셔요~
[http://sir.kr/data/editor/2006/a3f39944b5c0cce6c9a4164e951843bd_1591171463_4404.gif]
[http://sir.kr/data/editor/2006/7fe7ac6abacd6be97e0609061561aeb7_1591175273_6213.gif]
감사합니다~~~~추천은 사랑 ㅋ
ㅋㅋ 감사합니다~!
굿굿굿!!!!
^^ 감사합니다!
굿 완전 감사합니다. 필요하였는데 잘 사용하겠습니다.
감사합니다~ 잘 써주세요~ ㅎ
좋은 기능이네요~
감사합니다.^^
감사합니다~!!
이런 내가 원하던것! 너무 감사합니다!!! 흡...
별거 없어요...ㅠ 잘써주세요 ㅎㅎ
진짜 필요했는데 잘쓰겠습니다!!
ㅎㅎ 잘쓰세요~ 댓글 감사합니다~
줍줍도 능력이죠 ㅎㅎ 스크랩 해둬야겠습니다
ㅎㅎ 감사합니다~
필요했는데...감사합니다ㅠㅠ
도움이 되셨으면 좋겠습니다 ^^
굿굿 찾고 있었던건데 유익하게 사용하겠네용~
ㅎㅎ 잘쓰세요~
감사합니다.
감사합니다~~~!!!
좋습니다.ㅎ
그런데 이런 코드가 포인트 10원이라니요,,
최소 1000원으로 올려주세요,,ㅜㅜ
포인트가 남아돌아 미치겟습니다.
포인트가 크게 의미가없어서 ㅎㅎㅎ
좋은 말씀 감사합니다!
감사합니다. 잘 사용하겠습니다. ^^
댓글 감사합니다 ^^
댓글 감사합니다~
필요했는데 정말 정말 감사합니다....
댓글 감사합니다~ 잘쓰세요~
다양하게 이용할 수 있는 탭기능, 감사합니다.
추천 꾹! 하고 갑니다.
추천 감사합니다 ^^
유용하셨으면 좋겟네요~!!
감사합니다 ^^
감사합니다~!
아주 유용한 자료 감사합니다 ~
댓글 감사합니다~ 잘쓰셔요!
우와 유용한 자료 감사합니다!!!ㅎㅎㅎㅎ
^^ 감사합니다~!! 잘 써주십시요~~
스타일에 넣고 태그넣고 사용하면 되는건가요?
네 그냥 복붙 하시면 되세요~
감사합니다.
댓글 감사합니다~
감사합니다 ^^
외계어 같은 제이쿼리 꺼려했는데... 제이쿼리없이 작동하게 만들어 주셔서 감사합니다
^^ 감사합니다 잘쓰셔요~
네이버우측 처럼
< 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();
?>
음. 단순히 현재탭이 아니면 display: none; 만 해주는 구조라
감이 안잡히네요 ㅠㅠ
도움이 못되어 죄송합니다..
한 페이지에서
올려주신 탭을 2번 사용하니 이름이 중복되는지 안되더라고요.
어디를 수정해야 하는지 좀 알려주시면 감사하겠습니다.

좋은 자료 공개 감사합니다.
같은 아이디를 가진 엘리먼트는 중복으로 사용할 수 없습니다~
id="contabroll" 부분을 다른걸로 바꾸시고
아래쪽에 있는 스크립트도 복사하셔서
id를 지정하고 있는 부분을 모두 추가한 ID 로 바궈주셔야 합니다!
감사합니다.
스크룰도 넣을수있나요?
네 css로 가능합니다~
overflow-y:scroll;
.contabroll dl에 넣으니 잘됩니다.
정말 감사합니다.
해결되셨다니 다행입니다 ^^

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기
🐛 버그신고