20110602_AJAX_UI_실무_기본교육

Ajax UI Basic
/ /
2010 NHN CORPORATION
jindo?
Jindo jindo
NHN
JavaScript Library
. .
http://dev.naver.com/projects/jindo
Support Browser
Internet 6, 7, 8, 9 Firefox 3 more Safari 3 more Opera 10 more
Basic Template
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </title> <title>jindo <link rel="Stylesheet" media="screen" href="main.css" /> <script type="text/javascript" src="../jindo.min.js"></script> <script type="text/javascript" src="ex01.js"></script> </head> <body> </body> </html>
Hello World
$Fn(function(){ // . document.body.innerHTML = 'hello world'; }).attach(window, 'load');
document.getElementById
$Fn(function(){ // $('id).innerHTML = 'hello world'; }).attach(window, 'load'); .
Chapter 2
Event Handling
.
(DOM level 0) event
register
$Fn( FunctionName, Scope ).attach( targetElement, clickHandler);
(DOM level 0) event
register
<script> function clickHandler(e){ alert(' } </script>
.');
<body> <button id="btn01" onclick="clickHandler();">button</button> </body>
(DOM level 3) event
register
<head> <script type="text/javascript" src="ex02.js"></script> </head> <body> <button id="btn01">button</button> </body>
(DOM level 3) event
register
function clickHandler(e){ alert(' } // . var target = document.getElementById('btn01'); // $Fn(clickHandler).attach(target, 'click'); .
.');
(DOM level 3) event
register
function clickHandler(e){ alert(' } // var target = .
.');
$('btn01');
.
// $Fn(clickHandler).attach(target, 'click');
(DOM level 3) event
unregister
$Fn( FunctionName, Scope ).detach( targetElement, clickHandler);
(DOM level 3) event
unregister
function clickHandler(e){ alert(' } // var target = $('btn01'); var clickFn = $Fn(clickHandler); // clickFn.detach(target, 'click'); .
.');
(DOM level 3) event
handling
function clickHandler(e){ ... }
function mouseoverHandler(e){ ... } function mouseoutHandler(e){ ... }

// . var target = $('btn01'); var clickFn = $Fn(clickHandler); var mouseoverFn = $Fn(mouseoverHandler); var mouseoutFn = $Fn(mouseoutHandler); // . clickFn.attach(target, 'click'); mouseoverFn.attach(target, 'mouseover'); mouseoutFn.attach(target, 'mouseout');
(DOM level 3) event
handling
function clickHandler(e){ var el = e.element; var type = e.type; alert( c+ el.tag + }
c+ type +
.);
Chapter 3
Element Manipulate
.
Show/Hide
var target = $('div01'); target.style.display = 'inline'; var target = $('div01'); target.style.display = 'none';
$Element Show/Hide
var target = $Element('div01'); target.show(); var target = $Element('div01'); target.hide();
$Element visible
var target = $Element('div01'); target.hide(); alert(target.visible()); //false target.show(); alert(target.visible()); //true
toggle
/
function toggle(){ var target = $Element('div01'); target.visible() ? target.hide() : target.show(); }
width/height
/
var target = $Element('div01'); target.width(400); var target = $Element('div01'); target.height(400);
top/left (x,y)
var target = $Element('div01'); target.offset(100, 200);
text/html
var target = $Element('div01'); target.text('<strong>text</strong> .'); var target = $Element('div01'); target.html('<strong>html</strong> .');
attr
<img id="img01" src="naver.gif" alt="naver logo" title=" var target = $Element('img01'); target.attr('title'); // target.attr('title', ' '); target.attr('src'); //naver.gif target.attr('title'); //
"/>
addClass/removeClass
ClassName
<div id="div01" class="redbox"> var target = $Element('div01'); target.addClass('bluebox'); var target = $Element('div01'); target.removeClass('bluebox');
</div>
hasClass
ClassName
<div id="div01" class="redbox"> var target = $Element('div01'); target.hasClass('bluebox'); //false target.addClass('bluebox'); target.hasClass('bluebox'); //true
</div>
toggle
redbox
function toggle(){ var target = $Element('div01'); target.hasClass('redbox') ? target.removeClass('redbox') : target.addClass('redbox'); }
Chapter 4
Element Manipulate
parent/child
<ul id="ul01"> <li> 1</li> <li> 2</li> <li id="li03"> <li> 4</li> <li> 5</li> </ul>
3</li>
var target = $Element('ul01'); target.child(); // [ li, li, li, li, li ] var target = $Element('li03'); target.parent(); // <ul id=ul01>...</ul>
next/prev
3</li>
var target = $Element('li03'); target.next(); // <li> 4</ul> target.prev(); // <li> 2</ul> target.prev().prev(); // <li> 1</ul>
next/prev
/
3</li>
var target = $Element('ul01'); target.first(); // <li> 1</ul> target.last(); // <li> 5</ul>
Chapter 5
Dynamic Menu
markup design
<html> <body> <ul id="ul01"> <li> <li> <li> <li> <li> </ul> </body> </html>
1</li> 2</li> 3</li> 4</li> 5</li>
css design
CSS
.menu { list-style : none; } .menu li { display : block; height : 20px; width : 130px; margin : 1px; padding : 3px; border : 1px solid #afafaf; } /* .menu li:hover { cursor : pointer; border : 1px solid red; } */
js/css insert
CSS/JS
<link rel="Stylesheet" media="screen" href="main.css" /> <script type="text/javascript" src="../jindo.min.js"></script> <script type="text/javascript" src="ex03.js"></script>
click handling
function menuClickHandler(e){ //do something } // var menus = $('ul01'); .
// . $Fn(menuClickHandler).attach(menus, 'click');
markup design
9
<div class="contents"> <div id="content1"> 1 </div> <div id="content2"> 2 </div> <div id="content3"> 3 </div> <div id="content4"> 4 </div> <div id="content5"> 5 </div> </div>
. http://www.naver.com
. http://www.daum.net
. http://www.google.com
. http://www.yahoo.com
. http://www.paran.com
Chapter 6
Image Gallery
markup design
<html> <body> <div class="panel"> <img id="photo" src="images/blank.jpg"/> </div> <div id="thumbs" class="contents"> <img src="images/thumb1.jpg" /> <img src="images/thumb2.jpg" /> <img src="images/thumb3.jpg" /> <img src="images/thumb4.png" /> <img src="images/thumb5.jpg" /> <img src="images/thumb6.jpg" /> </div> </body> </html>
css design
CSS
.panel { width : 400px; height : 250px; border : 2px solid #afafaf; margin-bottom : 3px; text-align : center; padding-top : 20px; } .contents img { width : 60px; height : 60px; cursor : pointer; border : 2px solid #afafaf; }
click handling
function thumbClickHandler(e) { } // var thumbs = $('thumbs'); .
// . $Fn(thumbClickHandler).attach(thumbs, 'click');
dynamic image loading
function setImage(src){ var panel = $Element('photo'); panel.attr('src',src); //$(photo).src = src; //$(photo).setAttribute(src, src); }
markup design
<div id="control" class="control"> <a href="#" id="first">(<<) </a> <a href="#" id="left">(<) </a> <a href="#" id="right">(>) </a> <a href="#" id="last">(>>) </a> </div>
css design
CSS
.control a { width : 100px; height : 25px; }
click handling
function thumbClickHandler(e) { ... } function controlHandler(e){ ... } // . var thumbs = $('thumbs'); var control = document.getElementById('control'); // . $Fn(thumbClickHandler).attach(thumbs, 'click'); // . $Fn(controlHandler).attach(control, 'click');
Chapter 7
Handling XHR
XMLHttpRequest
Request
var url = './data.json'; var ajax = new $Ajax(url, { type : 'xhr', method : 'post', onload : function(response){ $Element('result').html(response.text()); } }); ajax.request();
Request
var url = './server.php'; var ajax = new $Ajax(url, { type : 'xhr', method : 'post', onload : function(response){ $Element('result').html(response.text()); } }); ajax.request({ act : sum param1 : 1, param2 : 3);
Response
function loadHandler(response){ var json = response.json(); var data = json.data; var str = []; for(var i=0; i<data.length; i++){ str.push(' : '+ data[i].name +', data[i].count +'<br/>'); } $Element('result').html(str.join('')); }
: '+
Error handling
function errorHandler(response){ alert(' '+ response.status() +' } var url = './server2.php'; var ajax = new $Ajax(url, { type : 'xhr', method : 'get', onerror : errorHandler }); ajax.request();
.');
Timeout Handling
function timeoutHandler(response){ alert(' } var url = './server5.php'; var ajax = new $Ajax(url, { type : 'xhr', method : 'get', timeout : 3, ontimeout : timeoutHandler }); ajax.request();
.');
Thanks; )

20110602_AJAX_UI_실무_기본교육

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

20110602_AJAX_UI_실무_기본교육

Uploaded by

Copyright:

Available Formats

Ajax UI Basic

2010 NHN CORPORATION

$Fn(function(){ // . document.body.innerHTML = 'hello world'; }).attach(window, 'load');

$Fn(function(){ // $('id).innerHTML = 'hello world'; }).attach(window, 'load'); .

(DOM level 0) event

$Fn( FunctionName, Scope ).attach( targetElement, clickHandler);

(DOM level 0) event

<script> function clickHandler(e){ alert(' } </script>

<body> <button id="btn01" onclick="clickHandler();">button</button> </body>

(DOM level 3) event

<head> <script type="text/javascript" src="ex02.js"></script> </head> <body> <button id="btn01">button</button> </body>

(DOM level 3) event

function clickHandler(e){ alert(' } // . var target = document.getElementById('btn01'); // $Fn(clickHandler).attach(target, 'click'); .

(DOM level 3) event

function clickHandler(e){ alert(' } // var target = .

(DOM level 3) event

$Fn( FunctionName, Scope ).detach( targetElement, clickHandler);

(DOM level 3) event

(DOM level 3) event

function clickHandler(e){ ... }

function mouseoverHandler(e){ ... } function mouseoutHandler(e){ ... }

(DOM level 3) event

function clickHandler(e){ var el = e.element; var type = e.type; alert( c+ el.tag + }

var target = $Element('div01'); target.show(); var target = $Element('div01'); target.hide();

var target = $Element('div01'); target.hide(); alert(target.visible()); //false target.show(); alert(target.visible()); //true

function toggle(){ var target = $Element('div01'); target.visible() ? target.hide() : target.show(); }

var target = $Element('div01'); target.width(400); var target = $Element('div01'); target.height(400);

var target = $Element('div01'); target.offset(100, 200);

function toggle(){ var target = $Element('div01'); target.hasClass('redbox') ? target.removeClass('redbox') : target.addClass('redbox'); }

var target = $Element('ul01'); target.first(); // <li> 1</ul> target.last(); // <li> 5</ul>

1</li> 2</li> 3</li> 4</li> 5</li>

function menuClickHandler(e){ //do something } // var menus = $('ul01'); .

function thumbClickHandler(e) { } // var thumbs = $('thumbs'); .

dynamic image loading

.control a { width : 100px; height : 25px; }

You might also like