AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전
목록
다음
펄스나인

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

펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2020-05-31 (일) 10:55:19 · 9284 · 110

링크

http://false9.iwinv.net/_projects/20200531/ (929)
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, 엣지, 크롬, 웨일

 

 

추천은 사랑인거 아시죠?

#PC용 #모바일용 #반응형

버전 정보

테스트한 버전 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개

들레아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 11:25:02
좋은자료 잘 사용 하겠습니다.
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 17:36:51
감사합니다 잘쓰셔요~
하와이안펀치
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 12:46:31
♥♥♥
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 17:37:03
♥♥♥♥♥
트트리플
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 15:15:22
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 17:37:14
감사합니다 !!
호텔천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 15:58:09
와 감사합니다. ^^ 따랑 합니다 `~~~~~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 17:37:32
ㅎㅎㅎ 사랑합니다 ㅋㅋ
씨씨메이크
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 16:12:06
감사합니다 ~~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 17:37:41
감사합니다 잘쓰세요~
휴휴매니아
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 16:22:51
감사합니다.
오늘도 사랑을 실천하고 갑니다^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 17:38:21
어 또 실천해주셨네요 ㅎㅎ
감사합니다 !!
테테루
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 16:26:49
사랑을 한 개 밖에 못드려 아쉽네요 ^^;

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

감사합니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 17:38:44
ㅎㅎㅎㅎ 감사합니다 테루님 ㅎ
000123984
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 18:02:13
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 18:38:24
감사합니다~!
도도시토끼
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 21:58:29
감사합니다. 깔끔하고 너무 좋습니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 13:48:07
감사합니다 잘쓰셔요 ㅎㅎ
우우륵
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-05-31 (일) 22:46:18
하~ 필요한데 만들어야 하나..하는 참이었습니다. 감사합니다. 느므 좋네요 ^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 13:48:23
엇 도움이 되셨다니 좋습니다 ! ㅎㅎ
마마음으로
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 07:22:15
감사 합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 13:48:31
감사합니다~!
k2and5
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 11:43:46
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 13:48:37
감사합니다!
SmudiBra
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 13:35:33
굿굿!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 13:49:01
ㅎㅎ 감사합니다~ 잘써주세요~
cchoiga
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 15:25:14
좋은 자료 감사합니다.~~~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 18:20:10
감사합니다 ^^
에에이멘뽀이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-01 (월) 22:16:39
유용한 자료네요. 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-02 (화) 11:51:02
쓸만한가요? 감사합니다~
알알짜님
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-02 (화) 00:03:48
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-02 (화) 11:51:10
감사합니다~
나나르즈
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-02 (화) 03:06:38
얼릉 적용했습니다.! 감사합니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-02 (화) 11:51:22
ㅎㅎ 감사합니다~
와와이쿠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-02 (화) 09:09:51
유영한 자료군요..ㄳ
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-02 (화) 11:51:34
감사합니다~
hiadmin
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-02 (화) 13:35:24
감사합니다~~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-02 (화) 15:12:42
감사합니다!
넉넉대삼촌
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-03 (수) 07:00:10
좋은 자료 감사합니다.^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-03 (수) 11:45:02
감사합니다~잘쓰셔요~
디디엔
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-03 (수) 18:14:06
감사합니다~~~~추천은 사랑 ㅋ
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-03 (수) 18:18:53
ㅋㅋ 감사합니다~!
그그지같으자식
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-05 (금) 17:48:03
굿굿굿!!!!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-05 (금) 19:07:50
^^ 감사합니다!
키아라20
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-06 (토) 15:07:52
굿 완전 감사합니다. 필요하였는데 잘 사용하겠습니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-06 (토) 18:44:09
감사합니다~ 잘 써주세요~ ㅎ
ssozet
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-08 (월) 09:17:53
좋은 기능이네요~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-08 (월) 10:33:17
감사합니다~
워크디자인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-09 (화) 05:44:16
감사합니다.^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-09 (화) 10:29:19
감사합니다~!!
뮤뮤나킴
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-09 (화) 10:50:01
이런 내가 원하던것! 너무 감사합니다!!! 흡...
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-09 (화) 11:23:31
별거 없어요...ㅠ 잘써주세요 ㅎㅎ
Chriskim0907
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-10 (수) 20:30:59
진짜 필요했는데 잘쓰겠습니다!!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-11 (목) 10:45:23
ㅎㅎ 잘쓰세요~ 댓글 감사합니다~
Chriskim0907
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-10 (수) 20:31:32
스크랩!!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-19 (금) 08:59:16
^^
jjude1234
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-18 (목) 16:14:39
줍줍도 능력이죠 ㅎㅎ 스크랩 해둬야겠습니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-19 (금) 08:59:30
ㅎㅎ 감사합니다~
aapplo
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-25 (목) 10:34:59
필요했는데...감사합니다ㅠㅠ
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-25 (목) 13:09:46
도움이 되셨으면 좋겠습니다 ^^
신영일
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-28 (일) 11:25:04
굿굿 찾고 있었던건데 유익하게 사용하겠네용~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-29 (월) 10:49:27
ㅎㅎ 잘쓰세요~
그그누가조아
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-29 (월) 12:12:49
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-06-29 (월) 17:07:26
감사합니다~
모아줌
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-07-04 (토) 20:41:15
감사합니다~~~!!!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-07-04 (토) 22:34:48
감사합니다~
그그누x쵸딩
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-07-07 (화) 23:24:53
좋습니다.ㅎ
그런데 이런 코드가 포인트 10원이라니요,,
최소 1000원으로 올려주세요,,ㅜㅜ
포인트가 남아돌아 미치겟습니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-07-08 (수) 10:02:49
포인트가 크게 의미가없어서 ㅎㅎㅎ
좋은 말씀 감사합니다!
삼삼장법사
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-07-14 (화) 15:54:46
감사합니다. 잘 사용하겠습니다. ^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-07-14 (화) 16:00:59
댓글 감사합니다 ^^
k2and5
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-07-30 (목) 17:01:53
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-07-30 (목) 17:04:48
댓글 감사합니다~
탈탈모박사
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-08-07 (금) 10:12:31
필요했는데 정말 정말 감사합니다....
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-08-07 (금) 12:40:27
댓글 감사합니다~ 잘쓰세요~
써써맨
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-08-12 (수) 20:51:36
다양하게 이용할 수 있는 탭기능, 감사합니다.
추천 꾹! 하고 갑니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-08-12 (수) 22:44:32
추천 감사합니다 ^^
유용하셨으면 좋겟네요~!!
Daon2
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-09-01 (화) 12:57:58
우와 감사합니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-09-01 (화) 15:47:15
감사합니다 ^^
mmidas05
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-09-05 (토) 20:59:39
감사합니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-09-05 (토) 21:28:32
감사합니다!
Winter0
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-10-06 (화) 17:35:03
감사합니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-10-06 (화) 18:23:40
감사합니다~!
CCRECULTURE
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-10-09 (금) 12:25:31
아주 유용한 자료 감사합니다 ~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-10-09 (금) 16:51:31
댓글 감사합니다~ 잘쓰셔요!
dlsdo04
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-10-19 (월) 13:01:12
우와 유용한 자료 감사합니다!!!ㅎㅎㅎㅎ
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-10-19 (월) 13:03:56
^^ 감사합니다~!! 잘 써주십시요~~
조셉핀
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-11-11 (수) 10:54:44
스타일에 넣고 태그넣고 사용하면 되는건가요?
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-11-11 (수) 13:25:15
네 그냥 복붙 하시면 되세요~
레레드마스터
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-12-27 (일) 20:25:03
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-12-28 (월) 09:18:42
댓글 감사합니다~
란란쯔
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-03-05 (금) 17:52:04
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-03-06 (토) 14:43:16
감사합니다 ^^
gg5431
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-04-18 (일) 00:24:23
외계어 같은 제이쿼리 꺼려했는데... 제이쿼리없이 작동하게 만들어 주셔서 감사합니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-04-18 (일) 14:43:19
^^ 감사합니다 잘쓰셔요~
gg5431
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-04-18 (일) 15:20:01
네이버우측 처럼
< 1/10 > 이런거
페이지 넘기는거 하나 맹들어 주세요 ^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-04-19 (월) 20:53:18
swiper 플러그인 사용을 추천드립니다~
linkglobalstar
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-06-16 (수) 09:54:18
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-06-16 (수) 10:41:28
댓글 감사합니다~
뎁뎁안
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-11-02 (화) 11:44:01
좋은자료 감사합니다! 그런데 하나 여쭤보고 싶은게 있는데 영카트에서 각 탭 내용에 상품을 뿌려주고 싶은데, 상품리스트가 보였다가 안보였가 하내요... ㅠ..
제 지식으로는 감이 안잡혀서 그런데 혹시 감이 잡히시는게 있으신지요 ㅠㅠ.... 상품리스트 코드는 아래같은 기본코드를 사용했습니다.
<?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();
?>
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-11-02 (화) 21:21:43
음. 단순히 현재탭이 아니면 display: none; 만 해주는 구조라
감이 안잡히네요 ㅠㅠ
도움이 못되어 죄송합니다..
왕왕코
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-01-16 (일) 16:08:47
한 페이지에서
올려주신 탭을 2번 사용하니 이름이 중복되는지 안되더라고요.
어디를 수정해야 하는지 좀 알려주시면 감사하겠습니다.

좋은 자료 공개 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-01-17 (월) 16:00:21
같은 아이디를 가진 엘리먼트는 중복으로 사용할 수 없습니다~
id="contabroll" 부분을 다른걸로 바꾸시고
아래쪽에 있는 스크립트도 복사하셔서
id를 지정하고 있는 부분을 모두 추가한 ID 로 바궈주셔야 합니다!
지지니파파
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-03-03 (목) 15:00:12
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-03-08 (화) 14:56:58
감사합니다~
aaacccd
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-03-16 (수) 17:01:24
스크룰도 넣을수있나요?
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-03-19 (토) 04:08:35
네 css로 가능합니다~
overflow-y:scroll;
aaacccd
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-03-21 (월) 18:43:49
.contabroll dl에 넣으니 잘됩니다.
정말 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-03-21 (월) 18:45:34
해결되셨다니 다행입니다 ^^
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 스킨

2,750건

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

태그 필터 (최대 3개) 전체 PC용 모바일용 반응형
+