'프로그래밍/Jquery'에 해당되는 글 28건

 

생활코딩 jQuery 강의의 강의노트입니다(https://opentutorials.org/course/53)

 

 

<html>

<body>

<div class="welcome"></div>

<div class="welcome"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$('.welcome').html('hello world! coding everybody!').css('background-color','yellow');

</script>

</body>

</html>

 

 

 

<html>

<head>

<script type="text/javascript">

function addEvent(target, eventType,eventHandler, useCapture) {

if (target.addEventListener) { // W3C DOM

target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);

} else if (target.attachEvent) { // IE DOM

var r = target.attachEvent("on"+eventType, eventHandler);

}

}

 

 

function clickHandler(event) {

var nav = document.getElementById('navigation');

for(var i = 0; i < nav.childNodes.length; i++) {

var child = nav.childNodes[i];

if(child.nodeType==3)

continue;

child.className = '';

}

event.target.className = 'selected';

}

 

addEvent(window, 'load', function(eventObj) {

var nav = document.getElementById('navigation');

for(var i = 0; i < nav.childNodes.length; i++) {

var child = nav.childNodes[i];

if(child.nodeType==3)

continue;

addEvent(child, 'click', clickHandler);

}

})

</script>

<style type="text/css">

#navigation li {

list-style:none;

float:left;

padding:5px;

}

#navigation {

cursor:pointer;

}

#navigation .selected {

background-color:red;

color:white;

}

</style>

</head>

<body>

<ul id="navigation">

<li>HTML</li>

<li>CSS</li>

<li>javascript</li>

<li class="selected">jQuery</li>

<li>PHP</li>

<li>mysql</li>

</ul>

</body>

</html>

 

jQuery

 

<html>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$('#navigation li').live('click', function() {

$('#navigation li').removeClass('selected');

$(this).addClass('selected');

})

</script>

<style type="text/css">

#navigation li {

list-style:none;

float:left;

padding:5px;

}

#navigation {

cursor:pointer;

}

#navigation .selected {

background-color:red;

color:white;

}

</style>

</head>

<body>

<ul id="navigation">

<li>HTML</li>

<li>CSS</li>

<li>javascript</li>

<li class="selected">jQuery</li>

<li>PHP</li>

<li>mysql</li>

</ul>

</body>

</html>

 

 

 

<script type="text/javascript">

//$ 대신 jQuery 사용

jQuery('body').html('hello world');

</script>

 

<script type="text/javascript">

//$ 함수의 지역변수로 선언해서 외부에 있을지 모르는 라이브러리의 $와의 충돌을 예방

(function($){

$('body').html('hello world');

})(jQuery)

</script>

 

 

 

<html>

<body>

<ul>

<li>test2</li>

</ul>

<ul class="foo">

<li>test</li>

</ul>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

(function($){

$('ul.foo').click( function() {

$('li', this).css('background-color','red');

});

})(jQuery)

</script>

</body>

</html>

 

예제 2. jQuery( element )

 

<html>

<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

jQuery(document.body).css( "background-color", "black" );

</script>

</body>

</html>

 

 

 

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

body{

font-size:12px;

}

.selected,.selected_parent {

background-color: red !important;

color:white;

border:2px solid red !important;

}

input.btn {

width:130px;

}

ul, .live{

float:left;

width:150px;

padding-left:20px;

margin:0;

}

textarea{

float:left;

width: 400px;

height:150px;

font-size:11px;

margin-left:20px;

}

.clear{

clear: both;

}

.sample{

margin-bottom: 20px;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<fieldset>

<legend> 기본 </legend>

<div class="sample">

<ul id="tutorials">

<li class="tutorial" id="HTML"> HTML </li>

<li class="tutorial" id="CSS"> CSS </li>

<li class="tutorial" id="javascript"> javascript </li>

<li class="tutorial" id="jquery"> jQuery </li>

<li class="tutorial" id="PHP"> PHP </li>

<li class="tutorial" id="MYSQL"> MYSQL </li>

</ul>

<textarea>

<ul id="tutorials">

<li class="tutorial" id="HTML"> HTML </li>

<li class="tutorial" id="CSS"> CSS </li>

<li class="tutorial" id="javascript"> javascript </li>

<li class="tutorial" id="jquery"> jQuery </li>

<li jclass="tutorial" id="PHP"> PHP </li>

<li class="tutorial" id="MYSQL"> MYSQL </li>

</ul>

</textarea>

<div class="clear"></div>

</div>

<input class="btn" type="button" id="#jquerybtn" value="#jquery" /> - id 선택자 <br />

<input class="btn" type="button" id=".tutorial" value=".tutorial" /> - class 선택자 <br />

<input class="btn" type="button" value="li" /> - 엘리먼트 선택자 <br />

<input class="btn" type="button" value="#jquery, #MYSQL" /> - 다중 선택자 <br />

</fieldset>

 

 

<fieldset>

<legend> filter </legend>

<div class="sample">

<ul id="list">

<li> HTML </li>

<li> CSS </li>

<li> javascript </li>

<li> PHP </li>

<li> MYSQL </li>

</ul>

<textarea>

<ul id="list">

<li> HTML </li>

<li> CSS </li>

<li> javascript </li>

<li> PHP </li>

<li> MYSQL </li>

</ul>

</textarea>

<div class="clear"></div>

</div>

<input class="btn" type="button" value="#list li:eq(2)" /> - 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="#list li:gt(1)" /> - 인자 보다 인덱스가 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="#list li:lt(2)" /> - 인자 보다 인덱스가 작은 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="#list li:even" /> - 첫번째, 세번째... 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />

<input class="btn" type="button" value="#list li:odd" /> - 두번째, 네번째.... 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />

<input class="btn" type="button" value="#list li:first" /> - 첫번재 인덱스 엘리먼트에 대한 선택자 <br />

<input class="btn" type="button" value="#list li:last" /> - 마지막 인덱스 엘리먼트에 대한 선택자 <br />

</fieldset>

 

 

<fieldset>

<legend> 속성 </legend>

<div class="sample">

<ul id="attribute">

<li target="ABCD">ABCD</li>

<li target="BCDE">BCDE</li>

<li target="CDEF">CDEF</li>

<li target="DEFG">DEFG</li>

<li target="EFGH">EFGH</li>

<li id="FGHI" target="FGHI">FGHI</li>

</ul>

<textarea>

<ul id="attribute">

<li target="ABCD">ABCD</li>

<li target="BCDE">BCDE</li>

<li target="CDEF">CDEF</li>

<li target="DEFG">DEFG</li>

<li target="EFGH">EFGH</li>

<li id="FGHI" target="FGHI">FGHI</li>

</ul>

</textarea>

<div class="clear"></div>

</div>

<input class="btn" type="button" value="[target*=&quot;BC&quot;]" /> - 속성의 값에 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target=&quot;DEFG&quot;]" /> - 속성의 값과 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target!=&quot;DEFG&quot;]" /> - 속성의 값과 주어진 문자열이 일치하지 않는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target^=&quot;B&quot;]" /> - 속성의 값으로 주어진 문자열이 처음 등장하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target$=&quot;H&quot;]" /> - 속성의 값으로 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target]" /> - 속성이 존재하는 엘리먼트를 찾아내는 선택자 <br />

<input class="btn" type="button" value="[target][id]" /> - 속성들이 존재하는 엘리먼트를 찾아내는 선택자

</fieldset>

<fieldset>

<legend>Form</legend>

<div class="live">

<div>

<input type="text" disabled="disabled" value="disabled" />

<input type="text" value="enabled"/>

</div>

<div><input type="checkbox" checked="checked" /></div>

<div><input type="checkbox" /></div>

</div>

<textarea class="sample">

<div>

<input type="text" disabled="disabled" value="disabled" />

<input type="text" value="enabled"/>

</div>

<div><input type="checkbox" checked="checked" /></div>

<div><input type="checkbox" /></div>

</textarea>

<div class="clear"></div>

<input class="btn" type="button" value="[type=&quot;text&quot;]" /> - 엘리먼트를 선택할 때는 속성 셀렉터를 사용한다. <br />

<input class="btn" type="button" value="[type=&quot;text&quot;]:disabled" /> - disabled 속성의 값이 disabled 엘리먼트를 찾아내는 선택자<br />

<input class="btn" type="button" value="[type=&quot;text&quot;]:enabled" /> - disabled 속성의 값이 enabled 엘리먼트를 찾아내는 선택자<br />

<input class="btn" type="button" value="input:checked" /> - 체크박스 체크가 엘리먼트를 찾아내는 선택자 <br />

</fieldset>

<script>

$('input').live('click', function() {

$this = $(this);

$('*').removeClass('selected');

switch($this.attr('value')) {

case '#jquery':

$('#jquery').addClass('selected');

break;

case '.tutorial':

$('.tutorial').addClass('selected');

break;

case 'li':

$('li').addClass('selected');

break;

case '#jquery, #MYSQL':

$('#jquery, #MYSQL').addClass('selected');

break;

case '#list li:eq(2)':

$('#list li:eq(2)').addClass('selected');

break;

case '#list li:gt(1)':

$('#list li:gt(1)').addClass('selected');

break;

case '#list li:lt(2)':

$('#list li:lt(2)').addClass('selected');

break;

case '#list li:even':

$('#list li:even').addClass('selected');

break;

case '#list li:odd':

$('#list li:odd').addClass('selected');

break;

case '#list li:first':

$('#list li:first').addClass('selected');

break;

case '#list li:last':

$('#list li:last').addClass('selected');

break;

case '[target*="BC"]':

$('li[target*="BC"]').addClass('selected');

break;

case '[target="DEFG"]':

$('li[target="DEFG"]').addClass('selected');

break;

case '[target!="DEFG"]':

$('li[target!="DEFG"]').addClass('selected');

break;

case '[target^="B"]':

$('li[target^="B"]').addClass('selected');

break;

case '[target$="H"]':

$('li[target$="H"]').addClass('selected');

break;

case '[target]':

$('li[target]').addClass('selected');

break;

case '[target][id]':

$('li[target][id]').addClass('selected');

break;

case '[type="text"]':

$('[type="text"]').addClass('selected');

break;

case '[type="text"]:disabled':

$('[type="text"]:disabled').addClass('selected');

break;

case '[type="text"]:enabled':

$('[type="text"]:enabled').addClass('selected');

break;

case 'input:checked':

$('input:checked').parent().addClass('selected');;

break;

 

}

})

</script>

</body>

</html>

 

 

 

<html>

<body>

<a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');

</script>

</body>

</html>

 

 

예제2. javascript DOM 이용해서 코딩하는 경우

 

<html>

<body>

<a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

<script type="text/javascript">

var tutorial = document.getElementById('tutorial');

tutorial.setAttribute('href', 'http://jquery.org');

tutorial.setAttribute('target', '_blank');

tutorial.style.color = 'red';

</script>

</body>

</html>

 

 

 

<html>

<body>

<ul class="first">

<li class="foo"> list item 1 </li>

<li> list item 2 </li>

<li class="bar"> list item 3 </li>

</ul>

<ul class="second">

<li class="foo"> list item 1 </li>

<li> list item 2 </li>

<li class="bar"> list item 3 </li>

</ul>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');</script>

</body>

</html>

 

 

 

<html>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

function clickHandler(e){

alert('thank you');

}

$(document).bind('ready', function(){

$('#click_me').bind('click', clickHandler);

$('#remove_event').bind('click', function(e){

$('#click_me').unbind('click', clickHandler);

});

$('#trigger_event').bind('click', function(e){

$('#click_me').trigger('click');

});

})

</script>

</head>

<body>

<input id="click_me" type="button" value="click me" />

<input id="remove_event" type="button" value="unbind" />

<input id="trigger_event" type="button" value="trigger" />

</body>

</html>

 

 

예제2. 이벤트 헬퍼

 

<html>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

function clickHandler(e){

alert('thank you');

}

$(document).ready(function(){

$('#click_me').click(clickHandler);

$('#remove_event').click(function(e){

$('#click_me').unbind('click', clickHandler);

});

$('#trigger_event').click(function(e){

$('#click_me').trigger('click');

});

})

</script>

</head>

<body>

<input id="click_me" type="button" value="click me" />

<input id="remove_event" type="button" value="unbind" />

<input id="trigger_event" type="button" value="trigger" />

</body>

</html>

 

 

예제3. live 이용하면 존재하지 않는 엘리먼트에 대해서 이벤트를 설치할 있다.

 

<html>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

function clickHandler(e) {

alert('thank you');

}

$('#click_me').live('click', clickHandler);

$('#remove_event').live('click', function(e) {

$('#click_me').die('click', clickHandler);

});

$('#trigger_event').live('click', function(e) {

$('#click_me').trigger('click');

});

</script>

</head>

<body>

<input id="click_me" type="button" value="click me" />

<input id="remove_event" type="button" value="unbind" />

<input id="trigger_event" type="button" value="trigger" />

</body>

</html>

 

 

 

<!-- http://api.jquery.com/append/ -->

<!DOCTYPE html>

<html>

<head>

<style>

p {

background:yellow;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

I would like to say:

</p>

<script>$("p").append("<strong>Hello</strong>");</script>

</body>

</html>

 

 

<!-- http://api.jquery.com/after/ -->

<!DOCTYPE html>

<html>

<head>

<style>

p {

background:yellow;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

I would like to say:

</p>

<script>$("p").after("<b>Hello</b>");</script>

</body>

</html>

 

 

 

<!-- http://api.jquery.com/wrap/ -->

<!DOCTYPE html>

<html>

<head>

<style>

div {

border:2px blue solid;

margin:2px;

padding:2px;

}

p {

background:yellow;

margin:2px;

padding:2px;

}

strong {

color:red;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<span>Span Text</span>

<strong>What about me?</strong>

<span>Another One</span>

<script>$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");</script>

</body>

</html>

 

 

 

<!-- http://api.jquery.com/remove/ -->

<!DOCTYPE html>

<html>

<head>

<style>

p {

background:yellow;

margin:6px 0;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

Hello

</p>

how are

<p>

you?

</p>

<button>

Call remove() on paragraphs

</button>

<script>

$("button").click( function () {

$("p").remove();

});

</script>

</body>

</html>

 

 

<!-- http://api.jquery.com/replaceAll/ -->

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p> Hello </p>

<p> cruel </p>

<p> World </p>

<script>$("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples </script>

</body>

</html>

 

 

<!-- http://api.jquery.com/toggleClass/ -->

<!DOCTYPE html>

<html>

<head>

<style>p {

margin: 4px;

font-size:16px;

font-weight:bolder;

cursor:pointer;

}

.blue {

color:blue;

}

.highlight {

background:yellow;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p class="blue"> Click to toggle </p>

<p class="blue highlight"> highlight </p>

<p class="blue"> on these </p>

<p class="blue"> paragraphs </p>

<script>

$("p").click( function () {

$(this).toggleClass("highlight");

});

</script>

</body>

</html>

 

 

 

 

<!DOCTYPE html>

<html>

<head>

<style>p {

color:blue;

margin:8px;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<input type="text" value="some text"/>

<p>

</p>

<script>$("input").keyup( function () {

var value = $(this).val();

$("p").text(value);

}).keyup();</script>

</body>

</html>

 

 

 

<!DOCTYPE html>

<html>

<head>

<style>

span {

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

<input type="text" />

<span></span>

</p>

<script>

$("input").focus( function () {

$(this).next("span").html('focus');

}).blur( function() {

$(this).next("span").html('blur');

}).change(function(e){

alert('change!! '+$(e.target).val());

}).select(function(){

$(this).next('span').html('select');

});

</script>

</body>

</html>

 

예제2. (.submit(), .val())

 

<!DOCTYPE html>

<html>

<head>

<style>

p {

margin:0;

color:blue;

}

div, p {

margin-left:10px;

}

span {

color:red;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>

Type 'correct' to validate.

</p>

<form action="javascript:alert('success!');">

<div>

<input type="text" />

 

<input type="submit" />

</div>

</form>

<span></span>

<script>

$("form").submit( function() {

if ($("input:first").val() == "correct") {

$("span").text("Validated...").show();

return true;

}

$("span").text("Not valid!").show().fadeOut(1000);

return false;

});

</script>

</body>

</html>

 

탐색

 

<!-- http://opentutorials.org/example/jquery/example.traversing.html -->

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>

body{

font-size:11px;

width:1000px;

}

#panel div,#panel li,#panel ul{

border:2px solid black;

margin:10px;

padding:10px;

}

#panel ul{

list-style: none;

}

#panel .s{

border:2px solid red;

background-color: #808080;

}

#panel #root{

margin-top:0;

}

textarea{

width:982px;

height:100px;

font-size:11px;

overflow: visible;

}

#help{

float:left;

width:500px;

height:450px;

overflow-y: scroll;

overflow-x: hidden

}

#panel{

float:left;

width:500px;

}

#help table{

border:1px solid gray;

border-collapse: collapse;

width:100%;

}

#help table td{

border:1px solid gray;

padding:5px;

}

#help .title{

color:white;

background-color:#555;

padding:3px;

}

#help .title.checked{

background-color:red;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<div id="wrapper">

<p>

javascript 입력 후에 엔터를 눌러주세요.

<textarea id="code"></textarea></p>

<div id="help">

<table>

<tr id="add"><td><div class="title">.add(selector)</div>엘리먼트를 추가한다</td></tr>

<tr id="andSelf"><td><div class="title">.andSelf()</div>현재 엘리먼트 셋에 이전 엘리먼트 셋을 한다</td></tr>

<tr id="children"><td><div class="title">.children([selector])</div>자식 엘리먼트를 선택한다</td></tr>

<tr id="closet"><td><div class="title">.closest(selector)</div>가장 가까운 selector 조상 엘리먼트를 탐색한다</td></tr>

<tr id="each"><td><div class="title">.each(function(index,Element))</div>현재 엘리먼트 셋에 반복 작업을 실행한다</td></tr>

<tr id="end"><td><div class="title">.end()</div>이전 체인 컨텍스트로 돌아간다.</td></tr>

<tr id="eq"><td><div class="title">.eq(index)</div>현재 엘리먼트 셋에서 index 해당하는 엘리먼트를 선택한다</td></tr>

<tr id="filter"><td><div class="title">.filter(selector)</div>현재 엘리먼트 셋에서 selector 해당하는 엘리먼트를 선택한다</td></tr>

<tr id="find"><td><div class="title">.find(selector)</div>현재 엘리먼트 셋에서 selector 해당하는 자손 엘리먼트를 선택한다</td></tr>

<tr id="first"><td><div class="title">.first()</div>현재 엘리먼트 첫번째 엘리먼트를 선택한다</td></tr>

<tr id="last"><td><div class="title">.last()</div>현재 엘리먼트 마지막 엘리먼트를 선택한다</td></tr>

<tr id="next"><td><div class="title">.next()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트를 선택한다</td></tr>

<tr id="nextAll"><td><div class="title">.nextAll()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트 전부를 선택한다</td></tr>

<tr id="prev"><td><div class="title">.prev()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트를 선택한다</td></tr>

<tr id="prevAll"><td><div class="title">.prevAll()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트 전부를 선택한다</td></tr>

<tr id="siblings"><td><div class="title">.siblings()</div>각각의 엘리먼트에 대한 형재 엘리먼트 전부를 선택한다</td></tr>

<tr id="slice"><td><div class="title">.slice(start, [end])</div>현제의 엘리먼트 start에서 end까지의 엘리먼트를 선택한다</td></tr>

</table>

</div>

<div id="panel">

<div id="root">

div#root

<div>

div

</div>

<div>

div

<ul>

ul

<li>li</li>

<li>li</li>

<li>li</li>

<li>li</li>

</ul>

</div>

<div>

div

</div>

</div>

</div>

</div>

<script>

var $wrapper = $('#root').addClass('selected');

$('#code').keydown(function(e){

if(e.keyCode == 13){

eval($(this).val());

return false;

}

}).change(function(){

eval($(this).val());

});

$('tr').click(function(){

$(this).find('.title').toggleClass('checked');

})

</script>

</body>

</html>

 

 

에니메이션

 

 

<!DOCTYPE html>

<html>

<head>

<style> span {

color:red;

cursor:pointer;

}

div {

margin:3px;

width:80px;

height:80px;

}

div {

background:#f00;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<input type="button" id="fadeout" value="fade out" />

<input type="button" id="fadein" value="fade in" />

<input type="button" id="hide" value="hide" />

<input type="button" id="show" value="show" />

<input type="button" id="slidedown" value="slide down" />

<input type="button" id="slideup" value="slide up" />

<input type="button" id="mix" value="mix" />

<div id="target">

target

</div>

<script>$('input[type="button"]').click( function(e) {

var $this = $(e.target);

switch($this.attr('id')) {

case 'fadeout':

$('#target').fadeOut('slow');

break;

case 'fadein':

$('#target').fadeIn('slow');

break;

case 'hide':

$('#target').hide();

break;

case 'show':

$('#target').show();

break;

case 'slidedown':

$('#target').hide().slideDown('slow');

break;

case 'slideup':

$('#target').slideUp('slow');

break;

case 'mix':

$('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});

break;

}

})

</script>

</body>

</html>

 

 

예제2.

 

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color:#bca;

width:100px;

border:1px solid green;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<button id="go">

&raquo; Run

</button>

 

<div id="block">

Hello!

</div>

<script>/* Using multiple unit types within one animation. */

 

$("#go").click( function() {

$("#block").animate({

width: "300px",

opacity: 0.4,

marginLeft: "50px",

fontSize: "30px",

borderWidth: "10px"

}, 3000);

});</script>

</body>

</html>

 

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<div id="result"></div>

<input type="text" id="msg" />

<input type="button" value="get result" id="getResult" />

<script>

$('#getResult').click( function() {

$('#result').html('');

$.ajax({

url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',

dataType:'json',

type:'POST',

data:{'msg':$('#msg').val()},

success:function(result){

if(result['result']==true){

$('#result').html(result['msg']);

}

}

});

})

</script>

</body>

</html>

예제 1-2. 서버 로직

 

<?

echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));

?>

 

 

 

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag JQuery

질문

"http://jquerymobile.com/demos/1.2.1/docs/buttons/buttons-icons.html"처럼 data-icon을 시도해보려고 했는데 안되요.

제 코드는 다음과 같구요. 


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
   <link href="Content/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />
   <a data-role="button" href="#page1" data-icon="arrow-u" data-iconpos="left">
        Button
    </a>
</body>
</html>

헬프좀요 ㅠㅠ


답변

맨앞에 아래와 같이 다셔야됩니다.

<head>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

그리고 jQuery Mobile 코드는 다음과 같이 해야되요


<div data-role='page'>
 <a href='#' data-role='button' data-icon='arrow-u' data-iconpos='left'>Button</a>
</div>

출처 : http://stackoverflow.com/questions/16940980/data-icons-not-displaying

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

.addClass( className )Returns: jQuery

  • .addClass( className )
  • className 특정 조건에 추가할 하나 이상의 클래스 명
  • .addClass( function(index, class) )
  • function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다. Receives the index position of the element in the set and the old class value as arguments.(누가 해석 좀 해주세요.~~ ^^;;)

가장 중요한 것은 이 함수가 클래스를 대체하는 함수가 아니라는 것입니다. 단순히 클래스를 추가하는 기능만 가지고 있습니다.

하나 이상의 클래스를 추가하려면 띄어쓰기를 사용하면 됩니다. 아래 예시를 보시죠.

$('p').addClass('myClass yourClass');

이 함수는 .removeClass()와 자주 같이 사용됩니다. 만약 클래스의 바꿔치기를 원하시면 이 두가지 함수를 아래와 같이 사용하시면 됩니다.

$('p').removeClass('myClass noClass').addClass('yourClass');

설명드리자면 myClass 와 noClass를 없앤 후에 yourClass 를 추가하는 구문이 되겠습니다.

jQuery 1.4 버젼 이후로 .addClass 는 클래스명을 반환해 주는 내부함수를 사용할 수 있게 되었습니다.

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

만일 5개의 li 가 존재한다면 이 함수는 "item-4"라는 클래스명을 반환해 주게 됩니다.

예 제  
선택자와 일치하는 요소에 "selected"라는 클래스를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>$("p:last").addClass("selected");</script>

</body>
</html>

미리보기

마지막 p 태그에 "selected" 클래스가 추가되어 텍스트의 색이 변한 걸 볼 수 있습니다.

 

예 제  
선택자와 일치하는 요소에 "selected highlight"라는 2개의 클래스를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>$("p:last").addClass("selected highlight");</script>

</body>
</html>

미리보기

마지막 p 태그에 "selected" 와 "highlight" 클래스 2가지가 추가되어 텍스트 색과 바탕색의 색이 변한 걸 볼 수 있습니다.

 

예 제  
함수를 사용하여 텍스트를 바꾸고 클래스를 추가 업데이트 합니다.(그런데, 소스에 에러가 있다고 나오네요.)

<!DOCTYPE html>
<html>
<head>
  <style>
    div { background: white }
    .red { background: red }
    .red.green { background: green }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the 'active' class. It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>

<script>
$('div').addClass(function(i,clas){
if(i===1) {
$('p').text('There is one green div');
clas = 'green';
}
return clas;
}); //블루블루님이 댓글로 해결해 주셨습니다. ^^
$('div').addClass(function(i,class) {
    if ( i === 1 ) {
       $('p').text('There is one green div');
        class += ' green';
    }
    
    return class;
});
</script>

</body>
</html>

미리보기

소스의 의도는 아마 2번째 div 의 바탕색이 녹색으로 되고, p 태그안의 텍스트를 변경하려는 것 같습니다. 그러나 에러 때문에 작동하지 않더군요. 해결해 주실 분 있나요?

업데이트
블루블루님께서 위 에러를 잡아주셨습니다. 소스에 남겨두었습니다. 참고하셔요. 블루블루님 감사합니다.

아~ 등호 3개 (===)가 구문 중에 있습니다. 이 연산자의 이름은 동치라고 하구요. 변수의 타입과 값이 모두 일치할 경우에만 True 입니다.

 

addClass 왠지 많이 사용할 것 같지 않으신가요?

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

 

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

.html()

원문 링크 > http://api.jquery.com/html/

함수들

- html()

  • .html()

- html( htmlString )

  • .html( htmlString )
  • .html( funtion(index, oldhtml) )

.html()Returns : String

개요 : 일치하는 요소 내부의 html을 문자열로 반환한다.

  • .html()

html() 함수는 XML 문서에는 사용할 수 없습니다.

HTML 문서에서 어떤 요소의 내부 내용을 알아내고자 할때 html() 함수를 사용할 수 있습니다. 만일 선택자에 의해 선택된 요소가 복수개일 경우 제일 처음 요소의 값만 취합니다. 아래 예제를 보도록 하죠.

$('div.demo-container').html();

이 구문은 div 태그들중 demo-container 라는 클래스명을 가지고 있는 첫번째 요소를 선택하여 그 안의 내용을 가져오게 됩니다. 만약 아래와 같이 html 구조가 되어있다면

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

결과는 아래와 같이 됩니다.

<div class="demo-box">Demonstration Box</div>

이 메소드는 브라우져의 innerHTML 속성을 이용한 것입니다. 때로는 원본 문서의 html이 정확하게 복제되지 않기도 합니다. 예를 들어, Internet Explorer 는 속성값에 숫자형 문자가포함되어 있을때 주위에 따옴표를 붙이기도 합니다.(라고 하는데요 정확한 번역이 아닐수도 있습니다. 직접해봐야 겠지만 말이죠.)

예 제  
클릭하면 html 소스를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin:8px; font-size:20px; color:blue; 
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>

    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>

    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>
<script>
    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });
</script>

</body>
</html>

미리보기

클릭해보세요. 그 화면을 구성하고 있는 html을 보실 수 있습니다. 계속 클릭해도 뭔가를 계속 바꿔줍니다.

 

.html( htmlString )Returns : jQuery

개요 : 일치하는 요소 내부에 새로운 html 문자열을 추가한다.

  • .html( htmlString )
  • htmlString 새로 추가될 html 소스
  • .html( function(index, oldhtml) )
  • function(index, oldhtml) 이 함수는 새로 추가될 html을 반환합니다. 기존의 html을 인자로 받아서 index에 해당하는 위치에

html() 함수는 XML 문서에는 사용할 수 없습니다.

.html() 함수를 내용을 추가하는 용도로 사용하면 그 요소안의 내용은 새로운 요소로 완전히 바뀌게 됩니다. 아래 예제를 보시죠.

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

<div class="demo-container"> 요소 안의 내용을 바꾸기 위해서는 아래와 같이 하면 됩니다.

$('div.demo-container')
  .html('<p>All new content. <em>You bet!</em></p>');

jQuery 1.4 버젼에 와서 .html() 함수는 HTML 내용을 바꾸기 위해서 함수를 사용할 수 있게 되었습니다.

$('div.demo-container').html(function() {
  var emph = '<em>' + $('p').length + ' paragraphs!</em>';
  return '<p>All new content for ' + emph + '</p>';
});

만약 문서상에 p 태그가 6개가 있다면 위 예제는 <div class="demo-container"> 요소 안에 <p>All new content for <em>6 paragraphs!</em></p> 라는 새로운 html 을 추가하게 됩니다.

이 함수는 브라우져의 기본 함수인 innerHTML을 이용한 것입니다. 그런데 어떤 브라우져에서는 이 함수가 정확하게 적용되지 않기도 합니다. 예를 들어 IE8 이전의 브라우져에서는 href 속성의 URL을 완벽히 지원하는 데 반해 IE9 이전 버젼의 브라우져(IE8이라고 표현안했네요.)에서는 호환 레이어(compatibility layer)가 추가되지 않은 HTML5 다루는 것이 항상 정확하지는 않습니다.(음.. IE8이전은 잘 작동하는데 IE8버젼은 HTML5가 정확히 지원이 되지 않아 원하는데로 작동이 잘 안될 수도 있다는 얘기인 것 같습니다. 신빙성 없으니 원본을 보시는 편이 더 좋으실 듯 합니다. ^^;;;)

예 제  
div 태그안에 html 소스를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>

  .red { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <span>Hello</span>
  <div></div>
  <div></div>
  <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>

</body>
</html>

미리보기

Hello Again 이라는 빨간 텍스트가 추가되었습니다.

 

예 제  
html()함수로 html을 추가한 뒤, append() 함수를 사용해 느낌표를 더 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; font-size:18px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
<script>

    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");

</script>

</body>
</html>

미리보기

html() 함수에는 원래 느낌표가 하나인데 append() 함수를 사용해서 빨간색 느낌표를 추가된 것을 보실수 있습니다.

 

innerHTML 과 대동소이한 함수입니다. innerHTML 을 사용하셔도 좋고 html() 함수를 사용하셔도 크게 다를 건 없겠네요. 단 jQuery 객체에서는 innerHTML 사용이 되지 않으니 사용하기 위해 일반 자바스크립트 변수를 사용해야 하는 부분은 있어 보입니다. 걍~ html() 함수 쓰시라는 얘기와 별반 다를게 없네요. 하하하;;;

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.


출처 : http://findfun.tistory.com/159

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

자바스크립트 코드에서 이벤트 핸들러처리가 끝난 후 preventDefault() 와 return false 등의 코드를 본적이 있을 것이다. 간혹 stopPropagation() 호출도 보이는데 이들의 차이점을 알아보자



1) preventDefault vs return false, stopPropagation : jQuery를 사용하지 않은 경우

- stopPropagation 은 사용자 정의 이벤트의 bubbling up 되는 것을 막아준다

+ 사용자 정의 이벤트는 개발자가 직접 이벤트 핸들러를 작성할 경우

+ 즉, 사용자가 작성한 이벤트 핸들러의 동작을 막아준다

- preventDefault 는 기본 정의 이벤트의 동작을 막아준다

+ <a href..> 앵커 태그와 같은 기본 제공 이벤트 (사이트로 이동하는 것)

+ 즉, 기본 이벤트의 동작을 막아준다

- return false 는 jQuery 사용할 때와 안할 때의 반응이 틀리다

+ jQuery 사용안할 때는 preventDefault와 동일하게 동작한다

 

- 주석 a, b, c 케이스 테스트 : 화면의 "[Click me]" 레이블을 클릭할 경우

 

<html>

<body>

<a href="http://mobicon.tistory.com">

<div id="div1">

<input type="label" id="label1" value="[Click me]"/>

</div>

</a>


<script>

document.getElementById('div1').onclick = function() {

alert('click div1');

};

document.getElementById('label1').onclick = function(e) {

alert('click label1');

// a

//e.stopPropagation();

// b

//e.preventDefault();

// c

//return false;

};

</script>

</body>

</html>

 


+ e.stopPropagation() 만 주석 제거

"click label1" 경고창 뜨고 "mobicon.tistory.com" 사이트로 이동 ("click div1" 경고창 안뜸. 즉, 버블링 업 막아줌)

+ e.preventDefault() 만 주석 제거

"click label1" 경고창 뜨고 "click div1" 경고창 뜸 그러나 "mobicon.tistory.com"으로 이동하지 않음 (즉, 기본 이벤트 막아줌)

+ return false 만 주석 제거

"click label1" 경고창 뜨고 "click div1" 경고창 뜸 그러나 "mobicon.tistory.com"으로 이동하지 않음 (즉, 기본 이벤트 막아줌)


- jQuery를 사용하지 않은 e.preventDefault와 return false 의 동작은 동일하다



2) preventDefault vs return false, stopPropagation : jQuery를 사용할 경우

- stopPropagation 상동

- preventDefault 상동

- return false 는 jQuery 사용할 때와 안할 때의 반응이 틀리다

+ jQuery 사용할 때는 preventDefault와 동일하게 동작한다

<html>

<body>

<a href="http://mobicon.tistory.com">

<div id="div1">

<input type="label" id="label1" value="[Click me]"/>

</div>

</a>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

$('#div1').click( function() {

alert('click div1');

} );

$('#label1').click( function(e) {

alert('click label1');

//e.stopPropagation();

//e.preventDefault();

//return false;

} );

</script>

</body>

</html>

 

+ e.stopPropagation() 만 주석 제거

상동

+ e.preventDefault() 만 주석 제거

상동

+ return false 만 주석 제거

"click label1" 경고창 뜨고 "click div1" 경고창은 안 뜸 그리고 "mobicon.tistory.com"으로 이동하지 않음


- 결론적으로 jQuery를 사용하여 return false를 쓸 경우 stopPropgation() 와 preventDefault() 가 동시에 적용됨

 



<참조>

- stopPropagation()과 preventDefault() 차이

- preventDefault() vs return false 차이

- 자바스크립트 이벤트 핸들링

 

출처 : http://mobicon.tistory.com/246

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Chrome Hack: AJAX Cross-domain Hack
Windows: 단축아이콘에 대상에 --disable-web-security 추가

OSX:open -b com.google.chrome --args --disable-web-security

 

 

 

버전에 따라 작동이 다를 수 있음.

 

출처 : http://egloos.zum.com/spectrum/v/5578302 

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

jax를 사용하다보면 외부 서버에 요청을 할 경우가 있다.

외부서버에 ajax호출을 하면 크로스 도메인 문제가 생긴다.

해결하는 방법은 아래와 같다.

  • Proxy Server 이용
    클라이언트에서 로컬서버로 호출 후 로컬서버에서 외부서버로 호출 하는 방식이다.

  • 스크립트로 호출
    서버쪽 언어로 데이터 처리를 하고 스크립트로 응답한다.
    클라이언트는 해당 파일을 스크립트로 로드하여 사용한다.

  • response시 도메인 허용
    response header에 Access-Control-Allow-Origin속성을 추가하여 해당 도메인은 크로스도메인에 걸리지 않게 한다.
    예)node.js 에 express사용할 경우
    app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
    });

  • jsonp로 호출
    ajax호출시 return data type을 jsonp로 하고 response때 jsonp형식으로 내려준다.
    get으로만 호출 가능.
    예)jquery사용할 경우
    $.ajax({
        url:'[url]',
        dataType:'jsonp'
    });

출처 : http://vaanxii.tistory.com/archive/201207

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그


jQuery.ajax (options)

HTTP 통신에서 페이지를로드합니다. 이 함수는 jQuery의 AJAX 통신의 기본 부분에서 실제로 $. get$. post 같은 함수를 사용하는 것이 쉽게 구현할 수 있습니다. 그러나 이러한 추상화된 함수는 구현의 용이성과 교환에 오류시 콜백과 같은 복잡한 기능을 잃고 있습니다. 그런 처리를 구현하려면, 역시 핵심이다이 함수를 사용해야합니다. $. ajax 함수는 반환값으로 XMLHttpRequest 객체를 반환합니다. 대부분의 경우이 개체를 직접 조작하는 것은 없다고 생각되지만, 예를 들어 던져 버린 요청을 중단하는 경우 등, 필요하면 이용하십시오. 이 함수는 인수를 하나만 취하지만, 실제로는 해시에서 키 - 값 조합은 많은 옵션을받습니다. 다음에 그 목록을 싣고 있으므로 참고하시기 바랍니다.


async / boolean
비동기 통신 플래그. 기본값은 true (비동기 통신)에서 요청이 던져에서 응답할 때까지 사용자 에이전트는 비동기 처리를 계속합니다. false로 설정 (동기 통신)하면 통신에 응답이있을 때까지 브라우저는 잠겨 조작을 받아들이지 않을 것을주의하십시오.
beforeSend / function
AJAX에 의해 요청이 전송되기 전에 불리는 Ajax Event 입니다. 반환값을 false로 설정하면 AJAX 전송을 취소할 수 있습니다.
function (XMLHttpRequest) { 
this / / AJAX 전송 설정 옵션을 나타내는 개체
}
cache / boolean
jQuery 1.2. 초기값은 일반적으로 true이지만 dataType이 script의 경우에는 false입니다. 통신 결과를 캐시하지 않으에는 false로 설정하십시오.
complete / function
AJAX 통신 완료될 때 호출되는 함수입니다. success이나 error가 호출된 후에 호출되는 Ajax Event 입니다.
function (XMLHttpRequest, textStatus) { 
this / / AJAX 전송 설정 옵션을 나타내는 개체
}
contentType / string
서버에 데이터를 보낼 때 사용 content - type 헤더의 값입니다. 기본값은 "application / x - www - form - urlencoded"대부분의 경우이 설정으로 문제 없을 것입니다.
data / object, string
서버로 전송하는 값. 개체가 지정된 경우 쿼리 문자열로 변환되고 GET 요청으로 추가됩니다. 이 변환 처리에 대해서는, 후술하는 processData를 참조하십시오. 객체는 키와 값의 조합해야하지만, 만약 값이 배열이라면, jQuery는 같은 키를 가지는 여러 값으로 serialize합니다. 예를 들어 {foo : "bar1", "bar2"]}와 같이 지정된 경우, & foo = bar1 & foo = bar2처럼 조립할 수 있습니다.
dataFilter / function
기본 수준에서 XMLHttpRequest의 반환 데이터를 필터링합니다. 서버 로부터의 반환값을 청소하는 경우 등에 유용합니다. 함수는 첫번째 인수에 원시 데이터를 제 2 인수 dataType 값을받습니다. 필터링된 값을 반환 값으로 반환하십시오.
function (data, type) { 
/ / 필터링
/ / 마지막으로 청소 후에 데이터를 반환
return data;
}
dataType / string
서버에서 반환되는 데이터 형식을 지정합니다. 생략했을 경우는, jQuery이 MIME 타입 등을 보면서 자동으로 결정합니다. 지정 가능한 값은 다음과 같은 것입니다.
  • "xml": XML 문서
  • "html": HTML을 텍스트 데이터로. 여기에 script 태그가 포함된 경우 처리가 실행됩니다.
  • "script": JavaScript 코드를 텍스트 데이터로. cache 옵션 특히 지정이 없으면 캐시가 자동으로 비활성화됩니다. 원격 도메인에 대한 요청의 경우 POST는 GET으로 변환됩니다.
  • "json": JSON 형식 데이터로 평가하고 JavaScript의 개체로 변환합니다.
  • "jsonp": JSONP로 요청을 부르고 callback 매개 변수에 지정된 함수 회수 값을 JSON 데이터로 처리합니다. (jQuery 1.2 추가)
  • "text": 일반 텍스트.
dataType을 지정할 때는 몇 가지 가리키는 할 점이 있습니다. 아래의주의 1,2를 참조하십시오.
error / function
통신에 실패했을 때 호출되는 Ajax Event 입니다. 인수는 3 개로 차례 XMLHttpRequest 개체 오류 내용, 추가적인 예외 개체를받습니다. 제 2 인수에는 "timeout", "error", "notmodified" "parsererror"등이 돌아갑니다.
function (XMLHttpRequest, textStatus, errorThrown) { 
/ / 보통은 여기서 textStatus 및 errorThrown 값을보고 처리를 분리하거나
/ / 단순히 통신에 실패했을 때의 처리를 기술합니다.
this / / this는 다른 콜백 함수 마찬가지로 AJAX 통신할 때 옵션을 나타냅니다.
}
global / boolean
Ajax Events의 Global Events을 실행할지 여부를 지정합니다. 일반적으로 true이지만, 특별한 통신 false 수도 있습니다. 자세한 내용은 Ajax Events 를 참조하십시오.
ifModified / boolean
서버의 응답에 Last - Modified 헤더를보고, 전회 통신에서 변경이있는 경우에만 성공 상태를 반환합니다.
jsonp / string
jsonp 요청을 할 때 callback이 아닌 매개 변수이면 지정합니다. 예를 들어 {jsonp : 'onJsonPLoad'}로 지정하면 실제 요청은 onJsonPLoad = 함수 이름이 부여됩니다.
password / string
인증이 필요한 HTTP 통신시 암호를 지정합니다.
processData / boolean
data 지정한 개체를 쿼리 문자열로 변환할지 여부를 설정합니다. 기본값은 true로, 자동으로 "application / x - www - form - urlencoded"형식으로 변환합니다. DOMDocument 자체 등의 다른 형식으로 데이터를 보내기 위하여 자동 변환하고 싶지 않은 경우는 false를 지정합니다.
scriptCharset / string
스크립트를 로드할 때의 캐릭터 세트를 지정합니다. dataType이 "jsonp"혹은 "script"에서 실행되는 페이지와 호출하는 서버측의 캐릭터 세트가 다른 경우에만 지정해야합니다.
success / function
AJAX 통신이 성공하면 호출되는 Ajax Event 입니다. 돌아온 데이터와 dataType 지정한 값 2 개의 인수를받습니다.
function (data, dataType) { 
/ / data의 값을 사용하여 통신 성공시 처리를 기술합니다.
this / / this는 AJAX 전송시 설정한 옵션
}
timeout / number
제한 시간 (밀리초)을 설정합니다. $. ajaxSetup 에서 지정한 값을 통신에 따라 개별적으로 덮어쓸 수 있습니다.
type / string
"POST"또는 "GET"을 지정하여 HTTP 통신의 종류를 설정합니다. 기본값은 "GET"입니다.RESTful에 "PUT"또는 "DELETE"를 지정할 수 있지만 모든 브라우저가 지원하는 것은 아니기 때문에주의가 필요합니다.
url / string
요청을 보낼 대상 URL입니다. 기본값은 호출 페이지에 보냅니다.
username / string
인증이 필요한 HTTP 통신시 사용자 이름을 지정합니다.
xhr / function
XMLHttpRequest 객체가 생성되었을 때 호출되는 콜백 함수입니다. 이 함수는 예를 들면 IE에서 XMLHttpRequest 아니라 ActiveXObject가 만들어진 때라고합니다. 만약 특정 사이트의 XMLHttpRequest 개체의 확장과 인스턴스 관리 팩토리를 가지고있는 경우에는이 함수 생성물을 덮어쓸 수 있습니다. jQuery1.2.6 이전에서는 사용할 수 없습니다.

※주의 1
dataType 옵션을 사용하는 경우 서버에서 응답이 올바른 MIME 타입을 반환하는지 확인하십시오.
만약 MIME 타입과 지정된 dataType에 불일치가있는 경우, 예기치 않은 문제가 발생할 수 있습니다.
자세한 내용은
Specifying the Data Type for AJAX Requests (영어) 를 참조하십시오. ※주의 2dataType에 "script"을 지정하여 다른 도메인에 전송하는 경우 POST를 지정해서 요청은 GET 자동으로 변환됩니다. jQuery 1.2에서는 다른 도메인에서도 JSONP를 사용하여 JSON 데이터를 검색할 수있는 옵션이 붙었습니다. JSONP를 제공하는 서버가 "url? callback = function"와 같은 형태로 요청을받는 경우에는, jQuery가 자동으로 function을 사용하여 JSON 데이터를받습니다. 또한 매개 변수가 callback이 아닌 경우 jsonp 옵션 매개 변수 이름을 지정하여 마찬가지로 처리할 수 있습니다.

샘플
샘플 1
JavaScript 파일을 읽고 실행합니다.
$. ajax ({type : "GET", url : "test.js"dataType : "script"});
서버에 데이터를 저장하고 처리가 완료된 것을 사용자에게 알려줍니다.
$. ajax ({type : "POST", url : "some.php"data : "name = John & location = Boston", success : function (msg) {alert ( "Data Saved :"+ msg);}}) ;
HTML 페이지의 최신 버전을 가져옵니다.
$. ajax ({url : "test.html", cache : false, success : function (html) {$ ( "# results"). append (html);}});
동기 통신에서 데이터를 읽습니다.
통신 중에 브라우저가 잠겨 있기 때문에 어떤 방식으로 통신중인 사용자 작업을 방해 궁리를해야 할 것입니다.
var html = $. ajax ({url : "some.php"async : false}). responseText;
XML 형식의 문서를 데이터로 보냅니다.
processData 옵션을 false로 설정하여 데이터를 문자열로 자동 변환되는 것을 피할 수 있습니다.
var xmlDocument = create xml document]; $. ajax ({url : "page.php"processData : false, data : xmlDocument, success : handleResponse});

우리가 작성한 예제 :

$(function() {
$("#btn1").click(function() {
var name= $("#name").val();
var age = $("#age").val();
var url = "test5_ok.jsp";
var params = "name=" + name + "&age=" + age + "&nickName=수요일";
$.ajax({
type : "POST", // "POST"또는 "GET"을 지정하여 HTTP 통신의 종류를 설정. default는 "GET"
url:url,
data:params, // 서버로 전송하는 값
dataType:'xml', // 기본 text -> 서버에서 반환되는 데이터 형식을 지정. html, xml, text, script, json, jsonp 가 있음
success:function(args) { // AJAX 통신이 성공하면 호출되는 Ajax Event
$(args).find("status").each(function() {
var status = $(this).text();
alert(status);
});

var str = "";
$(args).find("records").each(function() { // 태그명이 records 인 것들 중에 해당하는 것들을 불러옴
var records = $(this);
var id = records.attr("id"); // 속성명이 id
var name = records.find("name").text(); // 태그명이 name 인 것의 text를 가져옴
var age = records.find("age").text(); // 태그명이 name 인 것의 text를 가져옴
var nickName = records.find("nickName").text(); // 위와 동일

str += "id="+ id +", name=" + name + ", age=" + age + ", nickName=" + nickName + "<br/>";
});
$("#result").html(str); // id명이 result 인 것에 위에서 반복문으로 받은 것들을 html형식으로 찍는다.
},
beforeSend:showRequest, // AJAX에 의해 요청이 전송되기 전에 불리는 Ajax Event
error:function(e) { // 통신에 실패했을 때 호출되는 Ajax Event
alert(e.responseText);
}
});
});

$("#btn2").click(function() {
$("#result").empty();
});
});

function showRequest(args) { // 리턴 값이 true 일경우만 전송, false이면 전송 취소
if(!$("#name").val()) {
alert("이름을 입력하세요 !!!");
return false;
}
if(!$("#age").val()) {
alert("나이를 입력하세요 !!!");
return false;
}
return true;
}

 

 

출처 : http://hsj0511.tistory.com/205

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

라인같은 사이트를 보면 다음과 같은 이미지 슬라이더가 있습니다.



흰색 버튼을 누르면 화면이 전환됩니다. 이러한 기능을 이번에 구현해봅시다.


화면 구성을 먼저 html의 div 태그로 나누게 되는데


1. slider_panel : 실제 이미지가 들어가는 곳

2. slider_text_panel : 텍스트가 들어가는 곳

3. control_panel : 버튼이 들어가서 클릭시 이미지가 슬라이드됨.



위와같이 div태그로 화면을 구성하였습니다.


소스중에서 css에서 left 속성을 –300으로 보내는 것이 있는데 –300이면 화면


밖이므로 즉, 화면 밖으로 보내서 실제 유저의 화면에는 안보이게 하는 것입니다.


여기서 가장 주의해야 할 점은


제일 상위 css클래스인 animation_canvas(캔버스)는 overflow 옵션을 hidden과


position을 relative로 했고 하위 클래스들인 slider_panel, slider_image


등은 position을 absolute로 했다는 점입니다.


overflow 옵션 hidden은 캔버스를 넘어가는 것들은 그냥 안보이게 해라 라는


뜻이고,


position relative 속성은 자식 구성요소가 부모의 위치를 기준으로 위치를


잡으라는 뜻입니다.



즉 자바스크립트 플래시 또는 실버라이트의 시각적 효과 구현시 다음 사항을 만족해야합니다.


1. 캔버스의 width와 height 속성을 필수로 지정합니다.

2. 캔버스의 position 스타일 속성은 relative로 지정합니다.

3. 캔버스의 overflow 속성은 hidden으로 지정합니다.

4. 구성요소의 position 속성은 absolute로 지정합니다.



소스 ex1.html


<!DOCTYPE html>

<html>

<head>

        <style>

        * { margin: 0px;

        padding: 0px;

        }


        .animation_canvas{

        

        overflow: hidden;

        position: relative;

        width: 600px; height: 400px;

        

        }

        

        /* Slider Panel */

        .slider_panel { width:3000px; position:relative; }

        .slider_image { float:left; width:600px; height:400px; }

    

        /* Slider Text Panel */

        .slider_text_panel { position:absolute; top:200px; left:50px; }

        .slider_text { position:absolute; width:250px; height:150px; }

        

        /*Control panel*/

        .control_panel{

        position: absolute; top: 380px;

        left: 270px; height: 13px;

        overflow: hidden;

        }

        .control_button{

        width: 12px; height: 46px;

        position: relative;

        float: left; cursor: pointer;

        background:url('point_button.png');

        }

        

        .control_button:hover{top: -16px;}

        .control_button.active{top: -31px;}


        </style>

        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        

        $(document).ready(function (){

        //초기 텍스트 위치를 지정합니다.

        $('.slider_text').css('left', -300).each(function (index){

        $(this).attr('data-index', index);//data-index 라는 커스텀 속성을 넣습니다 값은 index

        });

        

        //컨트롤 버튼의 클릭 리스너 지정 data-index 할당

        $('.control_button').each(function (index){

        $(this).attr('data-index', index);//data-index라는 커스텀 속성을 넣습니다. 값은 index

        });

        

        function moveSlider(index){

        //슬라이더를 이동합니다.

        var willMoveLeft = -(index*600);

        $('.slider_panel').animate({left: willMoveLeft }, 'slow');

        

        //control_button active 클래스를 부여/제거합니다.

        $('.control_button[data-index=' + index + ']').addClass('active');//여기는 버튼을 누르면 파란색으로 변하게

        $('.control_button[data-index!=' + index + ']').removeClass('active');//나머지 속성은 하얀색으로 변하게함

        

        //글자를 이동합니다.

        $('.slider_text[data-index=' + index + ']').show().animate({

        left: 0

        }, 'slow');//왼쪽에서 글자가 나타나게 .

        

        $('.slider_text[data-index!=' + index + ']').hide('slow', function(){

        $(this).css('left', -300);

        });//글자를 사라지게 하고 -300으로 보냄.

        }

        

        //초기 텍스트 위치 지정 data-index 할당

        $('.slider_text').css('left', -300).each(function (index){

        $(this).attr('data-index', index);

        });

        

        //컨트롤 버튼의 클릭 리스너 지정 data-index 할당

        $('.control_button').each(function (index){

        $(this).attr('data-index', index);

        }).click(function (){

        var index = $(this).attr('data-index');

        moveSlider(index);

        });

        

        //초기 슬라이더 위치 지정

        var randomNumber = Math.round(Math.random() * 4);

        moveSlider(randomNumber);

        });

        

        </script>

</head>

<body>


        <h1>Test Header</h1>

        <div class="animation_canvas">

        <div class="slider_panel">

        <img src="Desert.jpg" class="slider_image"/>

            <img src="Hydrangeas.jpg" class="slider_image"/>

            <img src="Jellyfish.jpg" class="slider_image"/>

            <img src="Koala.jpg" class="slider_image"/>

            <img src="Lighthouse.jpg" class="slider_image"/>

        </div>

        

        <div class="slider_text_panel">

            <div class="slider_text">

                <h1>Lorem ipsum</h1>

                <p>Lorem ipsumdolorsitamet,consecteturadipiscingelit.</p>

            </div>

            <div class="slider_text">

                <h1>Nulla eget</h1>

                <p>Nulla egetsapienmauris,ornareelementumelit.</p>

            </div>

            <div class="slider_text">

                <h1>Quisque eleifend</h1>

                <p>Quisque eleifendaugueneclacuslobortisporta.</p>

            </div>

            <div class="slider_text">

                <h1>Donec</h1>

                <p>Donec a ligulalectus,euiaculisjusto.</p>

            </div>

            <div class="slider_text">

                <h1>Vivamus scelerisque</h1>

                <p>Vivamus scelerisquemaurisidnuncdictumsitamet.</p>

            </div>

        </div>       

        

        <div class="control_panel">

        <div class="control_button"></div>

        <div class="control_button"></div>

        <div class="control_button"></div>

        <div class="control_button"></div>

        <div class="control_button"></div>

        </div>

        

        </div>

        <h1>Test Header</h1>

</body>

</html>



실행 화면



버튼을 누르면 다음과 같이 화면이 바뀝니다.




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

jquery UI Effect 플러그인을 다운


http://jqueryui.com 에서 download에서 받을 수 있습니다.

 

 

 


기본적으로 addClass메소드로 애니메이션을 추가하고 removeClass메소드로 애니메이션을 삭제 할 수 있습니다.


이를 사용하기 위해서는


        <link rel="stylesheet" href="./jquery-ui-1.11.2.custom/jquery-ui.css"/>



        <script src="./jquery-ui-1.11.2.custom/jquery-ui.js"></script>


이부분을 추가해줘야 플러그인을 사용할 수 있습니다.


소스

<!DOCTYPE html>

<html>

<head>


        <link rel="stylesheet" href="./jquery-ui-1.11.2.custom/jquery-ui.css"/>

    <style>

        .reverse{

        color: white;

        background-color: black;

        }

        </style>

        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script src="./jquery-ui-1.11.2.custom/jquery-ui.js"></script>

        <script>

        $(document).ready(function(){

        $('div').hover(function(){

        $(this).addClass('reverse', 1000);

        }, function(){

        $(this).removeClass('reverse', 1000);

        });

        });

    </script>

</head>

<body>

        <div>

        <h1>Lorem</h1>

        <p>sit</p>

        </div> 

        <div>

        <h1>Lorem</h1>

        <p>sit</p>   

        </div> 

        <div>

        <h1>Lorem</h1>

        <p>sit</p>

        </div>

</body>

</html>


















실행화면


마우스를 갖다대면 서서히 검은색 부분이 나타납니다.




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

애니메이션를 지연하고 싶다면 delay 메소드를 이용하면 됩니다. 사용 방법은


소스를 보시면 바로 알 수 있습니다.(첫번째 파라미터가 delay 되는 시간 ms단위)


아래 소스중  each 메소드는 요소만큼 반복하는 메소드입니다. 각 인덱스는


index 파라미터에 의해서 알수있구요.



소스


<!DOCTYPE html>

<html>

<head>

        <style>

        div{

        width: 100px; height: 100px;

        background-color: orange;

        position: relative;

        }

        </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        $(document).ready(function(){

        $('div').each(function (index){

        //(index * 500) animate() 메서드를 실행합니다.

        $(this).delay(index * 500).animate({

        left: 500

        }, 'slow');

        });

        });

    </script>

</head>

<body>

        <div></div>  <div></div>

        <div></div>  <div></div>

        <div></div>  <div></div>

        <div></div>  <div></div>

</body>

</html>



실행화면



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

stop 메소드는 효과 및 애니메이션을 정지하는 메소드입니다.


그리고 다음 2가지 파라미터를 가집니다.


clearQueue와 goToEnd인데 첫 번째 파라미터를 true로 설정하면


clearQueue 메소드를 실행하는 것과 같은 효과를 냅니다. 두 번째 파라미터


인 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종


형태에서 멈춥니다.




소스코드


<!DOCTYPE html>

<html>

<head>

        <style>

        div{

        width: 100px; height: 100px;

        background-color: orange;

        position: relative;

        }

        </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        $(document).ready(function(){

        //이벤트를 연결합니다.

        $('button').click(function(){

        //변수 선언

        var html = $(this).html();

        var evalText = "$('div')." + html;

        

        //메소드를 실행합니다.

        //eval 함수를 사용하면 JavaScript 소스 코드를 동적으로 실행할 있습니다.

        eval(evalText);

        });

        

        //애니메이션을 시작합니다.

        setInterval(function(){

        $('div').animate({

        left: '500'

        }, 1000).animate({

        left: '0'

                }, 1000);

        }, 2000);

        

        });

        

    </script>

</head>

<body>

        <button>stop()</button>

        <button>stop(true)</button>

        <button>stop(false, true)</button>

        <button>stop(true, true)</button>

        <div></div>

</body>

</html>


실행화면

stop()버튼은 이동을 멈추고 바로 왼쪽으로 이동한후 다시 이동합니다.


stop(true)는 이동하는 것을 멈추고 setInterval함수가 실행될 때까지 기다립니다.


stop(false, true)는 사각형이 바로 오른쪽 끝으로 이동후 다시 왼쪽으로 이동합니다.


stop(true, true)는 사각형이 바로 오른쪽 끝으로 이동후 다음 setInterval 함수가 실행될 때까지 대기합니다.

 

출처 : 모던 웹을 위한 javascript jquery 입문



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

애니메이션 큐에 대해서 알아봅시다. jquery 효과는 먼저 실행된 순서대로 실행하게됩니다.


다음 소스를 보고 어떤 애니메이션부터 실행될지 예상해봅시다.


소스코드

<!DOCTYPE html>

<html>

<head>

        <style>

        div{

        width: 50px; height: 50px;

        background-color: orange;

        position: relative;

        }

        </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        $(document).ready(function(){

        

        //클릭시 animate 메소드를 체이닝으로 연결했습니다.

        //큐에 들어가서 차례로 실행이 됩니다.

        $('div').click(function(){

        $(this).animate({

        left: '+=60'

        }, 2000).animate({

        width: '+=60'

        }, 2000).animate({

        height: '+=60'

        }, 2000);

        });

        });

        

    </script>

</head>

<body>

        <div></div>

</body>

</html>



출력화면

마우스로 네모를 클릭하면



이동 -> 가로길이 늘어나기 -> 세로길이 늘어나기 순으로 실행됩니다.




다음은 clearQueue 메소드를 이용해서 큐에 들어간 효과를 삭제하는 방법입니다.



소스코드

<!DOCTYPE html>

<html>

<head>

        <style>

        div{

        width: 50px; height: 50px;

        background-color: orange;

        position: relative;

        }

        </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        $(document).ready(function(){

        

        //animate 메소드를 사용합니다.

        $('div').animate({left: '+=60'}, 2000);

        $('div').animate({width: '+=60'}, 2000);

        $('div').animate({height: '+=60'}, 2000);


        //3초뒤에 애니메이션 큐를 제거합니다.

        setTimeout(function(){

        //애니메이션 큐를 제거합니다.

        $('div').clearQueue();

        

        //효과 메소드를 사용합니다.

        $('div').hide();

        }, 3000);

        });

        

    </script>

</head>

<body>

        <div></div>

</body>

</html>

 

출처 : 모던웹을 위한 javascript jquery 입문




실행 결과



움직이다가

없어 집니다.






블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

이번에는 현재 스타일 속성을 알아내서 추가 값을 부여하여 animate 메소드


를 사용해 동적으로 애니메이션을 적용하는 예제입니다.


간단하므로 소스코드를 바로 보시면 이해가 되실겁니다.


소스코드

<!DOCTYPE html>

<html>

<head>

        <style>

        div{

        width: 50px; height: 50px;

        background-color: orange;

        }

        </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        $(document).ready(function (){

        $('div').click(function(){

        

        //변수를 선언합니다.

        var width = $(this).css('width');

        var height = $(this).css('height');

        

        //animate 메소드를 사용합니다.

        // 클릭시 다음 animate 메소드 효과가 적용됩니다.

        $(this).animate({

        width: parseInt(width) + 50,

        height: parseInt(height) + 50

        }, 'slow');

        

        });

        });//ready메소드

        

    </script>

</head>

<body>

        <div></div>

</body>

</html>


출력화면

마우스로 네모를 클릭하면 커집니다. 아래와 같은 작은 네모가

클릭을하면 아래와 같이 커집니다.



출처 : 모던웹을 위한 javascript jquery 입문







블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

hover 메소드는 다음과 같습니다.


.hover( handlerIn(eventObject), handlerOut(eventObject) )Returns : jQuery

 

개요 : 마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다.


.hover( handlerIn(eventObject), handlerOut(eventObject) )

 handlerIn(eventObject) 마우스 포인터가 요소에 들어올 때 실행될 기능

 handlerOut(eventObject) 마우스 포인터가 요소에서 떠날 때 실행될 기능


animate 메소드를 사용하려면 position 스타일 속성이 absolute이거나 relative 여야합니다.


그점에 유의하여 hover 메소드와 animate 메소드를 사용하여 마우스를 갖다될 때 애니메이션 효과가 적용되는 것을 만들어 봅시다.



소스코드

<!DOCTYPE html>

<html>

<head>

        <style>

        div{

        width: 50px; height: 50px;

        background-color: orange;

        position: relative;

        }

        </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        $(document).ready(function (){

        

        //hover 메소드는

        //마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다.

        $('div').hover(function(){

        $(this).animate({

        left: 500

        }, 'slow');

        }, function(){

        $(this).animate({

        left: 0}, 'slow');

        });//hover메소드


        });//ready메소드

        

    </script>

</head>

<body>

        <div></div><div></div>

        <div></div><div></div>

        <div></div><div></div>

</body>

</html>






출력화면


마우스를 갖다대면 사각형이 움직이는 출력화면입니다.


출처 : 모던웹을 위한 javascript&jquery 입문

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag java, JQuery

innerfade 플러그인은 시각효과를 위한 플러그인입니다.


다운은 http://medienfreunde.com/lab/innferfade 에서 내려 받을수 있습니다.


innerfade 플러그인을 사용하려면 head 태그에 script를 추가해야합니다.


innerfade 메소드를 구현하면 쉽게 플러그인을 구현할 수 있습니다.


필요한 파라미터는 소스에 주석으로 작성했습니다.


소스코드

<!DOCTYPE html>

<html>

<head>

        <style>

        * {margin: 0px; padding: 0px;}

        ul {list-style:none;}

        img {width: 500px; height: 350px;}

        </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    <script src="jquery.innerfade.js"></script>

        <script>

        $(document).ready(function (){

        //innerfade 플러그인을 적용합니다.

        //2초마다 그림을 변경하게 합니다.

        

        //speed 내용물의 변경속도

        //timeout 변경 효과가 적용되는 속도

        //type 내용물의 변경 방식

        //containerheight 내용물의 높이

        $('#inner-fade').innerfade({

        animationtype: 'fade',

        speed: 750,

        timeout: 2000,

        type: 'random',

        containerheight: '350px'

        });

        });

        

    </script>

</head>

<body>

        <!--inner-fade 플러그인은 ul 태그에 적용하는 플러그인입니다. -->

        <ul id="inner-fade">

        <li><img src="pic1.jpg" /> </li>

        <li><img src="pic2.jpg" /> </li>

        <li><img src="pic3.jpg" /> </li>

        <li><img src="pic4.jpg" /> </li>

        <li><img src="pic5.jpg" /> </li>

        <li><img src="pic6.jpg" /> </li>

        <li><img src="pic7.jpg" /> </li>

        <li><img src="pic8.jpg" /> </li>

        </ul>

</body>

</html>





출력화면


아래와 같이 사진이 랜덤으로 바뀌게 됩니다. 이때 2초마다 변경이 됩니다.





블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag java, JQuery

jquery에서 지원하는 간단한 시각 효과 첫 번째는 toggle 메소드를 이용한 show 메소드와 hide 메소드의 실행입니다.


show 메소드는 문서 객체를 보여주는것이고 hide 메소드는 문서 객체는 사라지게 하는 것입니다.


실행화면을 보시면 쉽게 이해가 됩니다.


<!DOCTYPE html>

<html>

<head>