간혹 js파일 수정한 후에 변경한 내용이 바로 적용되지 않을 때가 있습니다. 이런 경우 아래와 같이 js파일을 로드하는 부분의 js파일 이름뒤에 ?version=### 값을 덧붙여주고 js파일 내용 변경시마다 version 값을 증가시켜주면 변경된 부분이 바로 적용됩니다.

<script type="text/javascript" src="js/addscheduleform.js?version=20121221"></script> 





출처 : 승's Life 블로그 
신고
Posted by 플라스틱라디오
유튜브 동영상을 팝업 형식으로 플레이해주는 JQuery 플러그인 입니다. 아래 링크로 들어가시면 플러그인 다운로드와 자세한 사용법을 확인하실 수 있습니다.








이 플러그인을 이미지나 버튼 등에 사용하면 클릭 시 유튜브의 영상을 아래와 같은 팝업 형태로 플레이 되게 해 줍니다. 





참고 : 웹멘터 블로그





이 밖에도 팝업 형태로 비디오를 플레이 해주는 다양한 플러그인들이 있는데, 10개의 Best jQuery 팝업 플러그인을 소개하고 있는 페이지가 있어 링크를 겁니다. 아래 링크로 들어가서 마음에 드는 플러그인을 한번 찾아보세요.^^


저작자 표시 비영리 변경 금지
신고
Posted by 플라스틱라디오
TAG YouTube

Key Pressed Javascript Key Code Key Pressed Javascript Key Code
backspace 8 tab 9
enter 13 shift 16
ctrl 17 alt 18
pause/break 19 caps lock 20
escape 27 page up 33
page down 34 end 35
home 36 left arrow 37
up arrow 38 right arrow 39
down arrow 40 insert 45
delete 46 0 48
1 49 2 50
3 51 4 52
5 53 6 54
7 55 8 56
9 57 a 65
b 66 c 67
d 68 e 69
f 70 g 71
h 72 i 73
j 74 k 75
l 76 m 77
n 78 o 79
p 80 q 81
r 82 s 83
t 84 u 85
v 86 w 87
x 88 y 89
z 90 left window key 91
right window key 92 select key 93
numpad 0 96 numpad 1 97
numpad 2 98 numpad 3 99
numpad 4 100 numpad 5 101
numpad 6 102 numpad 7 103
numpad 8 104 numpad 9 105
multiply 106 add 107
subtract 109 decimal point 110
divide 111 f1 112
f2 113 f3 114
f4 115 f5 116
f6 117 f7 118
f8 119 f9 120
f10 121 f11 122
f12 123 num lock 144
scrool lock 145 semi-colon 186
equal sign 187 comma 188
dash 189 period 190
forward slash 191 grave accent 192
open bracket 219 back slash 220
close braket 221 single quote 222
저작자 표시
신고
Posted by 플라스틱라디오

js 파일 사용시 한글 깨짐 현상  

 html 문서 내에서 직접 자바스크립트 언어를 사용할 경우에는 문제가 없지만, 자바스크립트 언어를 js 파일로 생성한 후 html 문서에서 연결하여 사용하는 경우에는 js파일 내에서 사용된 한글이 깨져서 표시 될 수 있습니다.

아래의 코드를 보면 alert 메소드를 사용해 한글 경고 메세지를 띄우는 자바스크립트를 수행하는 jquery.test.js 파일을 html에서 연결해 사용하고 있는데, 이를 실행하면 한글이 깨지는 현상이 발생합니다.


html 파일
<script type="text/javascript" src="js/jquery.test.js"></script>

js 파일
alert("한글 깨짐 현상 테스트");





한글 깨짐 현상 해결  

이를 해결하는 방법은 간단합니다. 한글이 깨지는 js 파일을 에디터플러스 같은 편집툴로 열어 새로 저장하기를 누른 다음 Encoding을 Unicode로 설정한 후 다시 저장해 주면 됩니다. 

 


그러면 아래와 같이 깨졌던 한글이 정상적으로 출력 됩니다.

저작자 표시
신고
Posted by 플라스틱라디오
TAG jQeury

반디앤루니스 책소개 페이지로 이동 

  본 포스팅의 내용은 실전 jQuery 쿡북(v1.4.x 증보판)에서 발췌하여 편집한 것임을 미리 밝힙니다. 




jQuery란?  

jQuery는 HTML 문서, 보다 정확하게는 문서 개체 모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈 소스 자바스크립트 라이브러리이다. jQuery는 HTML 문서를 간단히 탐색하고 조작하며, 브라우저 이벤트 처리, DOM 애니메이션, Ajax 상호작용 및 자바스크립트 크로스 브라우저 개발을 쉽게 해준다.


jQuery의 장점은 오픈소스라서 무료로 이용이 가능하고, 용량이 작으며, 웹표준을 직접 처리할 필요가 없고, 플러그인 자료들이 풍부하다는 것이다. 




jQuery의 특징  
 
jQuery의 특징은 크게 세 가지 개념으로 나누어 질 수 있다.
  • CSS 셀렉터를 통해 몇몇 요소를 찾아서 그들로 jQuery 메서드를 사용하여 어떤 작업을 수행
  • 요소의 집합에 대해 여러 jQuery 메서드를 체인으로 연결 
  • jQuery 래퍼와 암시적인 반복을 사용


첫번째 개념은 몇몇 요소(태그)를 찾아서 그들로 어떤 작업을 수행하게 하는 것인데 이는 좀 더 구체적으로 말해 DOM 안에 있는 요소 집합을 찾은 다음 그 요소 집합을 가지고 어떠한 작업을 수행하는 것을 말한다.
 
아래의 코드는 페이지의 <div> 요소를 찾아 숨기거나 텍스트를 나타내는 등의 작업을 수행하는 jQuery 코드이다.

// 페이지의 모든 div를 숨긴다.
jQuery('div').hide();

// 모든 div의 내부 텍스트를 변경한다.
jQuery('div').text('new content');

// div에 updatedContent 클래스를 추가한다.
jQuery('div').addClass("updatedContent");

// 페이지에 모든 div를 나타낸다.
jQuery('div').show();




두번째 개념은 일단 요소를 찾고 나면 그 요소에 대해 체인으로 연결 할 수 있다는 것이다. 명확하게 말해, 체인은 jQuery 함수를 사용하여 현재 선택된 요소에 jQuery 메소드를 끝없이 연결하여 적용할 수 있게 하는 기법이다. 내부적으로 각 메소드들은 항상 jQuery 메소드가 적용되기 전에 선택된 요소를 반환하는데, 그렇기에 체인을 계속 이어갈 수 있는 것이다.

아래의 코드는 첫번째 개념을 설명하는데 쓰였던 코드를 체인을 사용해 단일 코드로 변경한 것이다. 

jQuery('div')
	.hide()
	.text('new content');
	.addClass("updatedContent");
	.show();




세번째 개념은 jQuery에서는 요소들의 래퍼 집합을 선택하여 다루게 된다는 것이다. 다시 말해 jQuery 기능으로 둘러싸인 DOM 요소를 HTML 페이지에서 선택하게 될 것이라는 의미이다. 이러한 래퍼 집합은 하나의 DOM 요소를 포함하기도 하고, 때로는 여러 개를 포함하기도 하며, 심지어 아무런 요소를 포함하지 않는 경우도 있다. 이러한 경우 비어있는 래퍼 집합에 대해 jQuery 메소드를 호출한다면 (에러를 포함한) 어떠한 반응도 하지 않는다. (따라서 null 값을 체크하는 if문을 사용할 필요가 없다.)

아래의 코드의 경우 jQuery는 페이지의 모든 <div> 요소를 찾아내어 래퍼 집합으로 바꾼 후 각각의 DOM 요소들에 대해 연결된 jQuery 메서드를 실행한다. 즉, hide() 메소드가 집합 안에 있는 각각의 <div> 요소에 모두 적용되는 것이다. 곧, 명시적으로 루프를 수행하지 않아도 내부적으로 간결한 루프가 실행되는 것이다.

<body>
	<div>old content</div>
	<div>old content</div>
	<div>old content</div>
	<div>old content</div>

	<script>
		// 페이지의 모든 div를 숨김
		jQuery('div').hide();
	</script>
</body>
저작자 표시
신고
Posted by 플라스틱라디오
TAG jQuery


맨 위로

티스토리 툴바