12. 이미지 기반의 롤오버
------------------------- image 관련 CSS -------------------------
.link{
display:block;
width:170px;
height:55px;
background-image:url(btn1.bmp);
background-repeat:no-repeat;
background-position:top left;
}
.hover{
display:block;
width:200px;
height:70px;
background-image:url(btn2.bmp);
background-repeat:no-repeat;
background-position:top left;
}
.active{
display:block;
width:170px;
height:55px;
background-image:url(btn3.bmp);
background-repeat:no-repeat;
background-position:top left;
}
img
border:0;
}
-----------------------------------------------------------------------
$('.roll').addClass('link');
$('.roll').hover(
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
);
$('.roll').click(function(event){
$(this).addClass('active');
event.preventDefault();
});
-----------------------------------------------------------------------
<body>
<a href="abc.com"><span class="roll"></span></a>
</body>
1. 스타일 규칙과 jQuery 코드를 사용 // 클래스 이름이 roll, span 엘리먼트에 이미지를 채움
2. btn1. bmp, btn2. bmp, btn3. bmp 의 세 이미지 사용
3. 스타일 시트에 웹페이지 Load시 이미지에 적용할 Link 라는 스타일 규칙 존재 (130 * 35 Pixel 이미지 할당)
4. 마우스 포인터가 버튼위로 움직이면 Hover 스타일 규칙이 적용됨.
5. 링크를 한번 방문했을때 ( 클릭 ) 이미지 지정 >> active : 링크를 이미 방문했음을 보여줌.
6. event.preventDefault() >> 브라우저가 하이퍼링크로 이동하지 않도록 (이동 무시)
13. 이벤트 처리로 텍스트 추가, 제거
<span class="add buttons">ADD</span>
<span class="remove buttons">Remove</span>
<div></div>
-----------------------------------------------------------------------
$('.add').click(function(){
$('div').prepend('<p>Styles make the formatting job much ~~~~~~~ </p>');
});
$('.remove').click(function(){
$('p').remove();
});
-----------------------------------------------------------------------
1. Add 버튼을 누르면 빈 엘리먼트 div 에 엘리먼트 추가 : prepend()
2. 새로 추가된 엘리멘트는 Remove 버튼을 누르면 div 엘리먼트에서 제거됨. : remove()
14. 이벤트로 스타일 적용
-----------------------------------------------------------------------
<body>
<span class="buttons" id="boldbutton">Bold</span>
<span class="buttons" id="italicbutton">Italic</span>
</body>
-----------------------------------------------------------------------
$('.buttons').hover(function(){
function(){
$(this).addClass('hover');
},
function(){
$(this).removeClass('hover');
}
});
>> Hover() 메소드 인라인함수 두개 사용 마우스의 움직임이 들어오고 나갈때 hover CSS 를 적용하고 제거함.
$('#boldbutton').bind('click', function (){
$('#info').removeClass('italicmatter');
$('#info').addClass('boldmatter');
});
$('#italicbutton').bind('click', function (){
$('#info').removeClass('boldmatter');
$('#info').addClass('italicmatter');
});
-----------------------------------------------------------------------
1. span eliment 에 boldbutton과 italicbutton 이라는 아이디 할당 : 버튼 클릭시 스타일적용및 변경
2. jQuery button 클래스 All Eliment 에 Hover () 메소드를 적용
3. bind() 메소드는 JavaScript 이벤트 지정 >> 함수와 연결 : info Eliment 찾아서 'boldmatter', 'italicmatter' 적용하고 제거함
15. 말풍선 표시
.showtip{
display:block;
margin:25px;
}
$('.buttons').hover(
function(event){
$(this).addClass('hover');
var $txt = $(this).text();
$('<span class="showtip">This is ' + $txt + 'menu</span>').appendTo($(this));
},
function(){
$(this).removeClass('hover');
$('.showtip').remove();
}
);
-----------------------------------------------------------------------------------
스타일 시트의 hover 스타일 규칙의 속성
- color : 버튼의 텍스트 색을 지정
- background : 말풍선 이미지를 배경에 표시
- background-repeat : 말풍선 이미지가 한번만 나오도록 no-repeat 로 합니다.
- background-position : 말풍선 이미지가 표시되는 위치
showtip 스타일 규칙 >> display : block >> 텍스트를 처음과 끝에 공백이 있는 블록 엘리먼트로 처리함.
16. '맨 위로' 링크 만들기
$('<a href="#topofpage">Return to top</a>').insertAfter('p');
$('<a id="topofpage" name="topofpage"></a>').prependTo('body');
1. ' Return To Top ' 라는 텍스트를 가진 하이퍼링크를 HTML 의 모든 문단 엘리먼트 뒤에 붙임.
2. 사용자가 링크를 클릭시 id 가 topofpage 인 엘리먼트로 이동.
3. id가 topofpage 인 anchor 엘리먼트가 웹페이지 앞에 생성
17. '더 읽기...' 링크 제공
-----------------------------------------------------------------------------
<div>
Styles make the formatting job much easier and more efficient
</div>
<span class="readmore">Read More...</span>
<div class="message">
TEXT ....
TEXT ....
TEXT ....
TEXT ....
</div>
-----------------------------------------------------------------------------
$('.message').hide();
$('span.readmore').click(function(){
$('.message').show('slow');
$(this).hide();
});
-----------------------------------------------------------------------------
1. 웹페이지 로드시 >> div 엘리먼트 텍스트 표시 클래스 이름이 message 인 div 엘리먼트는 숨겨져 있음.
2. ' Read More... ' 텍스트를 클래스 이름이 readmore 인 span 엘리먼트 안에 표시 > 클릭이벤트 가능
3. show() 와 hide() 메소드를 사용함 >> toggle() 메소드 사용가능.
-----------------------------------------------------------------------------
.show ( speed, callback )
.hide ( speed, callback )
- speed : 애니메이션 효과의 수행시간... 순간적 표시/ 서서히 표시 (밀리초단위 or slow(600밀리초), normal(400밀리초), fast(200밀리초)) , 생략시 default 인 normal이 수행
- callback : 애니메이션 종료시 수행되는 함수.
# Read Less.... (숨기기) : 코드의 약간의 변경으로 사용 가능
$('span.readmore').toggle(function(){
$('.message').show('slow');
$(this).text("Read Less ....");
},
function(){
$('.message').hide('slow');
$(this).text("Read More ....");
});
# 애니메이션 효과 적용
>> 숨겨진 엘리먼트를 애니메이션 효과와 함께 표시 : fadeIn() // 서서히 숨기는 메소드 fadeOut
.fadeIn ( speed, callback )
.fadeOut ( speed, callback )
- speed : 애니메이션 효과의 수행시간... 순간적 표시/ 서서히 표시 (밀리초단위 or slow(600밀리초), normal(400밀리초), fast(200밀리초)) , 생략시 default 인 normal이 수행
- callback : 애니메이션 종료시 수행되는 함수.
$('span.readmore').click(function(){
$('.message').fadeIn('slow');
$(this).hide();
});
18. 텍스트 에니메이션 효과
-----------------------------------------------------------------------------------
<span class="buttons" id="booksbutton">Books</span>
<span class="buttons" id="moviesbutton">Movies</span>
<span class="buttons" id="musicbutton">Music</span><br><br>
<p class="books">
Books on a range of different subjects available at reasonable prices.
Ranging from web...........
</p>
<p class="movies">
Find new movie reviews & the latest Hollywood releases. movie showtimes.
........................!!!
</p>
<p class="music">
Find Music vides. Internet radio. music downloads and alll the latest music news and informatio . We haver a large collection of music and songs classified by type.........!!!
</p>
------------------------------------------------------------------------------------
$('.books').hide();
$('.movies').hide();
$('.music').hide();
$('#booksbutton').click(function(){
$('.books').show('slow');
$('.movies').hide();
$('.music').hide();
});
$('#moviesbutton').click(function(){
$('#musicbutton').click(function(){
...
// Mouse Over
$('#booksbutton').mouseover(function(){
$('#moviesbutton').mouseover(function(){
$('#musicbutton').mouseover(function(){
------------------------------------------------------------------------------------
1. 클래스 선택자 buttons 에 텍스트를 버튼으로 만드는 속성이 포함됨.
2. 버튼에 ID를 booksbutton, moviesbutton, musicbuttons 으로 할당후 이벤트 연결. 예전텍스트 지우고 클릭 버튼의 정보를 표시하는 코드 작성
3. 로드될때 버튼만 표시하고 클릭이벤트를 각각 Eliment 연결, 각 클래스와 연결된 문단 내용이 서서히 보이고, 다른문단은 숨겨지는 애니메이션 효과를 볼수 있음. ( + 마우스 오버 )
19. 슬라이딩 효과로 텍스트 대체
------------------------------------------------------------------------------------
<p id="message1">jQuery is an open source project</p>
<p id="message2">Manipulating DOM using jQuery</p>
------------------------------------------------------------------------------------
$('p#message1').css({'border':'2px solid','text-align':'center','fontweight':'bold'}).hide();
$('p#message2').css({'backgroundColor':'#f00','color':'#fff','text-align':'center','fontweight':'bold'}).click(
function(){
$(this).slideUp('slow');
$('p#message1').slideDown('slow');
}
);
------------------------------------------------------------------------------------
.slideDown ( speed, callback )
.slideUp ( speed, callback )
- speed : 애니메이션 효과의 수행시간... 순간적 표시/ 서서히 표시 (밀리초단위 or slow(600밀리초), normal(400밀리초), fast(200밀리초)) , 생략시 default 인 normal이 수행
- callback : 애니메이션 종료시 수행되는 함수.
20. 이미지 스크롤
1. 왼쪽에서 오른쪽으로 이미지 에니메이션 수행
<img src="cell.jpg" />
CSS >> img{ position : relative; }
$('img').click(function(){
// 이미지를 현재위치에서 브라우저 윈도우 왼쪽에서 600픽셀 떨어진 위치로 옮김.
$(this).animate({left:600}, 'slow');
});
2. 스크롤후 이미지 숨기기
$('img').click(function(){
$('img').animate({left:600}, 'slow');
$('img').slideUp('slow');
});
3. 스클로후 이미지 서서히 사라지게
$('img').click(function(){
$(this).animate({left:600}, 'slow');
$('img').fadeTo('slow', 0);
});
4. 스크롤 동안 이미지 확대
$('img').click(function(){
$(this).animate({ left : 600, width : $(this).width() * 2, height : $(this).height() * 2 }, 'slow');
});
5. 오른쪽으로 스크롤후 다시 왼쪽으로 스크롤
$('img').click(function(){
$('img').animate(
{ left : 600 },
'slow',
function(){
$('img').fadeTo('slow', 0); // 이미지가 서서히 사라지게
$('img').fadeTo('slow', 1); // 이미지가 서서히 나타나게
$('img').animate({left:0}, 'slow');
}
)
})
------------------------------------------------------------------------------------
animate ( properties, speed, easing, callback )
- properties : 엘리먼트가 애니메이션이 끝나고 갖게될 속성
- speed : 미리 정의되어 있는 문자열이나 밀리초를 나타내는 숫자, 애니메이션의 진행시간... 순간적 표시/ 서서히 표시 (밀리초단위 or slow(600밀리초), normal(400밀리초), fast(200밀리초)) , 생략시 default 인 normal이 수행
- easing : 애니메이션이 어떻게 진행될지 제어하는 기능 제공 (선택사항)
- callback : 애니메이션 종료시 수행되는 함수.
------------------------------------------------------------------------------------
fadeTo ( speed, opacity, callback ) : 선택한 엘리먼트의 투명도 조정
- speed : 애니메이션의 진행시간 미리 정의되어 있는 문자열 (밀리초단위 or slow(600밀리초), normal(400밀리초), fast(200밀리초)) , 생략시 default 인 normal이 수행
- opacity : 0 (투명) ~ 1 (불투명) 사이의 숫자, 애니메이션이 끝나는 시점에 선택한 엘리먼트에 불투명도
- callback : 애니메이션 종료시 수행되는 함수.
21. 어느 키 눌렀는지 확인
------------------------------------------------------------------------------------------
$('.infobox').keypress(function(event){
//사용자 누른키의 숫자 코드 표시
$('p').text('Character Typed is : ' + event.keycode);
});
$('.infobox').keypress(function(event){
//사용자 누른키의 숫자코드 >> 문자로 변경
$('p').text('Character Typed is : ' + String.fromCharCode(event.keyCode));
});
keydown() : 사용자가 키를 누르고 있으면 한번만 실행 / Shift, Ctrl 특수키 실행
keypress() : 사용자가 키를 누르고 있으면 계속 실행 / Shift, Ctrl 특수키 실행안됨
.keypress ( handler )
.keypress ( )
$('.button').click(function(){
// 버튼 클릭시 keypress() 이벤트 수동으로 발생
$('.infobox').keypress();
});
$('.infobox').keypress(function(event){
event 객체는 이벤트의 정보를 담고 있음
------------------------------------------------------------------------------------------
.keydown ( handler )
.keydown ( )
$('.button').click(function(){
// 버튼 클릭시 keydown() 이벤트 수동으로 발생
$('.infobox').keydown();
});
------------------------------------------------------------------------------------------
.keyup ( handler ) : 사용자가 눌렀던 키를 놓았을때 실행
.keyup ( )
$('.button').click(function(){
// 버튼 클릭시 keyup() 이벤트 수동으로 발생
$('.infobox').keyup();
});
22. 이벤트 버블링 막기
1. 이벤트 버블링을 이해하기 위해 계층적 구조로 엘리먼트 내에 엘리먼트가 중첩된 HTML 작성.
<div>DIV Element
<p>Manipulating DOM using jQuery<br>
<span class="buttons" id="musicbutton">Music</span>
</p>
</div>
2. 이벤트 버블링 이해를 위한 DOM 세 엘리먼트에 클릭이벤트 연결하는 jQuery 코드 작성
$('div').click(function(event){
alert('You have clicked the div Element!!');
});
$('p').click(function(event){
alert('You have clicked the paragraph Element!!');
});
$('span').click(function(event){
alert('You have clicked the span Element!!');
});
$('div').click(function(event){
var $target = $(event.target);
if($target.is('div')){
alert('You have clicked the div Element!!');
}
if($target.is('p')){
alert('You have clicked the paragraph Element!!');
}
if($target.is('span')){
alert('You have clicked the span Element!!');
}
});
# HTML 파일의 DOM 에서 가장 상위 Element 는 Div Element > P > Span
# 이벤트 처리 메커니즘 :
- 발생한 이벤트에 대한 처리 메소드 연결 여부 확인 > 연결시 메소드 실행
- 부모의 이벤트 처리 메소드 연결 확인 > 연결시 실행
- DOM 트리의 루트 엘리먼트까지 부모 를 확인하고 실행을 반복
- 예제 : Span 클릭시 함수처리 > 부모 전달 P Element 함수처리 > DOM 루트 함수 실행
- 이벤트 버블링 멈추는 코드 : 이벤트 객체에 Target 속성을 이용 이벤트 제어 (IF 문을 통한.)
23. 여러동작 연결 하기
1. 체인연결 기능 : 체인연결 > 하나의 문장에서 여러 동작을 순서대로 수행하게 하는 Wrapper 메소드를 작성하는것
# jQuery( 선택자 ) (별칭 $(선택자)) 는 자바스크립트 객체를 반환하는데 , 이를 Jquery wrapper 또는 wrapped set 이라 부르며 선택자와 일치하는 DOM 엘리먼트 배열을 가지고 있음.
$('div').children().clone().prependTo('div').addClass('hover');
>> div 엘리먼트의 자식을 찾아 복사본을 만든후 >> 문단과 엘리먼트 복사본 div 엘리먼트 앞에 추가됨.
2. 체인연결하기의 사이드 이펙트
가장 최근의 Wrapped Set (선택한 엘리먼트를 가진 자바스크립트 객체) 의 메소드를 호출.
>> 복사기능 >> 원래의 wrapped set이 복사된걸로 변경 >> 복사된것이 추가되고 hover CSS 클래스가 적용됨.
>> 변경되기전의 wrapped set 에 스타일을 적용하기 위해선 end() 메소드를 사용
$('div').children().clone().prependTo('div').end().addClass('hover');
'# JQuery' 카테고리의 다른 글
| 폼 유효성을 확인하는 방법 (0) | 2015.08.29 |
|---|---|
| 이벤트 처리 1 (0) | 2015.08.23 |
| 배열 관련 (0) | 2015.08.20 |
| JQuery....... Start (0) | 2010.11.16 |
