본문 바로가기
Programming/국비학원

220725 - 제이쿼리 - 예제, 플러그인 (ui, colorbox)

지고르 2022. 7. 26. 11:17
ui 플러그인
  • autocomplete : 자동완성 기능
  •  

    <script>
        $(function(){
            var words=['able','apple','app','bear','bit','byte','car','cable'];
            $('#eng').autocomplete({
                source:words
            });
        });
    </script>
</head>
<body>
    <div id>
        <label for="eng">단어</label>
        <input type="text" id="eng">
    </div>
</body>

 

 

 

  • tabs : 탭 형태
  •  

    <script>
        $(function(){
            $('#tabs').tabs({
                event:'mouseover'  //마우스오버할 때 탭 이동
            });
        });
    </script>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#news-1">경제뉴스</a></li>
            <li><a href="#news-2">사회뉴스</a></li>
            <li><a href="#news-3">스포츠뉴스</a></li>
        </ul>
        <div id="news-1">
            <p>경기선행지수 13개월째 하락‥"경기 전망 부정적"
            </p>
            <p>지난 6월 한국의 OECD 경기선행지수는 98.87을 기록해 지난해 5월 이후 13개월 연속 내림세를 보이고 있는데, 특히 최근 6개월간은 지수가 기준선인 100을 밑돌았습니다.</p>
        </div>
        <div id="news-2">
            <p>이제 취업자 3명 중 2명은 산재보험 가입자
            </p>
            <p>취업자 3명 중 2명은 산재보험 가입자라고 볼 수 있는 정부 통계가 나왔다.</p>
        </div>
        <div id="news-3">
            <p>거절, 거절, 거절..."첼시, 모든 선수들에게 거절 당하는 팀"
            </p>
            <p>25일(한국시간) 유럽 축구 전문 기자 파브리지오 로마노는 "지난 몇 시간 동안 바르셀로나는 쥘 쿤데 측으로부터 연락을 받았다. 쿤데는 바르셀로나의 제안을 수락할 준비가 됐다. 사비 에르난데스 바르셀로나 감독도 쿤데를 원한다"라며 "첼시도 며칠 동안 쿤데와 협상 중이지만 선수, 세비야 모두 만족시키지 못했다"고 전했다. 
            </p>
        </div>
    </div>
</body>

 

 

 

 

제이쿼리 예제
  • 몬스터 얼굴 부위 슬라이드 예제

  •  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
    <style>
        body{
            background-color: black;
        }
        .lighting{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            display: none;
        }
        #top{
            position: relative;
            left: 0;
            top: 0;
            height: 80ox;
            z-index: 10;
        }
        .text_top{
            position: absolute;
            left: 200px;
            top: 10px;
        }
        #top p{
            color: rgb(52, 241, 86);
            position: absolute;
            left: 140px;
            top: 40px;
        }
        #container{
            position: relative;
        }
        .frame{
            position: absolute;
            left: 100px;
            top: 100px;
            width: 546px;
            height: 629px;
            background-image: url(../images/frame.png);
        }
        .pic_box{
            position:absolute;
            left: 91px;
            top: 84px;
            width: 367px;
            height: 460px;
            overflow: hidden;
        }
        .face{
            position: relative;
            left: 0;
            top: 0;
        }
        .head{
            height: 172px;
        }
        .eyes{
            height: 79px;
        }
        .mouth{
            height: 123px;
            top: -5px;
        }
    </style>
    <script>
        $(function(){
 
            //번개
            setInterval(function(){
                for (var i=0;i<3;i++){
                    $('.lighting').eq(i).fadeIn(250).fadeOut(250);
                }
            });
 
            //몬스터 얼굴
            var clicks=[0,0,0,0];
            $('.face').click(function(){
                i=$(this).index();
                clicks[i]++;
                if(clicks[i]<10){
                    $(this).animate({
                        left:-(clicks[i]*367)
                    });
                }else{
                    $(this).animate({
                        left:0
                    });
                    clicks[i]=0;
                }
            });
 
        });
    </script>
</head>
<body>
    <img class="lighting lighting1" src="../images/lightning-01.jpg" alt="">
    <img class="lighting lighting2" src="../images/lightning-02.jpg" alt="">
    <img class="lighting lighting3" src="../images/lightning-03.jpg" alt="">
    <header id="top">
        <img class="text_top" src="../images/Monster_Mashup.png" alt="">
        <p>Make your own monster face by clicking the picture</p>
    </header>
    <div id="container">
        <div class="frame">
            <div class="pic_box">
                <div class="head face">
                    <img src="../images/headsstrip.jpg" alt="">
                </div>
                <div class="eyes face">
                    <img src="../images/eyesstrip.jpg" alt="">
                </div>
                <div class="nose face">
                    <img src="../images/nosesstrip.jpg" alt="">
                </div>
                <div class="mouth face">
                    <img src="../images/mouthsstrip.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
 cs

 

 

  • 함수로 축약 + 재귀호출 사용 + 랜덤 슬라이드 버튼 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    <style>
        body{
            background-color: black;
        }
        .lighting{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            display: none;
        }
        #top{
            position: relative;
            left: 0;
            top: 0;
            height: 80ox;
            z-index: 10;
        }
        .text_top{
            position: absolute;
            left: 200px;
            top: 10px;
        }
        #top p{
            color: rgb(52, 241, 86);
            position: absolute;
            left: 140px;
            top: 40px;
        }
        .random_top{
            position: absolute;
            left: 580px;
            top: 20px;
        }
        #container{
            position: relative;
        }
        .frame{
            position: absolute;
            left: 100px;
            top: 100px;
            width: 546px;
            height: 629px;
            background-image: url(../images/frame.png);
        }
        .pic_box{
            position:absolute;
            left: 91px;
            top: 84px;
            width: 367px;
            height: 460px;
            overflow: hidden;
        }
        .face{
            position: relative;
            left: 0;
            top: 0;
        }
        .head{
            height: 172px;
        }
        .eyes{
            height: 79px;
        }
        .mouth{
            height: 123px;
            top: -5px;
        }
    </style>
    <script>
        $(function(){
            //번개
            lighting();
            setInterval(function(){
                $('.lighting2').fadeIn(250).fadeOut(250);
            },1000);
            setInterval(function(){
                $('.lighting3').fadeIn(250).fadeOut(250);
            },1000);
 
            //몬스터 얼굴
            var clicks=[0,0,0,0];
            $('.face').click(function(){
                index=$(this).index();
                monsterMove(index,this);
            });
 
            //랜덤 몬스터 버튼
            $('.random_top').click(function(){
                $('.face').each(function(index){
                    clicks[index]=Math.floor(Math.random()*10);
                    monsterMove(index,this);
                });
            });
 
            //몬스터 이미지슬라이드 구현 함수
            function monsterMove(index,obj){
                clicks[index]++;
                if(clicks[index]<10){
                    $(obj).animate({
                        left:-(clicks[index]*367)
                    },500);
                }else{
                    $(obj).animate({
                        left:0
                    },500);
                    clicks[index]=0;
                }
            }
 
            //번개 구현 함수
            function lighting(){
                $('.lighting1').fadeIn(250).fadeOut(250);
                setTimeout(function(){
                    lighting(); 
                    //1초 후 함수 자신 호출 = 재귀호출
                    //코드 반복 실행
                },1000);
            }
        });
    </script>
</head>
<body>
    <img class="lighting lighting1" src="../images/lightning-01.jpg" alt="">
    <img class="lighting lighting2" src="../images/lightning-02.jpg" alt="">
    <img class="lighting lighting3" src="../images/lightning-03.jpg" alt="">
    <header id="top">
        <img class="text_top" src="../images/Monster_Mashup.png" alt="">
        <p>Make your own monster face by clicking the picture</p>
        <img class="random_top" src="../images/monster.png" alt="monster" title="클릭하면 랜덤하게 몬스터를 만듭니다">
    </header>
    <div id="container">
        <div class="frame">
            <div class="pic_box">
                <div class="head face">
                    <img src="../images/headsstrip.jpg" alt="">
                </div>
                <div class="eyes face">
                    <img src="../images/eyesstrip.jpg" alt="">
                </div>
                <div class="nose face">
                    <img src="../images/nosesstrip.jpg" alt="">
                </div>
                <div class="mouth face">
                    <img src="../images/mouthsstrip.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
 cs

 

 

 

 

colorbox 플러그인
  •  
    <link rel="stylesheet" href="css/colorbox.css">
    <script src="js/jquery-3.6.0.min.js"></script> <!--라이브러리-->
    <script src="js/jquery.colorbox.js"></script>
    <script>
        $(function(){  
            $('a.colorbox').colorbox();
        });
    </script>
</head>
<body>
  <h1>칼라박스 플러그인</h1>
  <a class="colorbox" title="Chrysanthemum" href="../images/Chrysanthemum.jpg">Chrysanthemum</a>
  <a class="colorbox" title="Desert" href="../images/Desert.jpg">Desert</a>
  <a class="colorbox" title="Hydrangeas" href="../images/Hydrangeas.jpg">Hydrangeas</a>
  <a class="colorbox" title="Jellyfish" href="../images/Jellyfish.jpg">Jellyfish</a>
  <a class="colorbox" title="Koala" href="../images/Koala.jpg">Koala</a>
  <a class="colorbox" title="Lighthouse" href="../images/Lighthouse.jpg">Lighthouse</a>
  <a class="colorbox" title="Penguins" href="../images/Penguins.jpg">Penguins</a>
  <a class="colorbox" title="Tulips" href="../images/Tulips.jpg">Tulips</a>
</body>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'Programming > 국비학원' 카테고리의 다른 글

220727 - 제이쿼리 - 플러그인 (Masonry, bxslider, cookie)  (0) 2022.07.28
220726 - 제이쿼리 - colorbox 플러그인, ajax(json, xml 데이터 처리)  (0) 2022.07.27
220722 - 제이쿼리 - ui 플러그인  (0) 2022.07.23
220721 - 제이쿼리 - 이미지 슬라이드 구현  (0) 2022.07.22
220720 - 제이쿼리 - 실습 예제, 플러그인 예제  (0) 2022.07.21

'Programming/국비학원' Related Articles

티스토리툴바