'JQuery'에 해당되는 글 19건
- 2012.11.06 jQuery로 Outer HTML 가져오기 2
- 2012.06.08 jQuery 로 페이지를 벗어날때 확인창 띄우기 1
- 2012.05.29 jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) 3
- 2011.11.24 jQuery 로 원하는 갯수만큼 checkbox 선택하기 1
- 2011.11.18 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자) 5
jQuery로 Outer HTML 가져오기
Javascript 예제 2012. 11. 6. 16:56
예를들어 요런 HTML 이 있다 치면
<div id="sample"> <div class="imgholder"> <img src="/sample/img.png" /> </div> <strong>Alone</strong> <div class="meta">by Zsolt Zsigmond</div> </div>
$("#sample").html(); 로는 sample 안쪽의 html 만 가져올수 있다.
<div class="imgholder"> <img src="/sample/img.png" /> </div> <strong>Alone</strong> <div class="meta">by Zsolt Zsigmond</div>
sample 까지 포함한 html을 가져오기 위한 jQuery 함수는 없는것 같다. 찾아보면 있을지도 -_-?
아무튼 sample 까지 포함한 outer HTML 을 가져오기 위해 outerHTML() function 을 추가해 보자
$.fn.outerHTML = function() {
var el = $(this);
if( !el[0] ) return "";
if (el[0].outerHTML) {
return el[0].outerHTML;
} else {
var content = el.wrap('<p/>').parent().html();
el.unwrap();
return content;
}
}
사용법
console.log($("#sample").outerHTML());
// <div id="sample"><div class="imgholder"><img src="/sample/img.png" /></div>
// <strong>Alone</strong><div class="meta">by Zsolt Zsigmond</div></div>
'Javascript 예제' 카테고리의 다른 글
| 네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기 (0) | 2014.04.29 |
|---|---|
| jQuery 로 탭메뉴 보였다 안보였다 맹글기 (3) | 2014.04.10 |
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
| jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
| jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 (39) | 2011.11.18 |
jQuery 로 페이지를 벗어날때 확인창 띄우기
Javascript 예제 2012. 6. 8. 11:10
웹에서 글을 작성하다 뒤로가기, 창닫기, 리프레쉬등등 실수로 페이지를 벗어날때 요런창이 뜨는 사이트가 있다.
IE9에서
크롬에서
jQuery 를 이용해서 죠런 기능을 구현할려면 요렇게 하면 된다.
<script>
var checkUnload = true;
$(window).on("beforeunload", function(){
if(checkUnload) return "이 페이지를 벗어나면 작성된 내용은 저장되지 않습니다.";
});
</script>
단, 글쓰기 버튼을 클릭해서 글을 저장한 후 페이지를 이동할때도 저런 메시지가 뜨기 때문에, 고럴땐 checkUnload 값을 false 로 바꿔준 후 submit 이나 페이지를 이동해야 한다~
$("#saveBtn").on("click", function(){
checkUnload = false;
$("#saveForm").submit();
});
'Javascript 예제' 카테고리의 다른 글
| jQuery 로 탭메뉴 보였다 안보였다 맹글기 (3) | 2014.04.10 |
|---|---|
| jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
| jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
| jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 (39) | 2011.11.18 |
| jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 (2) | 2011.11.15 |
jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow)
jQuery Plugin 2012. 5. 29. 14:10
jQuery로 웹사이트에서 마우스 스크롤을 했을때 봉봉 같이 따라 뎅기는 배너를 맨들려고 했는데 계산하기 귀찮아서
어떤 머리좋은 사람이 분명히 훌러그인을 만들어 놨을것이라 확신하고 구글에게 물어보았다.
검색능력이 시원찮아서 그런가 많이 검색될 줄 알았더만 내가 원하는 훌러그인을 겨우 하나 발견했다.
"jquery.scrollfollow.js" 라는 훌러그인이었다.
사이트 주소 : http://kitchen.net-perspective.com/open-source/scroll-follow/
그런데 요 훌러그인을 옛날에 맨들어서 그런지 최신버전 jQuery 에서는 오류가 나서 정상적으로 작동하지 않았다.
(※ 요 훌러그인은 jQuery 1.2.6 에서 테스트 했다고 함. 참 옛날에 맹근것인가 보다)
꼴랑 요 훌러그인 하나 때문에 jQuery 버전을 후진걸로 바꿀수 없지 아니한가. 다른 훌러그인을 검색해 봐도 잘 검색도 안되고 해서 그냥 최신 버전 jQuery 에서 돌아가도록 소스를 살짝 수정하기로 했다.
현재 jQuery 1.7.1 을 쓰고 있는데 잘 작동한다.
수정버전 다운로드 ↓
jquery.scrollfollow.js◎ 사용법
사용법은 http://kitchen.net-perspective.com/open-source/scroll-follow/ 요기에 나와있는 대로 하면 된다. 단, container 옵션은 잘 안될것 같다.
아래 코드로 테스트한 결과는 <== 요 옆에 꾸리하게 따라뎅기는 배너창이다.
※ 꿈지럭 거릴 div css 속성에서 position 은 absolute 나 relative 로 해야 한다.
※ 내가 이상하게 수정해서 그런지 몰라도 top 속성도 줘야 쪽바로 잘 움직이는듯 하다.
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.scrollfollow.js"></script>
<script>
$(document).ready(function(){
$("#testbanner").scrollFollow({
speed : 800, // 꿈지럭 거리는 속도
offset : 200 // 웹페이지 상단에서 부터의 거리(바꿔보면 뭔지 안다)
});
});
</script>
<style>
#testbanner{
position: absolute;
border: 3px solid #f00;
left : 100px;
top : 30px;
width: 150px;
height: 300px;
}
</style>
</head>
<body>
<div id="testbanner">
봉봉 배너 테스트<br/>
<a href="/">홈으로</a>
</div>
</body>
</html>
기본옵션으로만 쓰고 싶으면 딸랑 요렇게만 해도 된다.
$("#testbanner").scrollFollow();
움직일때 easing 효과를 주고 싶으면 jQuery UI 훌러그인(jquery-ui-x.x.x.custom.min.js)을 뽓 추가시켜 easing 옵션을 주면 된다.
※ easing 옵션으로 가능한 문자열은 http://jqueryui.com/demos/effect/easing.html 요기에 있는 문자열 중에 하나로~
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="jquery.scrollfollow.js"></script>
<script>
$(document).ready(function(){
$("#testbanner").scrollFollow({
easing : "easeInOutBack"
});
});
</script>
그 밖에 다른 옵션은 http://kitchen.net-perspective.com/open-source/scroll-follow/ 요기 참고~
'jQuery Plugin' 카테고리의 다른 글
| Table 자동 rowspan 처리 jQuery plugin (0) | 2017.01.12 |
|---|---|
| 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자) (5) | 2011.11.18 |
| 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-) (0) | 2011.11.07 |
| jQuery datepicker 팝업창 사이즈 바꾸기 (3) | 2011.11.06 |
| jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기 (1) | 2011.11.06 |
jQuery 로 원하는 갯수만큼 checkbox 선택하기
Javascript 예제 2011. 11. 24. 23:32
티켓 예매하는 사이트 같은데서 보면 인원수를 선택하고 그 인원수만큼만 좌석을 선택하는게 있다.
고런걸 한번 jQuery를 이용해서 간략하게나마 맹글어 보겠다.
저쪽 아래의 소스 코드로 맹글어질 것은 아래와 같다. 테스트로 클릭해 보셈~
※ 요것은 IE7~9, 크롬에서 정상적으로 테스트 됬다.
인원수 선택 :
소스코드
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
// html 이 다 로딩된 후 실행
$(document).ready(function() {
// 체크박스들이 변경됬을때
$(":checkbox").change(function() {
var cnt = $("#person").val();
// 셀렉트박스의 값과 체크박스중 체크된 갯수가 같을때, 다른 체크박스들을 disable 처리
if( cnt==$(":checkbox:checked").length ) {
$(":checkbox:not(:checked)").attr("disabled", "disabled");
}
// 체크된 갯수가 다르면 활성화 시킴
else {
$(":checkbox").removeAttr("disabled");
}
});
// 셀렉트박스에서 다른 인원수를 선택하면 초기화 시킴
$("#person").change(function(){
$(":checkbox").removeAttr("checked");
$(":checkbox").removeAttr("disabled");
});
});
</script>
</head>
<body>
<span>인원수 선택 : </span>
<select id="person">
<option value="1">1명</option>
<option value="2">2명</option>
<option value="3">3명</option>
<option value="4">4명</option>
<option value="5">5명</option>
</select>
<table border="1">
<tr>
<td><label><input type="checkbox"/>1</label></td>
<td><label><input type="checkbox"/>2</label></td>
<td><label><input type="checkbox"/>3</label></td>
<td><label><input type="checkbox"/>4</label></td>
<td><label><input type="checkbox"/>5</label></td>
<td><label><input type="checkbox"/>6</label></td>
</tr>
<tr>
<td><label><input type="checkbox"/>7</label></td>
<td><label><input type="checkbox"/>8</label></td>
<td><label><input type="checkbox"/>9</label></td>
<td><label><input type="checkbox"/>10</label></td>
<td><label><input type="checkbox"/>11</label></td>
<td><label><input type="checkbox"/>12</label></td>
</tr>
</table>
</body>
</html>
jQuery 를 하면서 매번 느끼는 거지만 jQuery가 없었다면 우쨋을까 하는 생각이 든다. 저런걸 쌩 자바스크립트로 구현할려면..... 암울하기 짝이없다.
나는 jQuery 빠돌히릿~♥
※ IE9 에서 $(":checked") 를 제대로 못가져오는 버그같은게 있는것 같다. $(":checkbox:checked") 로 하니까 해결이 됬다.
2011/11/18 - [jQuery Plugin] - 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
'Javascript 예제' 카테고리의 다른 글
| jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
|---|---|
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
| jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 (39) | 2011.11.18 |
| jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 (2) | 2011.11.15 |
| jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 (33) | 2011.11.11 |
자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)
jQuery Plugin 2011. 11. 18. 23:26
종종 웹서핑을 하면서 a 를 누르면 욜리~ b를 누르면 죨리~ c를 누르면 요기능 을 해주는 단축키 기능이 있는 사이트들을 보게 된다.
요런 단축키 기능을 쉽게 추가해 주기 위한 jQuery 훌러그인을 맹글어 보았다.
다운로드
설치
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script src="jquery.shortcut-0.1.js" type="text/javascript"></script>
사용법
<script type="text/javascript">
$.shortcut({
65 : function(){
alert("a키 눌렀을때 처리할 기능");
// window.location.href = "/"; // 홈으로 이동
},
66 : function(){
alert("b키 눌렀을때 처리할 기능");
// $("#keyword").focus(); // keyword 인풋박스로 포커스 이동
}
});
</script>
$.shortcut() 에 추가하고 단축키 키코드값 : 키를 눌렀을때 실행할 자바스크립 함수를 쌍으로 해서 ,(콤마) 로 구분해 넣고 싶은 만큼 쪽 넣으면 된다~
키코드값 알아내기. ↓ 아래에 있는 인풋박스에 코드값을 알고 싶은 키를 입력하면 옆에 키코드값이 뽓 나타난다.
키코드 알고 싶어염 :
※ 사람들이 input, textarea 에 뭔가 입력하고 있을때 단축키 기능이 실행되 버리는 것을 막기 위해 input, textarea 에 뭔가를 입력할때는 단축키 기능이 작동하지 않는다.
※ 웹브라우져 단축키 ex) ctrl+a 를 입력했을때 사이트 단축키 기능이 실행되는것을 막기 위해 컨트롤키, 알트키, 쉬프트키를 누른상태에서는 단축키 기능이 작동하지 않는다.
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
'jQuery Plugin' 카테고리의 다른 글
| Table 자동 rowspan 처리 jQuery plugin (0) | 2017.01.12 |
|---|---|
| jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) (3) | 2012.05.29 |
| 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-) (0) | 2011.11.07 |
| jQuery datepicker 팝업창 사이즈 바꾸기 (3) | 2011.11.06 |
| jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기 (1) | 2011.11.06 |
