'Javascript 예제'에 해당되는 글 12건
- 2012.11.06 jQuery로 Outer HTML 가져오기 2
- 2012.06.08 jQuery 로 페이지를 벗어날때 확인창 띄우기 1
- 2011.11.24 jQuery 로 원하는 갯수만큼 checkbox 선택하기 1
- 2011.11.18 jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 39
- 2011.11.15 jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 2
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 로 원하는 갯수만큼 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 로 메뉴 접었다~ 펼쳤다~ 구현하기
Javascript 예제 2011. 11. 18. 01:27
고것을 설명하기 위해 접었다 펼쳐졌다 하는 간단한 메뉴를 만들어 보았다. 본인이 디자이너가 아닌 관계로 화면은 쫌 그지같지만 css 만 적용시키면 쓸만한 있어 보이는 메뉴를 바로 맨들 수 있다.
대충 요렇게 하는 것이다 라고 설명을 하는 것이니 디자인 과감히 생략한다.
우선 처음으로 맨들어볼 메뉴는 요렇다.( 클릭하면 접었다 펼쳐졌다 접었다 펼쳐졌다 함 )
-
- 메뉴1-1
- 메뉴1-2
- 메뉴1-3
- 메뉴1-4
- 메뉴1-5
- 메뉴1-6
-
- 메뉴2-1
- 메뉴2-2
- 메뉴2-3
- 메뉴2-4
- 메뉴2-5
- 메뉴2-6
요런 모양을 맨들기 위한 html 마크업은 요렇게~ html 태그에 onclick=""; 어쩌고 하는 지저분한 자바스크립트 하나 안들어간 순결하고 *(-_-)* 깔끔한 마크업이다.
<div> <ul> <li class="menu"> <a><img src="" alt="상위메뉴이미지1"/></a> <ul class="hide"> <li>메뉴1-1</li> <li>메뉴1-2</li> <li>메뉴1-3</li> <li>메뉴1-4</li> <li>메뉴1-5</li> <li>메뉴1-6</li> </ul> </li> <li class="menu"> <a><img src="" alt="상위메뉴이미지2"/></a> <ul class="hide"> <li>메뉴2-1</li> <li>메뉴2-2</li> <li>메뉴2-3</li> <li>메뉴2-4</li> <li>메뉴2-5</li> <li>메뉴2-6</li> </ul> </li> </ul> </div>
스타일은 요정도로만
<style>
.menu a{cursor:pointer;}
.menu .hide{display:none;}
</style>
중요한 jQuery 를 이용한 자바스크립 소스 부분이다. 심플스럽기 서울역에 그지없다. 주석을 빼면 3~4줄 정도밖에 안된다. 아주 짧으면서도 의미가 쏙쏙 들어오는!
<script>
// html dom 이 다 로딩된 후 실행된다.
$(document).ready(function(){
// memu 클래스 바로 하위에 있는 a 태그를 클릭했을때
$(".menu>a").click(function(){
// 현재 클릭한 태그가 a 이기 때문에
// a 옆의 태그중 ul 태그에 hide 클래스 태그를 넣던지 빼던지 한다.
$(this).next("ul").toggleClass("hide");
});
});
</script>
그냥 뿟뿟 나타났다 사라지는게 허접스럽게 느껴진다면 여기서 한단계 더 나아가
클릭했을때 보드랍게 슬라이딩 되면서 나타났다 사라지는 것을 맨들어 보자. 마크업과 스타일은 손댈필요 없이 자바스크립만 요래 살짝 바꿔 주면 된다.
<script>
// html dom 이 다 로딩된 후 실행된다.
$(document).ready(function(){
// menu 클래스 바로 하위에 있는 a 태그를 클릭했을때
$(".menu>a").click(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
});
});
</script>
바꾼결과( 클릭해 보셈 )
-
- 메뉴1-1
- 메뉴1-2
- 메뉴1-3
- 메뉴1-4
- 메뉴1-5
- 메뉴1-6
-
- 메뉴2-1
- 메뉴2-2
- 메뉴2-3
- 메뉴2-4
- 메뉴2-5
- 메뉴2-6
그렇다면 마지막으로 클릭했을때의 기능은 남겨두고 마우스가 오버되면 메뉴가 자동으로 펼쳐지게 맨들어 보자. 자바스크립트를 살짝 요래 수정하면 된다.
<script>
$(document).ready(function(){
$(".menu>a").click(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
}).mouseover(function(){
$(this).next("ul").slideDown();
});
});
</script>
바꾼결과( 마우스를 올려 보셈 )
-
- 메뉴1-1
- 메뉴1-2
- 메뉴1-3
- 메뉴1-4
- 메뉴1-5
- 메뉴1-6
-
- 메뉴2-1
- 메뉴2-2
- 메뉴2-3
- 메뉴2-4
- 메뉴2-5
- 메뉴2-6
진짜 진짜 마지막으로,
맨처음 뜰때 부터 두번째 메뉴가 펼쳐진 상태로 뜨게 하고 싶다면? 간단하게 두번째 서브메뉴 ul 에 지정된 hide 클래스를 지우면 되지만,
자바스크립트적인 방법으로는 요렇게 하면 된다.
<script>
$(document).ready(function(){
$(".menu>a").click(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
}).mouseover(function(){
$(this).next("ul").slideDown();
});
// menu class 중에 두번째 있는 menu 의 하위에 있는 a태그에 클릭 이벤트를 발생시킨다.
$(".menu:eq(1)>a").click();
});
</script>
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
'Javascript 예제' 카테고리의 다른 글
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
|---|---|
| jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
| jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 (2) | 2011.11.15 |
| jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 (33) | 2011.11.11 |
| jQuery로 테이블 tr 동적으로 추가,삭제 하기 (3) | 2011.11.11 |
jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
Javascript 예제 2011. 11. 15. 01:59
맨들어볼 기능은 아래와 같다.
많이들 보는 형태의 테이블이다. 각 row 에 체크박스가 있고 헤더에 있는 체크박스를 선택하면 모든 체크박스들이 싹다 선택되고 하는 고런 기능이다~
대충 뭐 어떤 기능인지는 알고 있을테니 자세한 기능 설명은 생략한다. (직접 클릭해 보기 바람)
| 제목 | 날짜 | |
|---|---|---|
| 제목1 | 날짜1 | |
| 제목2 | 날짜2 | |
| 제목3 | 날짜3 | |
| 제목4 | 날짜4 | |
| 제목5 | 날짜5 | |
| 제목6 | 날짜6 |
소스는 요렇다. 얼핏보면 은근 복잡해 보이기도 한데
그냥 별 생각없이 예제를 만들다 보니 그런것도 있고~ jQuery 의 함수들을 이것저것 복합 다양하게 일부러 쓴 경향도 있다.
이왕이면 여러가지 것들을 써 봄으로써 몰랐던 jQuery 의 쓰임새도 추가적으로 파악할 수 있지 않을까 하는 고런 마음에서 -_-;;
jQuery 함수 이름들이 워낙 이해하기 쉽게 명료하게 되 있어서, 소스를 그냥 눈에 읽히는데로 쭉 읽으면 대충은 이해되지 않을까 한다~
별건 아니면서 허접한 소스지만, 소스를 보고 요 소스가 우째 죠런 기능을 하게 맹글까? 라는 이해를 하게 된다면
jQuery 사용법에 대해서 전 보다는 많이 알고 있는 상태로 변할 것이라고 믿어 의심치 않는다~
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var tbl = $("#checkboxTestTbl");
// 테이블 헤더에 있는 checkbox 클릭시
$(":checkbox:first", tbl).click(function(){
// 클릭한 체크박스가 체크상태인지 체크해제상태인지 판단
if( $(this).is(":checked") ){
$(":checkbox", tbl).attr("checked", "checked");
}
else{
$(":checkbox", tbl).removeAttr("checked");
}
// 모든 체크박스에 change 이벤트 발생시키기
$(":checkbox", tbl).trigger("change");
});
// 헤더에 있는 체크박스외 다른 체크박스 클릭시
$(":checkbox:not(:first)", tbl).click(function(){
var allCnt = $(":checkbox:not(:first)", tbl).length;
var checkedCnt = $(":checkbox:not(:first)", tbl).filter(":checked").length;
// 전체 체크박스 갯수와 현재 체크된 체크박스 갯수를 비교해서 헤더에 있는 체크박스 체크할지 말지 판단
if( allCnt==checkedCnt ){
$(":checkbox:first", tbl).attr("checked", "checked");
}
else{
$(":checkbox:first", tbl).removeAttr("checked");
}
}).change(function(){
if( $(this).is(":checked") ){
// 체크박스의 부모 > 부모 니까 tr 이 되고 tr 에 selected 라는 class 를 추가한다.
$(this).parent().parent().addClass("selected");
}
else{
$(this).parent().parent().removeClass("selected");
}
});
});
</script>
<style>
#checkboxTestTbl {border-collapse: collapse;}
#checkboxTestTbl td, #checkboxTestTbl th{padding:20px;}
#checkboxTestTbl th{background-color: #ccc;}
#checkboxTestTbl tr.selected{background-color: navy;color: #fff; font-weight: bold;}
</style>
</head>
<body>
<table id="checkboxTestTbl" border="1px">
<caption>체크박스 전체선택 테스트</caption>
<colgroup>
<col width="40px;"/>
<col width="200px;"/>
<col width="100px;"/>
</colgroup>
<tr>
<th><input type="checkbox"/></th>
<th>제목</th>
<th>날짜</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>제목1</td>
<td>날짜1</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>제목2</td>
<td>날짜2</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>제목3</td>
<td>날짜3</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>제목4</td>
<td>날짜4</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>제목5</td>
<td>날짜5</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>제목6</td>
<td>날짜6</td>
</tr>
</table>
</body>
</html>
2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
2011/11/12 - [CSS] - table cellspacing, cellpadding 속성을 css 로 처리하기
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/09/02 - [쓸만한지식] - IE9 User-agent 바꾸기~
2011/08/30 - [jQuery Plugin] - jQuery Plugin : Slider
2011/08/08 - [이클립] - Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기
2011/11/12 - [CSS] - table cellspacing, cellpadding 속성을 css 로 처리하기
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/09/02 - [쓸만한지식] - IE9 User-agent 바꾸기~
2011/08/30 - [jQuery Plugin] - jQuery Plugin : Slider
2011/08/08 - [이클립] - Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기
'Javascript 예제' 카테고리의 다른 글
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
|---|---|
| jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
| jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 (39) | 2011.11.18 |
| jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 (33) | 2011.11.11 |
| jQuery로 테이블 tr 동적으로 추가,삭제 하기 (3) | 2011.11.11 |
