임의 이벤트 실행을 하기 위한 방법입니다..
예를 들어 버튼의 클릭 이벤트를 프로그램으로 실행하는 방법..
API Url : http://api.jquery.com/trigger/
Test Url : http://www.uhoon.co.kr/test/1858.html
( 화면 로딩이 완료된 후 첫번째 버튼의 클릭 이벤트를 실행합니다. )
$("button:first").trigger('click');
원본 Url : http://www.xpressengine.com/?mid=download&package_srl=21842038
Test Url : http://www.uhoon.co.kr/test/1183.html
지정된 스크롤 위치 이하로 내려가게 되면
스크롤탑 컨트롤이 나타나서 클릭시 페이지 상단으로 올라갑니다..
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>scrolltop control </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; }
#scrolltotop{position:fixed;bottom:0px;right:0px}#scrolltotop
span{width:48px;height:48px;display:block;background:url("/test/1183/top.png") top no-repeat;margin:0px
15px 10px 0;border-radius:3px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;transition:all 0.2s ease-out}#scrolltotop a:hover
span{background:url("/test/1183/top.png") bottom no-repeat}
</style>
<script type="text/javascript">
<!--
jQuery(function($){
$('#scrolltotop').hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#scrolltotop').fadeIn();
} else {
$('#scrolltotop').fadeOut();
}
});
$('#scrolltotop a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
});
//-->
</script>
</head>
<body>
<div id="scrolltotop" style="display: block;"><a href="#top"><span></span></a></div>
<div style="height:3200px;">a</div>
</body>
</html>
기존에 만들어둔 샘플들 보다 유용하고 간단한것같아서 담아온 글 입니다.
공유해주신 namkyu 님께 감사드립니다.
체크 박스 관련 샘플 (원문 : http://lng1982.tistory.com/80 )
샘플 내용은
체크박스 모두 체크
체크박스 모두 해제
체크되어 있는 값 추출
받아온 데이터 체크하기
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 체크 박스 모두 체크
$("#checkAll").click(function() {
$("input[name=box]:checkbox").each(function() {
$(this).attr("checked", true);
});
});
// 체크 박스 모두 해제
$("#uncheckAll").click(function() {
$("input[name=box]:checkbox").each(function() {
$(this).attr("checked", false);
});
});
// 체크 되어 있는 값 추출
$("#getCheckedAll").click(function() {
$("input[name=box]:checked").each(function() {
var test = $(this).val();
console.log(test);
});
});
// 서버에서 받아온 데이터 체크하기 (콤마로 받아온 경우)
$("#updateChecked").click(function() {
var splitCode = $("#splitCode").val().split(",");
for (var idx in splitCode) {
$("input[name=box][value=" + splitCode[idx] + "]").attr("checked", true);
}
});
// test case
test1();
});
function test1() {
console.log("################################################");
console.log("## test1 START");
console.log("################################################");
var cnt = $("input:checkbox").size();
console.log("checkboxSize=" + cnt);
$("input[name=box]:checkbox").each(function() {
var checkboxValue = $(this).val();
console.log("checkboxValue=" + checkboxValue);
});
console.log("----------------------------------------------");
$("#checkboxArea").children().each(function() {
var checkboxValue = $(this).children(":checkbox").val();
var text = $(this).children().eq(1).text();
console.log(text + "=" + checkboxValue);
});
}
</script>
</head>
<body>
<div id="checkboxArea">
<li><input type="checkbox" name="box" value="A" /><label>1번째 checkbox</label></li>
<li><input type="checkbox" name="box" value="B" /><label>2번째 checkbox</label></li>
<li><input type="checkbox" name="box" value="C" /><label>3번째 checkbox</label></li>
<li><input type="checkbox" name="box" value="D" /><label>4번째 checkbox</label></li>
</div>
<div id="buttonGroups">
<input type="button" id="checkAll" value="check all" />
<input type="button" id="uncheckAll" value="uncheck all" />
<input type="button" id="getCheckedAll" value="get checked all" />
<input type="button" id="updateChecked" value="updateChecked" />
</div>
<input type="hidden" id="splitCode" name="splitCode" value="A,C,D" />
</body>
</html>
site : http://www.gougouzian.fr/
Front & Back -end Developer
Plugin & method Url : http://www.gougouzian.fr/projects/jquery/moodular/
Test Url : http://www.uhoon.co.kr/test/885.html
license : MIT License / GPL - GNU General Public License
이미지 슬라이드 , 회전 , 터치도 지원한다고 합니다.
대형 배너나 이미지슬라이드등에 용이할것같습니다.
easing을 이용해서 다양한 effect를 지원하는 등..옵션이 상당히 많습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>moodular </title>
</head>
<style type="text/css">
/* moodular */
#moodular { overflow: hidden }
#moodular, #moodular li { margin: 0; padding: 0; list-style: none; width: 900px; }
/* examples */
#moodular, #moodular li { height: 400px; }
#moodular li p { display: block; height: 400px; }
#moodular li p span { display: inline-block; padding: 10px 10px; color: #FFF; margin: 10px; }
#nav_wrapper { margin: 0; padding: 0; list-style: none; width: 80px; height: 20px; overflow: hidden }
#nav_wrapper li { text-align: center; }
#nav_wrapper li.active { color: #FFF; }
</style>
<body>
<ul id="moodular">
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo01.jpg);"><span>가나다라</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo02.jpg);"><span>마바사아</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo03.jpg);"><span>자차카</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo04.jpg);"><span>타파하</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo05.jpg);"><span>www.goodkiss.co.kr</span></p></li>
<li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo06.jpg);"><span>www.uhoon.co.kr</span></p></li>
</ul>
<!-- script -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="885/jquery.easing.1.3.js"></script>
<script src="885/moodular.js"></script>
<script>
jQuery(document).ready(function () {
var couleurs = ["rgba(219,56,92, 0.6)" ,
"rgba(104,197,255, 0.6)",
"rgba(151,90,193, 0.6)",
"rgba(193,70,136, 0.6)",
"rgba(168,123,187, 0.6)",
"rgba(41,186,116, 0.6)",
"rgba(148,189,36, 0.6)",
"rgba(240,61,44, 0.6)",
"rgba(56,155,217, 0.6)",
"rgba(32,187,185, 0.6)",
"rgba(32,169,255, 0.6)"];
jQuery('#moodular li p span').each(function() {
jQuery(this).css('background-color', couleurs[Math.floor(Math.random() * couleurs.length)]);
});
jQuery('#moodular').moodular({
/* core parameters */
// effects separated by space
effects: 'mosaic',
// controls separated by space
controls: 'keys',
// if you want some yummy transition
easing: 'easeOutExpo',
// step
step: 1,
// selector is to specify the children of your element (tagName)
selector: 'li',
// if timer is 0 the carrousel isn't automatic, else it's the interval in ms between each step
timer: 5000,
// speed is the time in ms of the transition
speed: 5000,
// queuing animation ?
queue: false,
/* parameters for controls or effects */
// keys control
keyPrev: 37, // left key
keyNext: 39, // right key
// mosaic effects
slices: [10, 4],
mode : 'random'//,
// others
//your_params : 'cause you can create your own effect or control'
});
});
</script>
</body>
</html>
jQuery를 이용한 Attr 속성 변경시 기본 문법에 의하면 아래와 같이 할 수 있겠지만
실행이 되지 않습니다.
( 추후는 모르겠지만 현재 버전에서는.. 1.9.2 )
$("form[name='폼'] input[name='이름']").attr('type','hidden');
그래서 노가다 이긴 하지만 아래와 같이 변경이 가능합니다.
var objName = $("form[name='폼'] input[name='이름']").attr('name');
var objId = $("form[name='폼'] input[name='아이디']").attr('id');
var objValue = $("form[name='폼'] input[name='이름']").attr('value');
var html = ' <input type="text" name="'+objName+'" id="'+objId+'" style="width:70px;" value="'+objValue+'" />';
$("form[name='폼'] input[name='이름']").after(html).remove();
1.9 버전으로 올라가면서부터 없어졌다는데.. 최근 코어 업데이트 후 알게되었습니다.. -_-;;
차선책으로 아래와 같이 사용할수있다고 하는데..
jQuery 파일에 추가해주시거나 해당 js 에 추가해주셔도 됩니다.
jQuery.browser = {};
jQuery.browser.mozilla = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase());
jQuery.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
jQuery.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
jQuery.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
jQuery.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
if($.browser.chrome){alert("크롬입니다.")};
간편하게 적용할 수 있는 줌 관련 기능 플러그인입니다.
Plugin Url : http://www.jacklmoore.com/zoom/
미리보기 : http://www.uhoon.co.kr/test/548.html
줌기능을 아래의 경우에 적용할 수 있습니다.
- 마우스 오버 시
- 클릭시 토글
- 클릭하고 있는 동안
- 클릭한 부분 줌
- 휠 밀고 당기고
샘플코드 다운로드 : 
548.zip
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery Zoom Demo</title>
<style>
/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
background:url(icon.png);
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex2 img:hover { cursor: url("./548/grab.cur"), default; }
#ex2 img:active { cursor: url("./548/grabbed.cur"), default; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src='./548/jquery.zoom.js'></script>
<script src='./548/jquery.Wheelzoom.js'></script>
<script>
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
$('#ex5').wheelzoom();
// $('#ex5').wheelzoom({zoom:0.05});
// $('#ex5').trigger('wheelzoom.reset')
});
</script>
</head>
<body>
<div>
<div class='zoom' id='ex1'>
<img src='548/daisy.jpg' id='jack' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>마우스 올려보세요</p>
</div>
</div>
<div>
<div class='zoom' id='ex2'>
<img src='548/roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>클릭된 동안 땡겨짐</p>
</div>
</div>
<div>
<div class='zoom' id='ex3'>
<img src='548/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>클릭하면 줌 작동 토글</p>
</div>
</div>
<div>
<div class='zoom' id='ex4'>
<img src='548/roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>클릭한 부분 땡겨짐 토글</p>
</div>
</div>
<div>
<div class='zoom' >
<img id='ex5' src='548/daisy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>휠땡기고 밀고</p>
</div>
</div>
</body>
</html>
