크리에이티브 커먼즈 라이선스
Creative Commons License

Ajax Forms

ShoutBox

Ajax 메신저

Ajax 탭 컨텐트

Ajax 별점 매기기

Ajax 인라인 에디트

Ajax 프로그레스 바

Ajax 페이징

Ajax 파일 업로드

Ajax 자동완성

웹에디터

투표

테이블 데이터 관리

기타


출처 : http://ajaxian.com/archives/groups-of-50-ajax-examples


신고

'Developer > JavaScript' 카테고리의 다른 글

JavaScript의 KeyEvent에 따른 keycode  (9) 2009.06.22
50가지의 Ajax 예제  (0) 2008.11.10
ASCII Character Codes Table & Cheat Sheet  (0) 2008.10.20
Prototype 1.6.0 rc0 Map  (0) 2008.05.30
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
이미지는 3개로 구분되어있고, 클릭하면 원본 이미지를 확인할 수 있다.

사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지
신고

'Developer > JavaScript' 카테고리의 다른 글

ASCII Character Codes Table & Cheat Sheet  (0) 2008.10.20
Prototype 1.6.0 rc0 Map  (0) 2008.05.30
How well do you know prototype  (0) 2008.05.06
AJAX의 javascript에서 한글 깨짐 현상 방지  (0) 2008.05.02
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
Prototype 은 우리에게 보다 빠르고 현명하게(?) JavaScript를 사용할 수 있도록 도와준다.
하지만, 익숙치 않을때는 훌륭한 Framework의 기능을 충분히 끌어내지 못하는 경우가 많다.

이를 상기 시키기 위한 지침 'How well do you know prototype' 가 있다.
Prototype 초보 사용자 들에겐 유익한 포스트라 할 수 있겠다.

How well do you know prototype (part I)

How well do you know prototype (part II)
//바르지 못한 방법:
document.getElementById("foo ")
//적당한 방법: 놀랍게도 어떤 사람들은 이것에 대해 잘 모른다.
$("foo ")

//바르지 못한 방법:
var woot = document.getElementById("bar").value
var woot = $("bar").value
//적당한 방법: 폼 값의 편리하고 빠른 호출
var woot = $F("bar")

//바르지 못한 방법:
$('footer').style.height = '100px';
$('footer').style.background = '#ffc';
//적당한 방법: 모든 브라우저가 W3C의 권고를 따르고 있지 않다.
$('footer').setStyle({
height: '100px',
background: '#ffc'
})

//바르지 못한 방법:
$('coolestWidgetEver').innerHTML = 'some nifty content'
//적당한 방법:
$('coolestWidgetEver').update('some nifty content')
// 아래와 같은 문법 구사가 가능해 지므로
$('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()

//바르지 못한 방법:
new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')
//적당한 방법: 보기 좋으며 보다 나은 파라메터 구조 사용
new Ajax.Request('ninja.php', {
parameters: {
weapon1: 'foo',
weapon2: 'bar'
}
})

//바르지 못한 방법:
new Ajax.Request('blah.php', {
method: 'POST',
asynchronous: true,
contentType: 'application/x-www-form-urlencoded',
encoding: 'UTF-8',
})
//적당한 방법: 기본옵션은 생략하라!
new Ajax.Request('blah.php')

//바르지 못한 방법:
Event.observe('myContainer', 'click', doSomeMagic)
//적당한 방법: 논쟁의 여지가 있지만 객체지향적이다!
$('myContainer').observe('click', doSomeMagic)

//바르지 못한 방법:
$$('div.hidden').each(function(el){
el.show();
})
//적당한 방법: 슬프게도 이 사용법을 아는 사람들이 많지 않다는 사실.
$$('div.hidden').invoke('show')

//바르지 못한 방법:
$$('div.collapsed').each(function(el){
el.observe('click', expand);
})
//적당한 방법: invoke를 이용한 이벤트 핸들링, 졸라 쉽다!
$$('div.collapsed').invoke('observe', 'click', expand)

//바르지 못한 방법:
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
//적당한 방법: $$는 오버해드가 크기 때문에 invoke를 사용하면 $$를 여러번 사용할 필요도 없다.
$$('input.date').invoke('observe', 'focus', onFocus).invoke('observe', 'blur', onBlur)

//바르지 못한 방법:
$('productTable').innerHTML =
$('productTable').innerHTML +
'<tr><td>' + productId + ' '
+ productName + '</td></tr><tr><td>'
+ productId + ' ' + productPrice +
'</td></tr>'
//적당한 방법: Template 클래스는 정말 쓸만한 DOM 솔루션이다. 하지만 잘 사용되고 있지 않는 것 같다.
var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
rowTemplate.evaluate({
id: productId,
name: productName,
price: productPrice
}))
)
신고
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
AJAX의 javascript에서 한글이 깨지는 현상을 고민하다가, 예전에 IIS 5.0에서 XMLHttpRequest 객체를
이용하여 비동기식 XML 통신을 구현했을 때 역시 한글처리 때문에 고민을 했었던 기억이 될살아 났다.

그 때 XMLHttpRequest 객체를 이용하여 통신할 때 한글 처리를 위해서는
"<?xml version='1.0' encoding='euc-kr' ?>" 태그는 필수 항목이었으며,
또한, ASP 페이지 내에서도 "Response.charSet = "euc-kr" 같이 charSet을
설정해 줘야 했었다.
              

AJAX (Asynchronous Javascript And Xml)의 단어에서도 알 수 있듯이 클라이언트와 서버간 통신을 위해서
javascript와 XMLHttpRequest를 사용할 수 밖에 없다.
그러므로,  AJAX 를 사용할 때도 charSet을 설정해 줘야 한글 문제를 처리할 수 있다.

[해결방법]
1. Web.config의 <system.web> 태그 안에 charSet을 정의한다.
   <system.web>    
         .......
         <globalization requestEncoding="euc-kr" responseEncoding="euc-kr"/>
         .......
  </system.web>

2. aspx 페이지에 charset 정의
   <meta http-equiv="Content-Type" content="text/html; charset=euc-kr;" />

3. ScriptManager에 Web.config에서 설정한 charset 사용을 허용한다.
    <asp:ScriptManager id="ScriptManager1" runat="server"
              EnableScriptGlobalization="True"
              EnableScriptLocalization="True">
             <Scripts>
                    <asp:ScriptReference Path="../js/common.js" />
              </Scripts>
    </asp:ScriptManager>

이렇게 하면 ScriptManager내에 있는 javascript의 한글 처리에 문제가 해결된다.


출처 : http://poco.egloos.com/392702
신고
Posted by marga
TAG Ajax
크리에이티브 커먼즈 라이선스
Creative Commons License


http://www.smashingmagazine.com/2008/04/15/60-more-ajax-and-javascript-solutions-for-professional-coding/


When it comes to design of modern web-applications, Ajax is considered as a standard approach. Interactive solutions for lightboxes, form validation, navigation, search, tooltips and tables are developed using Ajax libraries and nifty Ajax scripts. Ajax is useful and powerful. However, when using Ajax, one should keep in mind its drawbacks in terms of usability and accessibility. With an extensive use of Ajax, you can easily confuse your visitors offering too much control and too many features.

Nevertheless, it’s important to know what’s possible, particularly since you can develop new ideas further, improving the quality of your web applications. Since our last article 80+ AJAX-Solutions For Professional Coding many things have changed — new scripts were introduced, new creative solutions were developed, new robust development kits have been released. They all are supposed to serve a better user experience and provide more comfort for web-developers.

This post presents over 60 new useful Ajax scripts, libraries and solutions which you can use in your future projects. License agreements can change from time to time — please read them carefully before using the script in a commercial web-application.

You might want to consider checking out the following related posts:

Please notice: the overview presented below is not just a yet-another-one-collection of Ajax-scripts. It’s a collection of really useful ones, the ones you can use in almost every project you’ll be working on.



신고
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
사용자 삽입 이미지

원본 이미지를 좀 더 선명하게 수정했다.

원본 이미지는 좀 연해서 보고 있으면 눈이 뿌해진다.. =_=;;

프린터 출력은 '커닝페이퍼 PDF 파일' 로 하는 것이 깔끔하다.

관련 내용은 '여기' 를 참조..
신고
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
Fire June 님이 웹어플리케이션 컨퍼런스 2007에서 발표한 JavaScript Library 의 종류와 특징이라는 주제의 발표 자료다.
Ajax를 사용하기 위해서는 JavaScript Library 거의 필수가 되버린 상황에 여러 Library 중 무엇을 써야 하는가를 선택하는 것은 성능과 직결되는 문제.
프리젠테이션 발표자료 인지라 대표적 Library 들을 간략하게 설명하고 있지만, 주옥같은 자료라고 할 수있다.. ㅜ_ㅜ)b


위 파워포인트 자료에는 각 라이브러리 배포사이트의 스크린샷에 링크가 있으며, 슬라이드 노트에 발표내용을 포함하고 있다.

원문 : http://firejune.com/1109
신고

'Developer > JavaScript' 카테고리의 다른 글

팝업창 스크롤바 자동 생성  (0) 2007.06.28
자바스크립트 라이브러리의 종류와 특징  (0) 2007.06.22
웹표준에 맞는 form 코딩법  (0) 2007.05.25
5가지 시계 표기 법  (0) 2007.05.25
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
최근 Ajax의 활용범위가 확대되면서 슬라이더, 드래그앤 드롭, 소테이블, 백그라운드 업로더, 드래그 선택영역, 오토 컴플리케이션 등 부수적인 웹 인터페이스가 자바스크립트로 속속들이 구현되고 있다. 마우스 버튼은 물론 키보드까지 DHTML로 제어하는 이 시점에서 마우스 인풋없는 웹서핑은 상상조차 할 수 없게 되었다. 이러한 가운데 Adomas Paltanavicius자바스크립트를 이용하여 휠을 제어하는 자바스크립트 코드까지 공개하였다. IE와 파이어폭스 등의 브라우저에서 작동하며 테스트 페이지에서 작동하는 모습을 확인할 수 있다.(뭔가 재미있는 생각이 떠오르지 않는가?)

/* This is high-level function.  */
function handle(delta) {
   var s = delta + ": ";
   if (delta < 0)  s += "down";
   else s += "up";
   document.getElementById('delta').innerHTML = s;
}

/* Event handler for mouse wheel event. */
function wheel(event){
   var delta = 0;
   if (!event) event = window.event;
   if (event.wheelDelta) {
       delta = event.wheelDelta/120;
       if (window.opera) delta = -delta;
   } else if (event.detail) delta = -event.detail/3;
   if (delta) handle(delta);
}

/* Initialization code. */
if (window.addEventListener)
   window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

출처 : http://firejune.com/922&ct1=8&ct2=42
신고
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
Richard McMahon씨는 Prototype을 이용한 "ResizingTextArea" 컴포넌트를 만들고 공개했다. 이 컴포넌트는 클릭(click)과 키업(keyup)이벤트를 할당하여 텍스트 영역의 Row를 감시하고 실시간으로 리사이즈 한다. 이 블로그의 댓글과 방명록 텍스트 영역에 적용해 보았다.(썩 쓸만함)

/**
* ResizingTextArea Component
* Richard McMahon(http://jroller.com)
*/

var ResizingTextArea = Class.create();
ResizingTextArea.prototype = {
   defaultRows: 1,
   initialize: function(field) {
       this.defaultRows = Math.max(field.rows, 1);
       this.resizeNeeded = this.resizeNeeded.bindAsEventListener(this);
       Event.observe(field, "click", this.resizeNeeded);
       Event.observe(field, "keyup", this.resizeNeeded);
   },
   resizeNeeded: function(event) {
       var t = Event.element(event);
       var lines = t.value.split('\n');
       var newRows = lines.length + 1;
       var oldRows = t.rows;
       for (var i = 0; i < lines.length; i++) {
           var line = lines[i];
           if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
       }
       if (newRows > t.rows) t.rows = newRows;
       if (newRows < t.rows) t.rows = Math.max(this.defaultRows, newRows);
   }
}

사용법 : <textarea ... onfocus="new ResizingTextArea(this);">

출처 : http://firejune.com/1026&ct1=8&ct2=42
신고
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License

출처 : http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/

Ajax Image Galleries & Lightboxes

CSS-Based Image Galleries

JavaScript + CSS-based Galleries & DHTML-Galleries


신고
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
Homepage : http://tinymce.moxiecode.com

07.05.08 TinyMCE 2.1.1 Released

TinyMCE Features

TinyMCE API
신고
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
Binny V A씨는 많은 자바스크립트 라이브러리가 있음에도 단축키를 지원하는 라이브러리는 발견하지 못했다면서 구글의 웹 애플리케이션인 Gmail이나 Reader처럼 보다 쉽게 웹 애플리케이션에 단축키를 사용할 수 있도록 함수를 만들어 배포했습니다.

아래의 예제를 보면 첫번째 아규먼트로 키를 지정하고, 두번째로 콜백 함수를 넣습니다. 마지막 세번째에는 옵션을 지정할 수 있습니다. 지원 되는 키에는 "Ctrl+X"와 같은 형식으로 작성하여 매우 직관적이며 Tab, Space, Return, Enter, Backspace, Scroll_lock, Caps_lock, Num_lock, Pause, Insert, Home, Delete, End, Page_up, Page_down, Left, Up, Right, Down, F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12 키를 지원합니다.

옵션으로는 'type'에 'keydown','keyup','keypress' 이벤트를 변경할 수 있으며 'target'에 이벤트가 작동할 DOM단위의 영역을 설정할 수 있고 'propagate' 증식옵션(event.stop 또는 return false?)을 Boolean형태로 사용할 수 있습니다.

다운로드 자바스크립트 : shortcuts.js

예제 코드
shortcut("Ctrl+Shift+X",function() {
   alert("Hi there!");
});

shortcut("Ctrl+B",function() {
   alert("The bookmarks of your browser will show up after this alert...");
},{
   'type':'keydown',
   'propagate':true,
   'target':document
});
신고
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
http://www.ejschart.com/index.php

Description: http://ajaxian.com/archives/emprise-jav ··· h-canvas

Jacob Miller and his team have created a rich charting library called EJSChart.

EJSChart is canvas-based with many interactive features such as zooming and auto scaling. The product has been in development for some time but the web site has just been established.

It features interactivity, axis scaling, zooming, scrolling, ajax-driven data, and much more.


신고
Posted by marga
크리에이티브 커먼즈 라이선스
Creative Commons License
Prototype.js의 구석구석을 파해쳐 풀이한 도서가 4월에 출간될 예정이다. 영광스럽게도 본 도서의 베타리뷰를 맡아 진행하면서 느낀점을 간략하게 리뷰해 본다.

김영보 저자의 "Ajax Prototype.js - 프로토타입 완전분석"은 Prototype.js 프레임웍을 이해하는 것에 초점을 맞추고 있다. 코드 한줄 한줄을 낱낱히 분석하고 이해하는 과정을 적나라하게 담았다.(심지어는 정규식의 풀이과정까지) 이러한 분석은 자바스크립트의 기초를 다지고 나아가서는 개개의 작동방식을 이해함으로써 유기적으로 연결되어있는 큰 흐름을 볼수있게 한다. Prototype.js 프레임웍을 선호하거나 처음 시작하려는 이들에게 좋은 참고서이자 길잡이가 될 것이다.




봐야할 책이 또 하나 생겼다. 이거 제대로 보지도 못하고 쌓아만 둔 책이 몇권인가...OTL;;


출처 : http://firejune.com/1055
신고
Posted by marga
TAG Ajax,


티스토리 툴바