All Scrap

이글립스 팩트

Anna 안나 — Thu, 5 Sep 2013 00:47:17 +0900

브리티 뮤지션 마스카라 플러스원

Anna 안나 — Wed, 13 Feb 2013 22:01:48 +0900

스카이공공칠에서 뷰티테스터를 모집한대요.

응모하러가세요~

http://www.sky007.com//board/board.html?code=braunshop7_board13&page=1&type=v&num1=999990&num2=00000&lock=N

삐아 아이섀도우 3종(노바디엘스,스템,모어글루미) 뷰티테스터 신청

Anna 안나 — Sun, 20 Jan 2013 01:40:06 +0900

현재 sky007에서 삐아 아이섀도우 3종 뷰티테스터를 모집하고 있습니다.

자세한 사항은 아래 첨부된 사진과 링크를 참고하세요^^

http://www.sky007.com//board/board.html?code=braunshop7_board13&page=1&type=v&num1=999997&num2=00000&lock=N

Jquery Accordion 관련 링크

Anna 안나 — Tue, 17 Jan 2012 19:14:29 +0900

http://jqueryui.com/demos/accordion/#default

http://docs.jquery.com/UI/Accordion#overview

http://jquery.bassistance.de/accordion/demo/

셀렉터

Anna 안나 — Tue, 17 Jan 2012 12:32:39 +0900

1. 위치 기반 셀렉터

//[모든 짝수번째<p>엘리먼트를 선택한다.]
$("p:even");

//[모든 홀수 번째<p>엘리먼트를 선택한다.]
$("p:odd");

//[(첫|마지막)번째<p>엘리먼트를 선택한다.]
$("p:(first|last)");

//(첫|마지막)번째 자식 엘리먼트. 각 리스트의 (첫|마지막)번째의 아이템을 반환한다.
$("li:(first-child|last-child)")

//형제가 없는 모든 엘리먼트를 반환한다.
$("only-child")

//[모든 테이블에서 첫째행을 선택한다.] => n값은 1부터 시작
$("table tr:n-child(1)");

//[모든 테이블에서 (짝수 | 홀수)행을 선택한다.]
$("table tr:nth-child(even|odd)");

//[n번째로 일치하는 엘리먼트] => n값은 0부터 시작
$("eq(n)");

//[n번째(포함하지 않음) 이후로 일치하는 엘리먼트] => n값은 0부터 시작
$("gt(n)");

//[n번재(포함하지 않음) 이전의 일치하는 엘리먼트] => n값은 0부터 시작
$("lt(n)");

2.CSS 셀렉터

//[<body>의 바로 아래 자식인 <div> 엘리먼트를 선택한다.]
$("body > div");

//[확장자 pdf 파일의 링크를 선택한다.]
$("a[href$=pdf]");

//[http://로 시작하는 링크를 선택한다.]
$("a[href^=http://]");

//[<body>의 바로 아래 자식이면서 링크를 포함하는 <div>엘리먼트를 선택한다.]
$("body > div:has(a)");

//[속성값이 임의의 문자열을 포함하는 엘리먼트를 찾아오라]
$("a[href*=jquery.com]");

//[선택자 id someElement 에 html을 삽입한다.]
$("#someElement").html("엘리먼트에 텍스트를 추가한다.");

//[다수의 엘리먼트와 일치하는 셀렉터에 html 추가한다.]
$("div.fillMeIn").html("노드 그룹에 텍스트를 추가한다.");

//[모든 엘리먼트와 일치한다.]
$("*");

//[E 엘리먼트 형제로 바로 다음에 나오는 엘리먼트 F와일치]
$("E+F");

//[E 엘리먼트 형제로 다음에 나오는 엘리먼트 F와일치]
$("E~F");

3. 필터 셀렉터

//[애니메이션이 적용되고 있는 엘리먼트]
$(":animated");

//[모든 버튼을 선택한다.]
$(":button");

//[모든 체크박스를 선택한다.]
$(":checkbox");

//[선택된 체크박스나 라디오 버튼을 선택한다.]
$(":checked");

//[텍스트 foo를 포함 하는 엘리먼트만을 선택한다.]
$(":contains(foo)");

//[비활성된 모든 폼 엘리먼트를 선택한다.]
$(":disabled");

//[활성된 모든 폼 엘리먼트를 선택한다.]
$(":enabled");

//[모든 파일 엘리먼트를 선택한다.]
$(":file");

//[헤더 엘리먼트를 선택한다. <h1>~<h6>]
$(":header");

//[감춰진 엘리먼트를 선택한다.]
$(":hidden");

//[폼 이미지를 선택한다.]
$(":image");

//[폼 엘리먼트를 선택한다.(input,select,textarea,button)]
$(":input");

//[필터의 값을 반대로 설정한다.]
$(":not(filter)");

//[빈엘리먼트를 제외하고 텍스트도 포함해서 자식 엘리먼틀 가지는 부모 엘리먼트를 선택한다.]
$(":parent");

//[패스워드 엘리먼트를 선택한다.]
$(":password");

//[라디오 엘리먼트를 선택한다.]
$(":radio");

//[리셋버튼을 선택한다.]
$(":reset");

//[선택된 엘리먼트를 선택한다.]
$(":selected");

//[전송버튼을 선택한다.]
$(":submit");

//[텍스트 엘리먼트 선택한다.(input type=text)]
$(":text");

//[보이는 엘리먼트를 선택한다.]
$(":visible");

폼관련

Anna 안나 — Tue, 17 Jan 2012 12:32:16 +0900

1.checkbox

-체크박스 체크 여부 : $('#checkboxid').is(":checked") //체크되었으면 true, 아니면 false를 반환
- 선택된 값 : $("input[name=objname]:checked").val()
- 선택 : $("input[name=objname]").filter("input[value=objvalue]").attr("checked", "checked");
- 해제 : $("input[name=objname]").filter("input[value=objvalue]").attr("checked", "");
- 선택된 갯수: $("input[name=objname]:checkbox:checked").length

2. select box

-value 값 가져오기 : var select_value = $("selectboxid > option:selected").val();
-값 설정 하기 : $("selectboxid > option[value=설정값]").attr("selected", "true");

3.팝업창에서 부모창에 값 셋팅하기.

$(opener.document).find('#sendMailYN').val( "1" );

팝업창에서 부모창의 input 라디오 타입을 검색하면서 값이 2일때 체크해준다.

4. radio 라디오버튼에서 선택된 값을 찾는 방법이다.. 첫번째 방법

     //라디오 버튼의이름이 "rdobtn"인것 중 선택되어진 항목의 값을 가져온다.
   - var selectedValue = $('input:radio[name=rdobtn]:checked').val() ;

또는
   - var selectedValue = $('input:radio[id=rdobtn]:checked').val() ;

두번째 방법

var selectedValue = "";
var radios = $("input:radio"); //타입이 radio인 항목을 찾는다.
for(var i = 0; i < radios.length;i++) //
{
      if(radios[i].checked == true) //라디오 버튼중 선택되어진 항목의 값을 가져온다.
      {
          selectedValue = $(radios[i]).val() ;
      }
}

기초함수

Anna 안나 — Tue, 17 Jan 2012 12:30:29 +0900

1. jQuery함수 $(...)

jQuery 함수 $(...)

jQuery(expression,context)

CSS 셀렉터를 받아 매치된 엘리먼트 집합의 jQuery 객체를 리턴한다.

예제1

div 엘리먼트 안의 모든 p 엘리먼트를 추출하여 테두리를 붙인다.

$("div > p").css("border", "1px solid gray");

예제2

document 첫번째 form 안에 있는 모든 input 태그 타입이 radio 인 것을 추출한다.

$("input:radio", document.forms[0]);

예제3

AJAX 응답으로부터 받은 XML에서 모든 div를 추출한다

$("div", xml.responseXML);

jQuery(html)

예제1

div를 비롯한 콘텐츠를 동적으로 생성하고 body에 추가한다.

$("<div><p>Hello</p></div>").appendTo("body")

예제2

input 요소를 type 요소없이 만들 수 없다.

이것은 Microsoft의 read / write - once 규칙에 따른 것으로, 자세한 내용은 MSDN을 참조한다.

// IE에서 작동하지 않음

$("<input/>").attr("type", "checkbox");

// IE에서 작동

$("<input type='checkbox'/>");

jQuery(elements)

이 함수의 인수는 XML Documents와 Window 개체와 같이 DOM 엘리먼트가 아닌것도 받아들인다.

예제1

body의 배경색을 바꾼다 (css 메서드는 DOM Element에 없는 jQuery개체이다)

$(document.body).css( "background", "black" );

예제2

myForm 내의 모든 엘리먼트를 표시하지 않는다 ( 배열에는 모든 것을 한꺼번에 표시하지 않는 hide 함수는 존재하지 않는다)

$(myForm.elements).hide()

jQuery(callback)

$(document).ready()의 약어

DOM Document로드가 끝난 때 바인딩 해 놓은 함수가 실행된다.

이 함수는 $ (document) ready ()와 같게 동작한다.

이 함수는 기술 적으로는 다른 $ () 함수와 마찬가지로 모두 가능하다, 쓰임새는 없다.

예제1

DOM 준비가 가능하면 작업을 수행한다.

$(function(){

// Document is ready

});

예제2

$별칭을 사용하여 jQuery 코드가 안정적으로 동작하므로 전역 변수에 의지하지 않고 인수 $를 기술하도록한다.

jQuery(function($) {

// Your code using failsafe $ alias here...

});

2. jQuery Object 조작

편집하기

each(callback)

일치한 전체의 Element에 대하여 함수를 실행한다.

이것은 일치하는 Element를 찾을 때 마다 1번씩 매번 함수가 실행되는 것을 의미한다.

함수에서 this 포인터는 각 Element를 의미한다.

예제1

div를 찾아서 color 프로퍼티를 변경한다.

$(document.body).click(function () {
$("div").each(function (i) {
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});

전체소스 : each_1.html

예제2

DOM Element 대신 jQuery 오브젝트를 사용하는 경우 $(this)를 기술

$("span").click(function () {
$("li").each(function(){
$(this).toggleClass("example");
});
});

전체소스: each_2.html

예제3

id가 stop인 div가 발견된 시점에 false를 반환하여 루프를 빠져나온다.

$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});

전체소스: each_3.html

eq(position)

0 부터 length-1 가운데 일치하는 위치에 있는 엘리먼트만 찾아온다.

예제1

P 태그 집합중 위치가 2번째인 Element색상을 바꾼다.

$("p").eq(1).css("color","red")

전체소스: eq_1.html

get()

jQuery 오브젝트가 가지고 있는 Element 전체를 배열 형태로 반환한다.

jQuery 객체가 아니라 DOM Element를 조작하는데 도움이된다.

예제1

div 요소를 get() 배열로 반환한다. 그리고 reverse() 내장함수를 이용하여 배열을 반전 표시한다.

function disp(divs) {
var a = [];
for (var i = 0; i < divs.length; i++) {
a.push(divs[i].innerHTML);
}
$("span").text(a.join(" "));
}
disp( $("div").get().reverse() );

전체소스: get_1.html

get(index)

DOM Element의 집합으로부터 인덱스를 지정해 하나의 Element를 참조한다.

이것에 의해 jQuery 오브젝트일 필요가 없는 케이스로 특정의 DOM Element 그 자체를 조작하는 것이 가능.

예제1

$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
$("span:first").text("Clicked on - " + domEl.tagName);
});

전체소스: get_index_1.html

index(subject)

jQuery 오브젝트 내에서 인수로 지정된 Element 인덱스를 리턴한다.

만약 jQuery 오브젝트 내에 존재하지 않으면 -1을 리턴한다.

예제1

페이지의 div의 인덱스를 리턴한다.

$("div").click(function () {
// this is the dom element clicked
var index = $("div").index(this);
$("span").text("That was div index #" + index);
});

전체소스: index.html

length()

jQuery 오브젝트 Element 수를 유지한다. size 함수와 같은 값을 리턴

예제1

div를 카운팅하고 div를 추가한다.

$(document.body).click(function () {
$(document.body).append($("<div>"));
var n = $("div").length;
$("span").text("There are " + n + " divs." +
"Click to add more.");
}).trigger('click'); // trigger the click to start

전체소스: length.html

[출처] jQuery 함수 $(...)|작성자 하늘호수

http://blog.naver.com/ctlim2?Redirect=Log&logNo=50086952309

jQuery의 기초

Anna 안나 — Tue, 17 Jan 2012 12:29:56 +0900

$(document).ready(function() {

(이곳에 시연하고자 하는 jquery 코드가 들어감.)

});

위의 코드가 jQuery를 시작하는 기본 코드가 됩니다.

Javascript 에서의 window.onload = function() { } ;

부분과 비슷합니다만, 다른점은 자바스크립트의 onload가 모든 이미지들의 로딩이 마쳐야 시연되는 반면에, jQuery는 이미지가 로딩되지 않아도 시연이 됩니다.

페이지가 전부 다운로드 된다음에 실행

$(window).load(function() {
해당 기능
});

HTML이 준비가 되면 실행

$(document).ready(function() {
해당 기능
});

위 코드는 (document).ready를 생략해

$(function() {
해당 기능
});

로도 사용가능합니다.

밑에 그림은 jQuery를 사용하기 위한 기초적인 형식입니다.

실제로 우리가 사용하는 코드는 윗그림의 빨강색 네모안에 들어가게 됩니다.
코드를 쓰시는 분에 따라서는 이렇게 눈에 잘보이게 정리하시지 않고 한줄에 몰아서 쓰시기도 합니다.
(잘 보시면 알겠지만 사실은 명령코드 하나입니다.)

빨강네모안에 들어갈 우리가 사용하는 코드는 밑에 그림과 같은 형식을 가집니다.

위의 코드에서 붉은 색 부분을 선택자(Selector) 라고 합니다. 즉, 구현할 대상에 되는 녀석을 선택하는 것이죠. 사용 방법은 $() 의 괄호안에 대상이 되는 녀석을 선택하는것입니다. jQuery가 좋은것이 선택자 개념이 CSS와 거의 흡사하기 때문에 쉽게 사용할수 있습니다.

유용한 JQUERY site

Anna 안나 — Tue, 17 Jan 2012 12:28:04 +0900

JQUERY 플러그인

Anna 안나 — Tue, 17 Jan 2012 12:27:38 +0900

http://www.trirand.com/blog/?page_id=6

그리드 (*) : 전체 페이징을 하지 않는 Ajax 게시판
http://www.reconstrukt.com/ingrid/example2.html

팬시박스 (**) : 이미지 팝업창에 모달효과 약간의 에니메이션이 들어감.
http://fancy.klade.lv/ (****)

예제 : http://fancy.klade.lv/example

jQuery Lightbox Plugin (balupton edition) (**) : 이미지 모달 팝업
http://www.balupton.com/sandbox/jquery_lightbox/

imagebox : 이미지 모달 팝업
http://www.intelliance.fr/jquery/imagebox/

이미지 회전 : 이미지의 회전이 가능하게 한다.

http://www.piksite.com/mRotate/mRotate.html

jQuery sliding gallery demo : 이미지 애니메이션 슬라이드
http://phplug.net/components/javascript/jquery-gallery.html

이미지 슬라이딩 : 좌 우로 움직임
http://www.maxb.net/scripts/ycodaslider-2.0/include/demo/#10

이미지 공간감 효과 (***) : 여러 이미지를 레이어 겹쳐 놓음으로써 3D 효과를 준다.

http://webdev.stephband.info/parallax.html

디자이너를 위한 jquery (**) : 태그 조작과 에니메이션 효과와 관련된 사이트
http://www.webdesignerwall.com/demo/jquery/(****)

AutoScroll (*) : 컨 트롤 키 누른 채로 mouse 움직였을 때, 자동 스크롤이 가능하게끔
http://jdsharp.us/jQuery/plugins/AutoScroll/demo.php (****)

drag and drop (*) : 드래그 드랍 예제
http://host.sonspring.com/dragdrop/ (***)

JQuery 예제 모음 사이트 (*****)

http://www.ajaxrain.com/tag?tag=jquery

컬럭 Picker (****) : PhotoShop의 색 선택 기능이 가능.
http://www.intelliance.fr/jquery/color_picker/

jQuery MultiSelect (**) : custom 셀렉트 박스, 셀렉트 박스에 체크박스가 추가 되어 여러개를 선택 가능한 박스.
http://abeautifulsite.net/notebook_files/62/demo/jqueryMultiSelect.html

"jQuery checkbox v.1.0.0" demo (**) : custom 디자인 체크박스
http://widowmaker.kiev.ua/checkbox/

jQuery Treeview Plugin Demo (**) : 트리 컨트롤러 1

http://jquery.bassistance.de/treeview/demo/

jQuery File Tree Demo (***) : JQuery 트리 컨트롤로 2
http://abeautifulsite.net/notebook_files/58/demo/

jQuery columnManager plugin (*) : 테이블의 컬럼을 추가 삭제등의 기능 제공
http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html

jQuery AIR (***) : ajax를 이용한 항공 좌석 예약.
http://www.digital-web.com/extras/jquery_crash_course/

Masked Input Plugin (**) : 입력상자에 exel과 같은 서식 적용.
http://digitalbush.com/projects/masked-input-plugin

Watermark Input Plugin (*): 입력상자에 워터마크 표시
http://digitalbush.com/projects/watermark-input-plugin

ClockPick (***): 입력상자에 시간을 선택해서 넣을 수 있다.
http://www.oakcitygraphics.com/jquery/clockpick/trunk/ClockPick.cfm

chart : JQuery를 이용한 차트
http://www.reach1to1.com/sandbox/jquery/jqchart/

달력
http://tedserbinski.com/jcalendar/index.html#demo

3D로테이션 : 글자들이 xy 좌표에서 3D효과로 회전함.
http://www.willjessup.com/sandbox/jquery/rotator/rotator.html

스크롤중 데이터가져오기 :
http://www.webresourcesdepot.com/dnspinger/
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Query Flash Plugin - Basic Example : flash 삽입 플러그인
http://jquery.lukelutman.com/plugins/flash/example-basic.html

jquery combobox demo : custom 콤보박스 ie 7.0으로 보면 깨져나온다.

http://jquery.sanchezsalvador.com/samples/example.htm

scrollable table : 테이블에 스크롤바가 붙어있다-_-;;
http://www.webtoolkit.info/demo/jquery/scrollable/demo.html

accordion-madness
http://www.learningjquery.com/2007/03/accordion-madness

jQuery Multimedia Portfolio
http://www.openstudio.fr/jquery/

체크박스 이동
http://sanisoft-demo.com/jquery/plugins/shiftcheckbox/demo.html

위지윅에디터
http://projects.bundleweb.com.ar/jWYSIWYG/

크랍
http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/#crop

슬라이딩 퍼즐
http://www.bennadel.com/blog/1009-jQuery-Demo-Creating-A-Sliding-Image-Puzzle-Plug-In.htm

날짜픽업
http://kelvinluck.com/assets/jquery/datePicker/v2/demo/

레이팅
http://php.scripts.psu.edu/rja171/widgets/rating.php

JQuery Curvy Corners Demo page
http://blue-anvil.com/jquerycurvycorners/test.html

줌
http://www.mind-projects.it/blog/jqzoom_v10

LavaLamp for jQuery lovers!
http://gmarwaha.com/blog/?cat=8

컬러
http://www.jnathanson.com/blog/client/jquery/heatcolor/index.cfm#examples

비쥬얼 쿼리
http://visualjquery.com/1.1.2.html

jQuery "Highlight" Demo
http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html

Hot Key Testing
http://jshotkeys.googlepages.com/test-static.html

accordion menu
http://www.i-marco.nl/weblog/jquery-accordion-menu-redux/

jQuery easyThumb
http://www.hverven.net/div/easyThumb/

갤러리
http://www.flyerstop.ca/ui/apps/gallery_advanced/

thickbox
http://jquery.com/demo/thickbox/

마우스휠 플러그인
http://www.ogonek.net/mousewheel/jquery-demo.html
http://www.ogonek.net/mousewheel/demo.html

휴먼메세지
http://binarybonsai.com/misc/humanmsg/

jQuery - LinkedSelect
http://www.msxhost.com/jquery/linked-selects/json/

jQuery » iFrame Sizing
http://host.sonspring.com/iframe/

jQuery for Designers - Ajax Form Validation Example
http://jqueryfordesigners.com/demo/ajax-validation.php

폰트크기 바꾸기
http://www.lllcolor.com/jQuery/demo/demo01b.html

dimension
http://brandonaaron.net/docs/dimensions/#code-samples

portlet 데모
http://www.rymix.co.uk/jquery/d15/sortables2.html

FX데모
http://magalies.net/downloads/Jquery/Interface%20examples/demos/ifx.html#pulsate-fx

오픈윈도우
http://magalies.net/downloads/Jquery/Interface%20examples/demos/windows.html

JQuery tricks: using Greybox + form plugin for a modal dialog box
http://corky.net/dotan/programming/jquery.dialog/dialog-demo.html

FaceBoox style autosuggest with jQuery
http://web2ajax.fr/examples/facebook_searchengine/

Auto-Growing Textarea Demo
http://www.aclevercookie.com/demos/autogrow_textarea.html

jQuery Helper for Komodo Media CSS Star Rater (Redux)
http://www.m3nt0r.de/devel/raterDemo/

에디터
http://avidansoft.com/dsrte/

jQuery Keyboard Navigation Plugin
http://amountaintop.com/project/keynav/

텝
http://jqueryfordesigners.com/demo/tabs.html

jQuery AccessKey Demo
http://methvin.com/jquery/jq-access.html

Semi-transparent rollover effect using jQuery
http://coderseye.com/files/demos/pngrollover/index.html

Revealing Photo Slider
http://css-tricks.com/examples/RevealingPhotoSlider/

Simple jQuery form validation
http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html

after callback demo
http://jsdesigning.com/gal/gal.php?top=10&id_pic=9&id_album=2

갤러리
http://devkick.com/lab/galleria/demo_01.htm#img/ladybug.jpg

SWF Upload
http://www.alexandremagno.net/blog/wp-content/uploads/swfupload/index.htm

jQuery gradient - Visual Test
http://brandonaaron.net/jquery/plugins/gradient/test/

tEditable :: In place table editing for jQuery
http://joshhundley.com/teditable/index.html

sort
http://interface.eyecon.ro/demos/sort.html

http://geeknation.blinklist.com/tag/jQuery/

http://www.nalanta.com/node/7
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html
http://www.blinklist.com/mungkey/jquery/

http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx

http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps

http://www.trirand.com/blog/?page_id=5

http://people.iola.dk/olau/flot/examples/selection.html(챠 트 선택)

http://www.mootools.net/dragdrop/

http://plugins.jquery.com/project/Plugins/category/21

http://mohamedshaiful.googlepages.com/add_remove_form.htm

http://www.chazzuka.com/Portofolio/

http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.sortable.html

http://hooney.net/code/2007/08/UnobtrusiveTabNav/tabNav03.html

http://jqueryfordesigners.com/coda-slider-effect/

http://benjaminsterling.com/jquery-jqgalview-photo-gallery/

http://www.mind-projects.it/blog/jqzoom_v10

http://www.reach1to1.com/sandbox/jquery/jqchart/

http://jquery.lukelutman.com/plugins/flash/

http://leandrovieira.com/projects/jquery/lightbox/

http://marcgrabanski.com/code/ui-datepicker/

http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html

http://www.webdesignerwall.com/demo/jquery/

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

http://jquery.glyphix.com/

http://www.balupton.com/sandbox/jquery_lightbox/

챠트
http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/

http://sorgalla.com/projects/jcarousel/

http://designreviver.com/tutorials/jquery-examples-horizontal-accordion

http://host.sonspring.com/portlets/

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

http://www.digital-web.com/extras/jquery_crash_course/

http://www.blinklist.com/codearachnid/jquery/

http://drupalmodules.com/module/image-enhanced-scaling

http://www.ajaxdaddy.com/store

http://www.ajaxrain.com/tag.php?tag=image&page=2(모음)
http://www.spicyexpress.net/general/jquerry-at-it-best- downloadable-jquerry-plugins-and-widgets-for-you-2/(예제모음)

http://mike.teczno.com/giant/pan/(pan)

출처 : 웃대가리블로그 - [추천]Jquery 링크 모음 - http://urin79.com/zb/utdae/783559
by 디케

http://defle.nayana.com/board/view.php?bbs_code=goodsite&ss[cat]=122&bd_num=1042

Lazy Load Plugin for jQuery

Anna 안나 — Mon, 16 Jan 2012 14:50:01 +0900

Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Lazy Load is inspired by YUI ImageLoader Utility by Matt Mlinac.

For those in hurry there are several demo pages available: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images and load images using timeout.

When checking the demos clear browser cache between each request. You can check what is actually loaded with developers console (Chrome and Safari), FireBug (Firefox) or HTTPHeaders (IE).

How to Use?

Lazy Load depends on jQuery. Include them both in end of your HTML code:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

You must alter your HTML code. Put the place holder image into src attribute. Demo pages use 1×1 pixel grey gif. URL of the real image must be put into data-original attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

then in your code do:

$("img.lazy").lazyload();

This causes all images of class lazy to be lazy loaded. See the basic options demo.

Fallback for Non JavaScript Browsers

Practically everyone has JavaScript enabled. However there are cases when you want to show the real images even if request come from client which does not support JavaScript. ~~Google crawlers are one good candidate.~~ Google crawlers do not execute JavaScript but also seem to ignore noscript content. To degrade gracefully when JavaScript is not enabled you can include the real image tag inside <noscript> block.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

To prevent both placeholder and the real image showing at the same time hide the place holder with css.

.lazy {
  display: none;
}

For JavaScript enabled browser you must enable displaying the placeholders when documents loads. This can be done at the same time when initializing the plugin.

$("img.lazy").show().lazyload();

All this is optional can should be done only if you want the plugin to degrade gracefully.

Setting Sensitivity

By default images are loaded when they appear on the screen. If you want images to load earlier you can set threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it is visible.

$("img.lazy").lazyload({ threshold : 200 });

Event to Trigger Loading

Event can be any jQuery event such as click or mouseover. You can also use your own custom events such as sporty or foobar. Default is to wait until user scrolls down and image appears on the window. To prevent all images to load until their placeholder image is clicked you could do:

$("img.lazy").lazyload({ 
    event : "click"
});

Using Effects

By default plugin waits for image to fully load and calls show() to show it. You can use any effect you want. Following code uses fadeIn effect. Check how it works at effect demo page.

$("img.lazy").lazyload({ 
    effect : "fadeIn"
});

Images Inside Container

You can also use plugin for images inside scrolling container, such as div with scrollbar. Just pass the container as jQuery object. There is a demo for horizontal and vertical container.

#container {
    height: 600px;
    overflow: scroll;
}

$("img.lazy").lazyload({         
     container: $("#container")
});

When Images Are Not Sequential

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit option.

$("img.lazy").lazyload({ 
    failure_limit : 10
});

Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high.

Delayed Loading of Images

Not exactly feature of Lazy Load but it is also possible to delay loading of images. Following code waits for page to finish loading (not only HTML but also any visible images). Five seconds after page is finished, below the fold images are loaded automatically. You can also check the delayed loading demo.

$(function() {          
    $("img:below-the-fold").lazyload({
        event : "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
});

Load Invisible Images

There are cases when you have invisible images. For example when using plugin in together with a large filterable list of items that can have their visibility state changed dynamically. To improve performance Lazy Load ignores hidden images by default. If you want to load hidden images set skip_invisible to false.

$("img.lazy").lazyload({ 
    skip_invisible : false
});

Download

Latest source or minified. Plugin has been tested with Safari 5.1, Firefox 3.6, Firefox 7.0, Firefox 8.0 on OSX and Firefox 3.0, Chrome 14 and IE 8 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad.

When asking a question please include an URL to example page where the problem occurs. If you have longer code examples please use pastie.org

jquery.lazyload.js

jquery.lazyload.min.js

http://www.appelsiini.net/projects/lazyload

jQuery Fade In Scroll To Top Button With Smooth Scroll For Blogger

Anna 안나 — Mon, 16 Jan 2012 14:45:11 +0900

In October last year i wrote a post with a Floating back to top button.Since then i have wanted to cover a more up to date back to top modern button.The popular option when it comes to scroll top buttons is to use jQuery for two reasons.Firstly with jQuery you can have the button hidden until the page is scrolled, secondly when clicked the page scrolls smoothly to the top instead of the direct jump a regular link would have.So that's exactly what i have in this tutorial.We will add a button that will only be visible when the reader starts scrolling and then when they click it the page slowly scrolls up easing into position at the top.For the button itself we us a sprite to create a hover effect sprites also keep the page load time down.

I recently started a blog in which i want to list the Best Design and Blogging posts, codes, tutorials and resources.On that blog i have the back to top button we cover in this post so we will use that as the demo.When you land on the page start to scroll and you will see the button in the bottom right corner.

Looks and Works great lets add it to your blog.Credits to Matt Verone, Wordpress users can use the plugin here.

Smooth Scroll jQuery Back To Top Button

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;

right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

Note - To move the button to the left of your blog change right:10px; to left:10px; .

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

Note - If you have previously added jQuery script to your template you can leave out the line in green.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/

$().UItoTop({ easingType: 'easeOutQuart' });

});
</script>

Step 6. Save your template.

That's it, You can check out your new back to top button after you Comment on and Share this post ! Make sure to check out more of our jQuery Tutorials and Blogger Tips.

Drop Your Comments And Questions Below.

http://www.spiceupyourblog.com/2011/07/jquery-scroll-to-top-button-smooth.html

Sticky Sidebar jQuery plugin

Anna 안나 — Mon, 16 Jan 2012 14:44:40 +0900

This jQuery plugin allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll. The plugin uses absolute positioning calculated from the original css and offset to either the closest positioned parent or to the document. The plugin has been tested in IE6-9 and all the other major browsers.

Get the code from Github

The JavaScript (jQuery)

Below is the code for the plugin, to download the code with examples use the link above.

(function($){



  var settings = {
        speed: 350 //animation duration
      , easing: "linear" //use easing plugin for more options
      , padding: 10
      , constrain: false
    }
    , $window = $(window)
    , stickyboxes = []
    , methods = {



          init:function(opts){
            settings = $.extend(settings,opts);
            return this.each(function () {
              var $this = $(this);
              setPosition($this);
              stickyboxes[stickyboxes.length] = $this;
              moveIntoView();
            });
          }



        , remove:function(){
            return this.each(function () {
              var sticky = this;
              $.each(stickyboxes, function (i, $sb) {
                if($sb.get(0) === sticky){
                reset(null, $sb);
                stickyboxes.splice(i, 1);
                return false;
                }
              });
            });
          }



        , destroy: function () {
            $.each(stickyboxes, function (i, $sb) {
              reset(null, $sb);
            });
            stickyboxes=[];
            $window.unbind("scroll", moveIntoView);
            $window.unbind("resize", reset);
            return this;
          }



      };




  var moveIntoView = function () {
    $.each(stickyboxes, function (i, $sb) {
      var $this = $sb
        , data = $this.data("stickySB");
      if (data) {
        var sTop = $window.scrollTop() - data.offs.top
          , currOffs = $this.offset()
          , origTop = data.orig.offset.top - data.offs.top
          , animTo = origTop;
        //scrolled down out of view
        if (origTop < sTop) {
					//make sure to stop inside parent
          if ((sTop + settings.padding) > data.offs.bottom)
            animTo = data.offs.bottom;
          else animTo = sTop + settings.padding;
        }
        $this
          .stop()
          .animate(
              {top: animTo}
            , settings.speed
            , settings.easing
        );
      }
    });
  }



  var setPosition = function ($sb) {
    if ($sb) {
      var $this = $sb
        , $parent = $this.parent()
        , parentOffs = $parent.offset()
        , currOff = $this.offset()
        , data = $this.data("stickySB");
      if (!data) {
        data = {
            offs: {} // our parents offset
          , orig: { // cache for original css
                top: $this.css("top")
              , left: $this.css("left")
              , position: $this.css("position")
              , marginTop: $this.css("marginTop")
              , marginLeft: $this.css("marginLeft")
              , offset: $this.offset()
            }
        }
      }
      //go up the tree until we find an elem to position from
      while (parentOffs && "top" in parentOffs
        && $parent.css("position") == "static") {
        $parent = $parent.parent();
        parentOffs = $parent.offset();
      }
      if (parentOffs) { // found a postioned ancestor
        var padBtm = parseInt($parent.css("paddingBottom"));
        padBtm = isNaN(padBtm) ? 0 : padBtm;
        data.offs = parentOffs;
        data.offs.bottom = settings.constrain ?
          Math.abs(($parent.innerHeight() - padBtm) - $this.outerHeight()) :
          $(document).height();
      }
      else data.offs = { // went to far set to doc
          top: 0
        , left: 0
        , bottom: $(document).height()
      };
      $this.css({
          position: "absolute"
        , top: Math.floor(currOff.top - data.offs.top) + "px"
        , left: Math.floor(currOff.left - data.offs.left) + "px"
        , margin: 0
        , width: $this.width()
      }).data("stickySB", data);
    }
  }



  var reset = function (ev, $toReset) {
    var stickies = stickyboxes;
    if ($toReset) { // just resetting selected items
      stickies = [$toReset];
    }
    $.each(stickies, function(i, $sb) {
      var data = $sb.data("stickySB");
      if (data) {
        $sb.css({
            position: data.orig.position
          , marginTop: data.orig.marginTop
          , marginLeft: data.orig.marginLeft
          , left: data.orig.left
          , top: data.orig.top
        });
        if (!$toReset) { // just resetting
          setPosition($sb);
          moveIntoView();
        }
      }
    });
  }



  $window.bind("scroll", moveIntoView);
  $window.bind("resize", reset);



  $.fn.stickySidebar = function (method) {



    if (methods[method]) {
      return methods[method].apply(
          this
        , Array.prototype.slice.call(arguments, 1)
      );
    } else if (!method || typeof method == "object") {
      return methods.init.apply(this, arguments);
    }



  }



})(jQuery);

            view raw
            stickysidebar.jquery.js
            This Gist brought to you by GitHub.
          

Usage

The plugin can be used for single or multiple boxes as shown in the examples below

A Single sticky sidebar

<div id="main">
  <h2>Product catalogue</h2>
  <ul id="products">
      [...]
  </ul>
</div>
<div id="side">
   <div id="basket">
     <h3>Your basket</h3>
     <p>Total: <strong>&pound;455.00</strong></p>
     <span id="items">4</span>
   </div>
</div>

For the above snippet of a HTML page we can use the following to enable the product basket as a sticky sidebar with the default options.

$('#basket').stickySidebar();

View example

Multiple sticky boxes

<div id="left">
  <h2>Left column</h2>
  <ol id="navbox" class="stickybox">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ol>
</div>
<div id="middle"></div>
  <div id="right">
    <h2>Right column</h2>
    <div id="basket" class="stickybox">
      <h3>Your basket</h3>
      <p>Total: <strong>&pound;455.00</strong></p>
      <span id="items">4</span>
    </div>
</div>

For the above example we can use the below to set the navbox and basket boxes to both be sticky sidebars with the same options.

$('.stickbox').stickySidebar({speed: 400, padding: 30, constrain: true})

View example

Options

The Sticky Sidebar plugin has four options:

speed – how long the animation of the box should take in milliseconds (default = 250)
easing – what type of easing to use for the animation (default = “linear”)
padding – how many pixels to pad the element from the top of the window (default = 10)
constrain – if true stops sticky scrolling out of parent

Methods

The Sticky Sidebar plugin has two methods:

remove – removes the sticky selected sticky sidebars and resets to original position
destroy – removes and resets all sticky sidebars and removes event listeners

http://www.profilepicture.co.uk/tutorials/sticky-sidebar-jquery-plugin/

jQuery를 이용해 스크롤바 따라다니는 레이어 만들기(IE6,IE7,IE8,크롬,사파리,파폭)

Anna 안나 — Mon, 16 Jan 2012 14:43:09 +0900

영어지만 잘 설명된 글이 있다 : position:fixed for internet explorer

원리 설명이 잘 돼 있는 듯하다.

그리고 관련 토론은 여기서 볼 수 있다 : 떠다니는 레이어, 그 표준은?

아래는 내가 구현한 것이다.

$(document).ready(function(){
    var currentPosition = parseInt($(".float").css("top"));
    $(window).scroll(function() {
        var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
        if(position>600){
            if($.browser.msie && $.browser.version < 7){
                $(".float").stop().animate({"top":position+currentPosition-600+"px"},1000);
            }else{
                $(".float").css({'position':'fixed', 'top':'20px'});
            }
        }else{
            $('.float').attr('style','');
        }
    });
});

위 코드는 어느 정도까지는 fixed돼 있지 않다가 스크롤을 좀 내리면 fixed 시키는 코드다. 이를 위해서 꼭 알아야 할 매서드는 scrollTop() 이다. jQuery의 매서드다.

$(window).scrollTop() : 현재 스크롤바의 위치를 반환한다. 정수값을 반환하게 된다.

$(window).scroll(function(){ /*함수 구현부*/ }) : 이 코드는 웹브라우저가 스크롤될 때 실행할 함수를 써 주는 부분이다. 위에서 보면 알겠지만 모든 함수 구현부가 바로 이 안에 인수로 들어가 있다.

function(){/*함수 구현부*/} 형식의 인수는 익명함수라고 한다. 특별한 함수 이름 없이 즉각 함수를 인자값처럼 넘길 수 있는 방식이다. 자바스크립트의 특징이라고 알고 있다.

위 코드가 jQuery쪽 코드고, HTML 쪽에는

1	`<div` `class="float">나는 떠다니는 레이어</div>`

이런 놈을 넣어 주면 되겠다.

msie 버전 6 이하에서는 position: fixed를 사용할 수 없기 때문에 jQuery의 animate 매서드를 이용해서 처리한다. 1000이라고 써 있는 부분은 동작이 일어나는 시간이다. 1000이 1초다. 이 시간을 늘리면 느리게 움직이고, 줄이면 빠르게 움직이다. 0으로 하면 순간이동을 하는데, 좋지가 않다.

position이 600보다 작을 때는 $('.float').attr('style','') 이라고 코드를 써 놨는데, 요소 스타일을 제거해 버리는 코드다. 그러면 jQuery를 이용해 임의로 매긴 스타일이 모두 사라진다. 단, 이를 위해서는 기본 스타일은 모두 css 파일에 담아 두어야 한다. 그렇지 않으면 기본 스타일로 박아 놓은 것도 함께 날아갈 테니 말이다.

시간이 없어서 친절한 설명을 하지 못해 아쉽다. 하지만 코드를 잘 분석하면 충분히 이해할 수 있을 거라 생각한다.

http://mytory.co.kr/archives/761

설치형 TC에 Ajax 적용해보았다.

Anna 안나 — Mon, 16 Jan 2012 14:41:47 +0900

트윗을 보던 중, 쿠나님이 티스토리 블로그에 아약스를 적용하고 있다는 것을 발견했다.

음..

이란 생각과 함께 바로 가서 구경!

읭..

귀찮아서 하기 싫었던건데 막상 보니까 무진장 하고 싶어졌다. ㅋㅋㅋ

그래서 바로 적용 시도.

일단 몇가지 문제가 있다.

1. SyntaxHighlight와 FootNote 등 BLUEnLIVE 님이 적용해두신 스크립트가 먹지 않는다.
뭐 해결하려면 하겠는데 일단 당장은 귀찮으니 패스.
툴팁은 일단 여기를 참고해보도록 하자..

2. TC용 플러그인은 해당 플러그인을 직접 수정해야한다.

3. 카테고리.. [...]
이.. 이건.. 답이 없는듯;;

텍스트큐브 1.8.4엔 기본적으로 jQuery 1.4가 들어간다.
그러니 scrollTo 파일만 넣도록 하자.

scrollTo.js는 여기에서 받을 수 있다.

아 깜빡한게 있군.
로딩 인디케이터는 여기에서 직접 만들 수 있다.

그리고 아래 소스를 head 태그 안이든 적당한 곳에 넣어둔다.

<!-- deVbug.me Ajax -->
<script type="text/javascript" src="/resources/script/jquery/jquery.scrollTo-1.4.2-min.js"></script>
<script language="javascript">
function LoadPage(url)
{
	if (url == "" || typeof url == "undefined" || url == null) return;

	jQuery.scrollTo( 0, 800, {queue:true} );

	jQuery("#content").html("<center><img src='./ajax-loader.gif'></center>");

	jQuery.get(url, function(data) {
		jQuery('#content').html(jQuery(data).find('#content').html());

		jQuery("div.tagTrail a").click(function() {
			LoadPage(this.href); return false;
		});

		var dest_id = url.substring(url.indexOf("#"));
		jQuery.scrollTo( jQuery(dest_id), 800, {queue:true} );
	});
}
</script>

텍스트큐브나 티스토리나 이런 부분은 거의 같아서 쿠나님의 글과 별반 다를게 없다.

주요 a 태그에 다음 내용을 추가한다.

 onclick="LoadPage(this.href); return false;"

블로그 제목, 상단 메뉴 등과 같은 곳이겠지.

이후 스킨 파일에서 href로 검색해서 나오는 곳을 확인하며 일일히 추가해주면 된다.
특히 새로 올라온 글 부분 등.

Paging 부분은 다음처럼 한다.

<s_paging>
	<div id="paging">
		<a  title="이전" class="" id="prevPage" onclick="LoadPage(this.href); return false;">« Prev </a> :
		<s_paging_rep> <a  class="num" onclick="LoadPage(this.href); return false;"></a> : </s_paging_rep>
		<a  title="다음" class="" id="nextPage" onclick="LoadPage(this.href); return false;">Next »</a> 
	</div>
</s_paging>

역시 다를게 없군.

사이드바에서 검색 부분은 아래처럼 하자.

<!-- 검색 -->
<div id="searchBox">
	<s_search>
		<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { LoadPage('/search/'+this.value); return false; }"/>
		<input value="검색" type="button" onclick="LoadPage('/search/'+document.getElementsByName('')[0].value); return false;" class="submit"/>
	</s_search>
</div>

새로 등록된 댓글, 트랙백 등과 같은 곳에도 똑같이 집어넣으면 알아서 이동하고 스크롤도 된다.

이걸 플러그인 형태로 만들어야 했을텐데 이미 귀찮아서 이따위로 만들어버렸으니.. 떫..

에효 암튼 무엇보다 문법 강조 플러그인이나 제대로 작동하게 조만간 우선 작업해야겠다.
아주 개판으로 나오겠지. ㅠㅠ

아 그리고, 이 외에 수정한 플러그인은, 나같은 경우
FootNote, JP_ArchiveSelectboxTT, MT_Meta_RecentPS_Default 이고..
JP_ShortenEntryContentsTT 는 수정해도 제대로 작동을 안 하네..

http://devbug.me/561

티스토리에 jQuery Ajax를 적용시켜 보았다

Anna 안나 — Mon, 16 Jan 2012 14:40:31 +0900

간단히 말해서 페이지 갱신을 하지 않고 내용 갱신을 하는 것인데 (아니 말이 이상하네) ... 제일 좋은 예제는 http://www.happyfri.com/blog/ 블로그를 참조하시면 됩니다 (사실 이거 때문에 전 끌려서.. 에헤헤)

별도로 소개할 수 있는 내용이 없으니 스샷은 없고, 저도 적용은 더욱 심화하는것보다 이정도에서 끝내려고 합니다(위젯 덕지덕지인 브롤그에 쓰시면 좋을것 같네요). 그런고로, 일반적 스킨에서 적용할 수 있는 적용 방법을 간단히 적어놓고 ... 그렇게 오늘의 삽질, 종료! ~~[절대 학생회의 일존이라던가를 따라하지 않았습니다]~~

1. jQuery 프레임워크 와 scrollTo 확장 플러그인 자바스크립트 파일 및 로딩 시에 쓰일 이미지를 티스토리에 올려봅시다. 귀찮으니까 제가 손수 준비한 파일을 쓰시면........ 되겠지요. (물론 scrollTo의 저작권은 여기에, jQuery의 저작권은 여기에, 로딩 이미지는 여기에 저작권이 있음을 알립니다아)

AJAXTest.rar

2. <head>~</head> 사이의 적당한 곳에 이 코드를 넣습니다.

function loadPage(url) {

$("#content").html("<center><img src='./images/ajax-loader.gif'></center>");

$.scrollTo( $('#content'), 800 );

var dest_url = url.substring(0, url.indexOf("#"));

if (dest_url == "") dest_url = url;

$.get(dest_url, function(data) {

var obj = $(data);

var ihtml = obj.find("#content").html();

$("#content").html(ihtml);

var dest_id = url.substring(url.indexOf("#"));

$.scrollTo( $(dest_id), 800, {queue:true} );

});

}

function loadPage_paging(paging_url) {

var url = paging_url.href;

loadPage(url);

}

</script>

3. 보시면 아시겠지만, loadPage라는 함수를 이용해서 사용이 가능합니다.
(1) 검색 위젯 부분

<s_search>

</s_search>

(2) 최근 포스트 위젯 부분

<a href="[ ##_rctps_rep_link_## ]" onclick="loadPage('[ ##_rctps_rep_link_## ]'); return false;"> [ ##_rctps_rep_title_## ]</a>

＊deVbug님이 내주신 좋은 코드 덕택에 최근 덧글/최근 트랙백 모듈에도 사용가능합니다! 해당 코드는 위에 새로 넣어놓은 상태이고요, deVbug님, 감사합니다~!

(3) 방명록 같은 메뉴 부분

<a href="[ ##_guestbook_link_## ]" onclick="loadPage('[ ##_guestbook_link_## ]'); return false;">guestbook</a>

사용법은 보시면 아시겠지만 간단하게 onclick="loadPage('[이동할 URL]') return false;"이면 된다는 것을 알 수 있습니다.

또, 그리고 만들어 놓은 추가 함수로 이렇게 사용이 가능합니다.
(4) 하단의 페이징 부분

<s_paging>

<s_paging_rep>

<a [ ##_paging_rep_link_## ] onclick='loadPage_paging(this); return false;' class="num"> [ ##_paging_rep_link_num_## ]</a>

</s_paging_rep>

</span>

</div>

</s_paging>

물론 해보고싶으신 분들만 백업 철저히 해놓고 마음대로 하세요.
난 옛날처럼 시간이 남아나지 않으니까 A/S는 직접 보고서 해줄 분들만 해줄꺼에요.

http://kuna.wo.tc/1220

UIScrollView에서 subview의 loading을 lazy하게 만들자

Anna 안나 — Mon, 16 Jan 2012 14:39:01 +0900

이전에 문제가 되었던 UIScrollView에서의 page detecting을 해결하기 위해 구글링 도중에 page의 lazy loading을 고민하는 사람이 많다는 것을 알게 되었다. 이는 지금 나같이 너댓장의 이미지를 로딩하는 데에는 큰 문제가 되지 않지만 수십 수백장의 이미지 혹은 다른 그 어떤 것을 로딩하기 에는 좀 문제가 된다.
원래대로라면 하나의 scrollview에 수십 수백장의 imageview를 addSubview를 이용해 추가하는 것인데 당연히 퍼포먼스나 메모리 관리 측면에서 문제가 안될리 없다. 그래서 많은 image gallery 어플이 하는 방식인 현재 보이는 view와 그 이전/이후의 view만을 로딩하는 lazy loading 방식에 대해 찾아 보다가 stack overflow에서 아래의 sample code를 발견했다.
먼저 interface 부분.

@interface UntitledViewController : UIViewController<UIScrollViewDelegate> {
@private
UIScrollView *_scrollView;
 
NSArray *_objects;
 
UILabel *_detailLabel1;
UILabel *_detailLabel2;
UILabel *_detailLabel3;
}
 
- (void)replaceHiddenLabels;
- (void)displayLabelsAroundIndex:(NSInteger)index;
 
@end

그리고 실제 구현 부분.

@implementation UntitledViewController
 
- (void)dealloc 
{
[_objects release];
[_scrollView release];
[_detailLabel1 release];
[_detailLabel2 release];
[_detailLabel3 release];
[super dealloc];
}
 
- (void)viewDidLoad 
{
[super viewDidLoad];
 
_objects = [[NSArray alloc] initWithObjects:@"first", @"second", @"third", 
@"fourth", @"fifth", @"sixth", @"seventh", @"eight", @"ninth", @"tenth", nil];
 
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 460.0)];
_scrollView.contentSize = CGSizeMake(320.0 * [_objects count], 460.0);
_scrollView.showsVerticalScrollIndicator = NO;
_scrollView.showsHorizontalScrollIndicator = YES;
_scrollView.alwaysBounceHorizontal = YES;
_scrollView.alwaysBounceVertical = NO;
_scrollView.pagingEnabled = YES;
_scrollView.delegate = self;
 
_detailLabel1 = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 460.0)];
_detailLabel1.textAlignment = UITextAlignmentCenter;
_detailLabel1.font = [UIFont boldSystemFontOfSize:30.0];
_detailLabel2 = [[UILabel alloc] initWithFrame:CGRectMake(320.0, 0.0, 320.0, 460.0)];
_detailLabel2.textAlignment = UITextAlignmentCenter;
_detailLabel2.font = [UIFont boldSystemFontOfSize:30.0];
_detailLabel3 = [[UILabel alloc] initWithFrame:CGRectMake(640.0, 0.0, 320.0, 460.0)];
_detailLabel3.textAlignment = UITextAlignmentCenter;
_detailLabel3.font = [UIFont boldSystemFontOfSize:30.0];
 
// We are going to show all the contents of the _objects array
// using only these three UILabel instances, making them jump 
// right and left, replacing them as required:
[_scrollView addSubview:_detailLabel1];
[_scrollView addSubview:_detailLabel2];
[_scrollView addSubview:_detailLabel3];
 
[self.view addSubview:_scrollView];
}
 
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
[_scrollView flashScrollIndicators];
}
 
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[self displayLabelsAroundIndex:0];
}
 
- (void)didReceiveMemoryWarning 
{
// Here you could release the data source, but make sure
// you rebuild it in a lazy-loading way as soon as you need it again...
[super didReceiveMemoryWarning];
}
 
#pragma mark -
#pragma mark UIScrollViewDelegate methods
 
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
// Do some initialization here, before the scroll view starts moving!
}
 
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self replaceHiddenLabels];
}
 
- (void)displayLabelsAroundIndex:(NSInteger)index
{
NSInteger count = [_objects count];
if (index >= 0 && index < count)
{
NSString *text = [_objects objectAtIndex:index];
_detailLabel1.frame = CGRectMake(320.0 * index, 0.0, 320.0, 460.0);
_detailLabel1.text = text;
[_scrollView scrollRectToVisible:CGRectMake(320.0 * index, 0.0, 320.0, 460.0) animated:NO];
 
if (index < (count - 1))
{
text = [_objects objectAtIndex:(index + 1)];
_detailLabel2.frame = CGRectMake(320.0 * (index + 1), 0.0, 320.0, 460.0);
_detailLabel2.text = text;
}
 
if (index > 0)
{
text = [_objects objectAtIndex:(index - 1)];
_detailLabel3.frame = CGRectMake(320.0 * (index - 1), 0.0, 320.0, 460.0);
_detailLabel3.text = text;
}
}
}
 
- (void)replaceHiddenLabels
{
static const double pageWidth = 320.0;
NSInteger currentIndex = ((_scrollView.contentOffset.x - pageWidth) / pageWidth) + 1;
 
UILabel *currentLabel = nil;
UILabel *previousLabel = nil;
UILabel *nextLabel = nil;
 
if (CGRectContainsPoint(_detailLabel1.frame, _scrollView.contentOffset))
{
currentLabel = _detailLabel1;
previousLabel = _detailLabel2;
nextLabel = _detailLabel3;
}
else if (CGRectContainsPoint(_detailLabel2.frame, _scrollView.contentOffset))
{
currentLabel = _detailLabel2;
previousLabel = _detailLabel1;
nextLabel = _detailLabel3;
}
else
{
currentLabel = _detailLabel3;
previousLabel = _detailLabel1;
nextLabel = _detailLabel2;
}
 
currentLabel.frame = CGRectMake(320.0 * currentIndex, 0.0, 320.0, 460.0);
currentLabel.text = [_objects objectAtIndex:currentIndex];
 
// Now move the other ones around
// and set them ready for the next scroll
if (currentIndex < [_objects count] - 1)
{
nextLabel.frame = CGRectMake(320.0 * (currentIndex + 1), 0.0, 320.0, 460.0);
nextLabel.text = [_objects objectAtIndex:(currentIndex + 1)];
}
 
if (currentIndex >= 1)
{
previousLabel.frame = CGRectMake(320.0 * (currentIndex - 1), 0.0, 320.0, 460.0);
previousLabel.text = [_objects objectAtIndex:(currentIndex - 1)];
}
}
 
@end

언더바를 많이 쓰고 대괄호 쓰는 방식이 C 프로그래밍 스타일이라 좀 별로지만 그대로 옮겨왔다. 수정하기 귀찮... 하여간 이 코드를 그대로 갖다 복사해도 동작한다. scrollview에 각각 label을 붙이는 subview를 만들어서 한번에 세개의 view를 로딩하고 스크롤할 때마다 다시 그 다음 것들을 loading하는 방식이다.

그리고 추가로 저 위의 scrollViewDidEndDecelerating 메소드 안에 아래의 코드를 갖다 붙이면 현재 보이는 page를 알아낼 수 있다.

1.int page = floor((_scrollView.contentOffset.x - PAGE_WIDTH / 2) / PAGE_WIDTH) + 1;

http://yangsae.tistory.com/38

jQuery 스크롤 페이징

Anna 안나 — Mon, 16 Jan 2012 14:38:15 +0900

mixsh나 twtkr등에서 스크를 마지막에 가면 자동으로 다음 글들을 불러 오게 하는 자료입니다.
JQUERY로 짜여졌고 간단합니다.

엄청나게 간단하네요....;;;

링크에 실제 배포하는 사이트 남겨 두었습니다.

샘플보기(스크롤해서 내려 보세요) :
http://www.webresourcesdepot.com/dnspinger/

구조설명:

컨텐츠 페이지 구조
<div class="wrdLatest" id=1>content</div>
<div class="wrdLatest" id=2>content</div>
<div id="lastPostsLoader"></div>

로딩중 이미지 보여주는 부분과 실제 데이터 가져오는 부분
function lastPostFunc()
{
$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
$.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),

function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};

스크롤 감지하는 부분
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});

http://dev.dayis.net/17

스크롤 페이징(Scroll Paging, Continuous scrolling pattern)

Anna 안나 — Mon, 16 Jan 2012 14:37:43 +0900

블로그를 한창 할때, 믹시의 스크롤 페이징을 보고서 어떻게 하는 건지 참 많이 궁금해 했던 기억이 납니다.
졸립기도 하고 갑자기 스크롤 페이징이 생각 나서 검색해봤는데 쭌스님의 포스팅과 Raj Gorsia님의 포스팅을 찾게 되었습니다. 스크립트 라이브러리를 사용하지 않는다면 쭌스님의 글을 참고해서 작성하면 되겠고 JQuery를 사용한다면 Raj Gorsia님의 글을 거의 그대로 사용하면 되겠네요.

예전에 제가 감을 잡지 못 했던 부분은 아래 한줄입니다. ㅠ.ㅠ

if ($(window).scrollTop() == $(document).height() - $(window).height()) {
또는
if(content.scrollTop < content.scrollHeight - 500)

이렇게 간단한데 말이죠...

지금은 응용할만한 프로그램을 만들지 않지만 다음에 꼭 활용해서 만들어 보고 싶네요.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JQuery</title>

//<![CDATA[

var pageLoaded = 1; //현재 페이지

$(window).scroll( function() {

if ($(window).scrollTop() == $(document).height() - $(window).height()) {

pageLoaded = pageLoaded + 1;

// ajax를 추가해서 목록을 받아온다

// alert(pageLoaded);

$('#main_content').append(

"main_content"+pageLoaded+"<br><br><br><br><br><br><br><br><br><br><br><br><br>");

}

});

//]]>

</script>

</style>

</head>

<body>

</ul>

</div>

<div id="login_box">login_box</div>

main_content1<br><br><br><br><br><br><br><br><br><br><br><br><br>

main_content2<br><br><br><br><br><br><br><br><br><br><br><br><br>

main_content3<br><br><br><br><br><br><br><br><br><br><br><br><br>

main_content4<br><br><br><br><br><br><br><br><br><br><br><br><br>

main_content5<br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<div id="right_menu">right_menu</div>

</div>

</body>

</html>

참조 1 : 스크롤 페이징(Scroll Paging, Continuous scrolling pattern)
참조 2 : Load Content While Scrolling With jQuery

http://www.rtong.net/1148

WINCE 자료 PMP 프로그램 다운목록 v0.1

Anna 안나 — Sat, 20 Nov 2010 01:40:29 +0900

스크롤압박 주의!

PMP 프로그램 다운목록 v0.1(? 뭔 버젼이냐 갑자기?;;)

음..
아래 모든 링크가 PMP에서 실행 되는 것 입니다만..
아직 모든 링크를 걸지 못했습니다.
몇일 후에 다시 올릴 예정이며 중복은 거의 다 제외 했습니다.
그 때는 더욱더 링크가 늘어나 있겠지요..
열심히 노가다 했는데 설마 덧글이 없는건 아니겠지요?
그리고 내일(은 모르겠지만...)부터 프로그램을 대량 올릴 예정입니다.

================================================

이 게시글(은 피엠피인사이드, 저의 블로그, 맥시안 PMP 카페[arm] 에만 올렸습니다.)은 저가 아는 한도 내에서 PMP에 실행 가능한 프로그램을 전부 올린 그리고 올릴 게시글 입니다.
현재 이 게시글에는 플래시 게임은 추가되지 않았습니다.
퍼가실 때는 게시글에다가 꼭 덧글 부탁드립니다.[이 짓이 할 짓이 아니거든요..;;] // 퍼가실 땐 출처를 남겨주세요..(약 10~11 시간을 투자해서 만든 글입니다..)

먼저 가볍게 미연시 먼저 올리겠습니다.

480x272, 800x480 공용 다운로드

http://daysari.tistory.com/40 <- ARM(QVGA, VGA)
http://www.pempi.co.kr/xe/2193583 <- MIPS(VGA)

http://cafe.naver.com/maxianm1t2/10703 <- 와플용 카논 입니다. qvga 용이며 화질은 떨어지지만 나쁘진 않습니다.(센스오프가 없어서 저는 센스오프만 받음)
http://cafe.naver.com/maxianm1t2/10740 <- 와플용 센스오프 당연 qvga용 이하동문.
http://cafe.naver.com/maxianm1t2/10742 <- 와플용 소레치루 qvga 용 이하동문 입니다.
http://cafe.naver.com/maxianm1t2/11023 <- 와플용 소레치루 bgm 입니다. 알집으로 압축푸세요 7z으로 하니까 용량이 5kb 뜨더군요 --;
http://cafe.naver.com/maxianpmp/118225 <- 와플용 소레치루 se 파일 입니다.
VGA용은 다음에 시간이 되면 저의 블로그에 올리겠습니다..[센스오프는 안 보여서 제외

뭐.. 와플용은 여기까지 입니다.(다른건 죄다 일본어 판 이라.. 뭐;; 다른데 아는곳도 없고..)

다음은 온스크립터.

- 480x272

http://www.pempi.co.kr/xe/8176241 <- Fate stay night Realtanua 1/2
http://www.pempi.co.kr/xe/8176307 <- Fate stay night Realtanua 2/2

http://www.pempi.co.kr/xe/?mid=embed_pds&category=&search_target=title&search_keyword=fate+stay+night <- 페이트 스테이 나이트
포인트 엄청 깨질 예정이 되겠습니다..
먼저 제일 앞에 있는 페이트 스테이 나이트 1-23을 전부 받으세요.
압축을 풀면서 오크주현님의 BGM 파일을 받습니다. 그리고 애니뇌광제님의 .nsa 파일 수정판을 받습니다.
페이트 스테이 나이트, BGM, .nsa 압축 파일을 다 풀었으면 페이트 스테이 나이트 폴더에다가 .nsa 파일과 bgm 파일을 덮어 씌웁니다.
http://www.pempi.co.kr/xe/3415669 <- 그리고 옆의 링크 '타르타르' 님이 수정하신 0.txt 파일을 받고 압축을 풀어 덮어 씌웁니다..[올리는거는 다른분이 해주실거라 믿음 // 퍽퍼퍽... 아악~!!

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&category=&search_target=title&search_keyword=%EB%AF%B8%EC%A6%88%EC%9D%B4%EB%A1%9C<- 미즈이로 + 제일 위의 스크립트도 받으세요.

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&category=&search_target=title&search_keyword=%EC%9B%94%ED%9D%AC <- 월희 - 제일위에 있는 스즈미야님 자료를 받으세요. 3개분량.
└ http://www.pempi.co.kr/xe/8429206 - 월희月姬 아키하 타치에 수정파일

http://www.pempi.co.kr/xe/3421490 <- 월희 plus 입니다.

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&category=&search_target=title&search_keyword=%EA%B0%80%EC%9B%94%EC%8B%AD%EC%95%BC<- 가월십야 - 킴취님꺼와 선예꺼님의 스크립트도 받으세요.

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&category=&search_target=title&search_keyword=%ED%81%AC%EB%A1%9C%EC%8A%A4%EC%B1%84%EB%84%90<- 크로스채널 - 다받으세요.(번역기로 돌린거라.. 영;)

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&category=&search_target=title&search_keyword=%EC%9D%80%EC%83%89 <- 은색 - 저는 엘릭시어님꺼를 받았는데.. 포인트 덜 줄려면 합본판 받는게 났겟죠.(은색 4장 튕김 까지 넣은 것 같습니다.)

http://www.pempi.co.kr/xe/3420743 <- leaves - 이건 용량이 적네요.

http://www.pempi.co.kr/xe/3426954 <- 변함없는 별하늘 입니다.

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&category=&search_target=title&search_keyword=%EB%8F%99%EC%AA%BD <- 달은 동쪽으로 해는 서쪽으로

미연시가 뭐뭐 있었는지 까먹어 가;; 허억.. // 예전에 쓴 글이 참 -ㅅ-;

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&category=&search_target=title&search_keyword=%EB%AC%B8%EC%A0%9C%ED%8E%B8 <- 쓰르라미 울적에 문제편 입니다. - 킴취님 꺼만 받으면 될꺼예요.

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&category=&search_target=title&search_keyword=%ED%95%B4%EB%8B%B5%ED%8E%B8 <- 해답편 - 다 받으세요.

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&category=&search_target=title&search_keyword=%EC%82%AC%EB%82%98%EB%9D%BC%EB%9D%BC<- 사나라라 입니다.

http://www.pempi.co.kr/xe/?_filter=search&mid=embed_pds&search_target=title&search_keyword=anise&page=1&division=-8156254 <- 동급생 2, anise 입니다.

http://www.pempi.co.kr/xe/?mid=embed_pds&category=&search_target=title&search_keyword=%EB%82%98%EB%A5%B4%ED%82%A4%EC%86%8C%EC%8A%A4<- 나르키소스 입니다.[이름이 잘 기억안나다가 드뎌 발견하넹] - 저는 고태형 님꺼를 받았습니다. 절취선 님껀 모름.

http://cafe.naver.com/maxianpmp/186207 <- 온스크립터 1/2(이건 arm만 가능)
http://cafe.naver.com/maxianpmp/186209 <- 온스크립터 2/2
http://www.pempi.co.kr/xe/2192537 <- 온스크립터 arm 오드아이(사용방법 설명이 ㄱ-.. 무슨 소린지 몰라 ㅠㅠ)

http://www.pempi.co.kr/xe/2192129 <- mips netforce
http://www.pempi.co.kr/xe/2192134 <- mips p2

음..
솔직히 미연시야 저가 전에 올린 글이 있으니까 커버가 가능하지만..
이제 프로그램.. 정말 최악이 될 것 같습니다.
과연 얼마나 많은 프로그램이 존재할련지..
지금 부터 가속 페달을 밟아야 할 것 같습니다..

필수

http://www.pempi.co.kr/xe/2184791 - MIPS PPC 호환 DLL(RSP는 받지마세요. // 그냥 있길래..)
http://www.pempi.co.kr/xe/2194588 - MIPS SQLCE v3.0
http://www.pempi.co.kr/xe/2195968 - MIPS .Net Compact Framewrok v3.5
http://daysari.tistory.com/83 - ARM 필수 프로그램(Wince 0.8dll // gapi 4.04 // 닷넷프레임워크 3.5 // d900gxdll(쓰실려면Gapi4.03을 받으세요.)

http://www.pempi.co.kr/xe/2195663 - Microsoft ActiveSync v4.5

공용

프로그램

http://www.pempi.co.kr/xe/2184539 - 불량화소 체크 이미지(480x272)
http://www.pempi.co.kr/xe/2192420 - 불량화소 체크 이미지(800x480)
http://daysari.tistory.com/189 - SMath Studio v0.88
http://daysari.tistory.com/191 - Isilo v5.12_HPC
http://www.pempi.co.kr/xe/2194598 - IsiloX 4.37(PC // 클리핑 프로그램)
http://daysari.tistory.com/99 - Mate On v0.14
http://www.pempi.co.kr/xe/2194319 - PSC(화면캡처 프로그램 // mips라 적혀있지만 arm도 있습니다)
http://www.pempi.co.kr/xe/2195617 - CEbench(arm인지 mips인지.. 아니면 둘다인지;;.. 둘 다 인 것 같아서 일단..)
http://www.pempi.co.kr/xe/2195892 - GSFinder v1.4
http://www.pempi.co.kr/xe/2196090 - ceDic v2.0
http://www.pempi.co.kr/xe/2196037 - WordFlash 2008 Mobile v090208
http://www.pempi.co.kr/xe/7904431 - PMP콩(데모)
http://daysari.tistory.com/139 - Yahoo! Messenger

응용 프로그램

http://manybooks.net/ - 각종 영문 이북 사이트

Power Dic - http://www.pempi.co.kr/xe/2194308 - 법률 용어 사전
└ http://www.pempi.co.kr/xe/2194324 - 컴퓨터 용어 사전

E-book - http://www.pempi.co.kr/xe/2194272 - 무협소설 모음
└ http://www.pempi.co.kr/xe/2194270 - 소설 모음

Final Burn - http://www.pempi.co.kr/xe/2195088 - Dungeons & Dragons Shadows Over Mastara

SmallTweak(한글화) - http://daysari.tistory.com/141
(영문화)└ http://daysari.tistory.com/65

Isilo - http://www.pempi.co.kr/xe/2191114 - Dagobert D. Runes Ed., Dictionary of Philosophy (1942)
     └ http://www.pempi.co.kr/xe/2191101 - 가톨릭 매일미사(무슨 뜻?)
     └ http://www.pempi.co.kr/xe/2191099 - 락 명반 100선(2006.10.31)
     └ http://hotpda.vicp.net/news - 중국 클리핑 주소
     └ http://www.pempi.co.kr/xe/2192451 - 요리 백과
     └ http://www.pempi.co.kr/xe/2194138 - 서울시내 주차장 정보(2007.12.11)
     └ http://www.pempi.co.kr/xe/2192341 - 수도권 연계버스 노선(2007.02.09)

암기왕 - http://www.pempi.co.kr/xe/2192333 - 중국어 회화 301구(병음포함)
      └ http://www.pempi.co.kr/xe/2192330 - 일본어 능력 시험 1급 자료
      └ http://www.pempi.co.kr/xe/2192327 - 미국 20대가 가장 많이 쓰는 언어(2007.02.08)
      └ http://www.pempi.co.kr/xe/2192324 - 고교과정필수 스페인어 단어
      └ http://www.pempi.co.kr/xe/2192445 - 필수 명사, 동사
      └ http://www.pempi.co.kr/xe/2193413 - 한자 1급 ~ 10급
      └ http://www.pempi.co.kr/xe/2193560 - 사자성어 / 고사성어
      └ http://www.pempi.co.kr/xe/2194952 - 히라가나 가타가나
      └ http://www.pempi.co.kr/xe/2195922 - 보카 워크
      └ http://www.pempi.co.kr/xe/2194949 - 해커스 토플 표제어-뜻-동의어-반의어
      └ http://www.pempi.co.kr/xe/2194946 - MMK 해커스 Voca 표제어-예문-동의어
      └ http://www.pempi.co.kr/xe/2195575 - 보카, 토익, 천자문, 한자 1~10급, 행정법
      └ http://www.pempi.co.kr/xe/2195833 - 상식퀴즈
      └ http://www.pempi.co.kr/xe/2195830 - 한자 관련 모음
      └ http://www.pempi.co.kr/xe/2195827 - 컴퓨터 관련 모음
      └ http://www.pempi.co.kr/xe/2195821 - 일본어 관련 모음
      └ http://www.pempi.co.kr/xe/2195824 - 중국어 관련 모음
      └ http://www.pempi.co.kr/xe/2195824 - 영어 관련 모음

게임

http://www.pempi.co.kr/xe/2184870 - GameBoy Advance Emulator
http://cafe.naver.com/v5user/31335 - Pocket General(아마도)
http://daysari.tistory.com/77 - Doom Legacy(vga)

게임 응용 프로그램

모프기어 - http://www.pempi.co.kr/xe/2186144 - FIFA 98 // 알라딘
        └ http://www.pempi.co.kr/xe/2186120 - 슈퍼마리오3 // 어메이징 테니스
        └ http://www.pempi.co.kr/xe/2186091 - Romancing Saga // 보글보글 Old & New
        └ http://www.pempi.co.kr/xe/2185787 - 마리오 카트
        └ http://www.pempi.co.kr/xe/2187308 - 농구 // Joe Mac(?)
        └ http://www.pempi.co.kr/xe/2187287 - Final Fighter 3 // FIFA 98
        └ http://www.pempi.co.kr/xe/2187272 - Zero 4 Champ // 슈퍼마리오 월드
        └ http://www.pempi.co.kr/xe/2187248 - 슈퍼마리오 월드 2 요쉬 // 피구왕 통키
        └ http://www.pempi.co.kr/xe/2187533 - 원더보이
        └ http://www.pempi.co.kr/xe/2187483 - 소닉 2
        └ http://www.pempi.co.kr/xe/2189945 - 기기괴계 // 바둑 // 슈퍼 오프로드
        └ http://www.pempi.co.kr/xe/2190492 - 파이널 판타지 어드밴스
        └ http://www.pempi.co.kr/xe/2190960 - 파이널 판타지 6
        └ http://www.pempi.co.kr/xe/2191158 - 테일즈 오브 더 월드 나라키리 던전 2
        └ http://www.pempi.co.kr/xe/2191139 - 슈퍼로봇대전 OG 2
        └ http://www.pempi.co.kr/xe/2191721 - PCE 모음 25개
        └ http://www.pempi.co.kr/xe/2191653 - 제니스 23개, nes 39개
        └ http://www.pempi.co.kr/xe/2191948 - 태권도
        └ http://www.pempi.co.kr/xe/2192307 - 위닝 일레븐 사커 // 테트리스 월드
        └ http://www.pempi.co.kr/xe/2192304 - 역전 재판 1, 2
        └ http://www.pempi.co.kr/xe/2192301 - 악마성 캐슬바니아 1, 2 // 원피스
        └ http://www.pempi.co.kr/xe/2192298 - 우에키의 법칙 // 스페셜 포스
        └ http://www.pempi.co.kr/xe/2192295 - 목장 이야기 - 미네랄 타운의 친구들 // 별의 카비 거울의 대미궁
        └ http://www.pempi.co.kr/xe/2192292 - 드릴러 // 메탈슬러그 어드벤스
        └ http://www.pempi.co.kr/xe/2192289 - 디지몬 배틀 스피릿 // 나루토 최강닌자대결
        └ http://www.pempi.co.kr/xe/2193827 - Dr_Sudoku(스도쿠)
        └ http://www.pempi.co.kr/xe/2193824 - 전설의 오우거 배틀 // 택틱스오우거(일어) // 로맨싱사가 2
        └ http://www.pempi.co.kr/xe/2193784 - 포켓몬스터 골드
        └ http://www.pempi.co.kr/xe/2194544 - 포켓몬스터 루비
        └ http://www.pempi.co.kr/xe/2194541 - 포켓몬스터 사파이어
        └ http://www.pempi.co.kr/xe/2194553 - 포켓몬스터 리프그린
        └ http://www.pempi.co.kr/xe/2194376 - 배틀시티
        └ http://www.pempi.co.kr/xe/2194373 - 갤러그
        └ http://www.pempi.co.kr/xe/2194370 - 엑스리온
        └ http://www.pempi.co.kr/xe/2194398 - 원피스 고잉 베이스볼
        └ http://www.pempi.co.kr/xe/2195205 - YS 1~5

└ http://www.pempi.co.kr/xe/2194988 - 삼국지 영걸전

Pocket Dos - http://www.pempi.co.kr/xe/2193792 - 삼국지 영걸전

Snes(모프기어도 가능) - http://www.pempi.co.kr/xe/2191828 - 모음 27개
└ http://www.pempi.co.kr/xe/2191770 - 모음 41개

ScummVM - http://www.pempi.co.kr/xe/2186628 - 원숭이 섬의 비밀 2
       └ http://www.pempi.co.kr/xe/2186810 - The Dig 3(압축 3개 파일)
          http://www.pempi.co.kr/xe/2186808 - The Dig 2
          http://www.pempi.co.kr/xe/2186795 - The Dig 1
       └ http://www.pempi.co.kr/xe/2192460 - ScummVM 0.40(arm) + 원숭이섬의 비밀 1&2

MIPS(제목을 꼭 보세요. // mips프로그램이 호환 되는 것과 안되는 것이 있습니다. 즉, 어떤기종에 다른 기종프로그램이 되는 것도 있고 안되는 것도 있다는 뜻.)

RSP Peace : Force Edition
http://cafe.naver.com/net4s2/44151 <- Netforce 1, 2
http://cafe.naver.com/q5q5q5/75102 <- Q5, P5

Windows CE System

http://www.pempi.co.kr/xe/2196106 - M43 XP화
http://www.pempi.co.kr/xe/2194454 - M43 XP 블랙에디션?
http://www.pempi.co.kr/xe/2194678 - M43 XP 핑크버젼
http://cafe.naver.com/net4s2/43171 - Netforce 1, 2 XP
http://www.pempi.co.kr/xe/2194534 - Q5 제어판 확장

프로그램

학습

게임

ARM(arm은 대부분 호환 서로 되므로,,..)

Windows CE System

http://cafe.naver.com/upop/8656 - UPOP XP화
http://cafe.naver.com/upop/8666 - UPOP XP 종료
http://cafe.naver.com/upop/8401 - UPOP 뮤직 플레이어 아이콘 수정
http://cafe.naver.com/upop/8402 - UPOP 무비 플레이어 아이콘 수정
http://cafe.naver.com/v5user/35506 - V5 XP화 v1.0.0.3
http://cafe.naver.com/v5user/33307 - V5 모든 플레이어 아이콘 수정 v1.08

프로그램

학습

게임

http://www.pempi.co.kr/xe/wince_pds/8447885