본문 바로가기

프로그래밍/JavaScript27

Web에서 App실행하는 Javascript iOS용 run MyApp 안드로이드 용 2012. 6. 15.
셀렉트 박스 사이의 항목이동 및 순서변경 좌측 항목 A B C D 맨위 위 아래 맨아래 삭제 우측 항목 A B C D 맨위 위 아래 맨아래 삭제 좌측으로 우측으로 2012. 2. 9.
순서변경 스크립트 첫번째 두번째 세번째 네번째 다섯번째 2012. 2. 9.
jquery.validator 정리 출처:http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=72358 수리도랑님 jquery.validator Option 정리 debug 기본값: false 디버그 할 수 있도록 입력값이 유효해도 submit 하지 않는다 $(".selector").validate({ debug: true }) submitHandler 폼이 submit 될때 마지막으로 뭔가 할 수 있도록 핸들을 넘겨준다. $(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } }) invalidHandler 입력값이 잘못된 상태에서 submit 할때 자체처리하기전 사용자에게 핸.. 2012. 1. 27.
이미지 파일첨부시 업로드 이미지 미리보기 (IE8, Firefox 3) IE8에서 이미지 업로드시 기존의 돌아다니는 소스들은 이미지 미리보기 기능이 동작하지 않았다 IE8에서는 file의 경로(obj.value)를 가져오면 실제 클라이언트의 경로대신 보안상의 이유로 'fakepath'라는 경로를 반환한다. 그래서 플래시업로드를 이용하면 가능한 방법들이 많다. (ex. http://code.google.com/p/swfupload/) 그러나 플래시를 이용하지 않고 방법이 없을까 하고 구글링 중에 찾은 포스팅이 있었다. 소스를 보니 IE8에서는 브라우저 클립보드를 이용해서 클라이언트경로를 가져오는 것이다 ! 근데 클립보드를 사용하려면 클립보드를 엑세스한다는 창이 뜬다. 그래서 좀 더 괜찮은 방법이 없나 생각해서 좀 바꿔보았다. SyntaxHighlighter에서 doctype과.. 2011. 5. 20.
[스크립트] Prototype + jQuery + Sly 를 적절히 섞어 쓰기 Prototype, jQuery는 뭐 다들 아실거고, Sly는 셀렉터 엔젠 입니다. 속도가 ㅎㄷㄷ~ 하게 빠르고, Prototype이나 jQuery에 물려서 쓸 수 있습니다. 그런데 jQuery에는 이미 나름 빠른 셀렉터 엔진이 탑재되어 있습니다. 따라서 굳이 jQuery의 셀렉터 엔진을 Sly로 쓸 이유는 없습니다. 반면에 Prototype은 불만중의 하나가 셀렉터 엔진의 성능인지라 Prototype의 셀렉터 엔진으로 Sly를 사용하도록 하면 불여우에서는 대략 십여배 정도의 향상이 있습니다. 일단, Prototype + jQuery를 동시에 쓸 수 있도록 하기 이런 순서로 불러온 다음, 끝 났습니다. Prototype을 쓸 경우엔 그냥 $를 쓰면 되고, jQuery를 쓰려면 $대신 $J를 쓰면 되겠습니.. 2010. 11. 9.
체크 박스나 라디오 버튼의 모두 선택/해제 스크립트 체크박스나 라디오버튼에 대해 , 혹은 혼합하여 사용할 수 있는 모두선택, 해제 스크립트 라디오버튼 체크박스-1 체크박스-2 모두선택 | 모두해제 받는쪽은... 2010. 4. 24.
자바 스크립트 에러 막기 function catchError() { return true; } window.onerror = catchError; 흐흐흐 허무하지요? 너무 간단한데 저렇게 하면 자바스크립트의 모든 에러 출력을 막는다는군요. http://iescripts.org/view-scripts-203p1.htm 근데 에러 메세지를 막을 필요가 있나요? 새해 복 많이들 받으시고 즐프하세요 출처 : PHPSCHOOL 2010. 4. 24.
아쿠아 메세지 박스 아쿠아표 메세지 박스입니다. window.alert 창을 대신하기 위하여 DHTML 을 이용하여 메세지 박스를 대신합니다. window.alert 창과 다른 점은 좀 더 이쁘게 (-_-) 표현이 가능하다는 것과 alert 창의 경우 "확인" 버튼만 사용할 수 있는 반면, 여러개의 버튼을 사용할 수 있다는 점 -_-????? 뭐 그거 말고는 없는거 같네요. 그래도 나름 열심히 만들었습니다. 지원 브라우저 : IE 6.0 higher, FF 2.0 higher 제 생각이지만 IE 5.5 도 되지 않을까 싶은뎁쇼.... --;;; 출처 : http://www.xmiz.net/project/aquamsgBox/index.php 2010. 4. 24.
바코드 라이터 바코드 생성 스크립트 출처 : http://www.xmiz.net/project/barcode/barcode.php 2010. 4. 24.
[함수] 이 페이지를 벗어나면 작성된 내용은 저장되지 않습니다. 글 작성 후 저장하지 않고, 브라우저 새로고침, 닫기 또는 다른 페이지로 이동시 주의 메시지를 주는 간단한 스크립트입니다. 예제에서는 subject, message, poster 입력 항목을 확인합니다. ---------------------------------------------- 나창호@Creative Web Engineering 출처 : PHPSCHOOL 2010. 4. 24.
[펌][스크립트] AJAX 자동검색을 간단히 구현해 주는 javascript library 취미삼아 수년간 ASP, PHP, JSP 등등을 공부해 오면서... javascript, DOM... 이런건 무시하고 살았는데... AJAX 땜에 어쩔 수 없이... 덮어 놨던 공부를 하게 되었네요. 자동검색 기능 만들다가 탄력 받아서... javascript 한 줄로 AJAX를 활용한 여러가지 기능이 작동되도록 해 보았습니다. AJAX 입문 한달만에 만든 졸작이지만... 감히 용기를 내어 공개해 봅니다. 쓸만하다... 싶으신 분은... 얼마든지 자유롭게 사용하세요. 참고로... Toshirou Takahashi씨의 jslb_ajax050_c.js가 수정없이 그대로 포함되어 있구요... 자동검색 기능 중 상당부분은 www.kmle.co.kr의 livesearch.js를 참조하였습니다. (원래 소스는 ht.. 2010. 4. 24.
[펌][스크립트] 롤링배너객체 Rolling ------------------------------------- Config ------------------------------------- var myRolling = new Rolling(appendElement,width,height,방향[0-좌,1-우,2-상,3-하],스크롤픽셀,호출주기,딜레이); myRolling.box.innerHTML = ""; myRolling.box.innerHTML += "1"; myRolling.box.innerHTML += "2"; myRolling.box.innerHTML += "3"; myRolling.box.innerHTML += "4"; myRolling.Init(); //객체초기화 myRolling.Run(); //객체실행 ---------------.. 2010. 4. 24.
[스크립트] 펌} 스크롤되는 테이블.. http://www.imaputz.com/cssStuff/bigFourVersion.html# 보통 헤더부분과 리스트 부분을 따로 테이블로 구성해서 스크롤 시키는데 이걸 응용하면 하나의 통 테이블로 따로 컬럼의 사이즈를 두번일하는 일이 없을듯합니다. 원리는 thead 와 tbody 를 css 로 컨트롤 하는거네욘.. 그럼 모두 즐겜.. 출처 : PHPSCHOOL 2010. 4. 24.
[스크립트] 드레그 & 드롭이 되는 메뉴 트리 이걸로 관리자쪽 메뉴트리 다 만들었습니다. 드레그 & 드롭이 되기때문에 메뉴 이동이 매우 편리합니다. ^^; 오픈소스라 맘껏 이용해도 됩니다. API : http://www.dhtmlgoodies.com/index.html?whichScript=drag-drop-folder-tree 이동은 드레그 & 드롭하면 되고.. 삭제는 메뉴에 오른쪽 버튼을 누르면 DELETE 또는 RENAME을 할 수 있습니다. 링크1 : 소스자료 링크2 : 데모 참고로 자스 스크립트가 테이블안에 있으면 IE에서는 오류납니다. 테이블이나 DIV 밖으로 빼십시오. 특정트리는 Nodrag Nodelete NoRename 속성을 추가할 수도 있습니다. 출처 : PHPSCHOOL 2010. 4. 24.
[본문스크랩] JQuery *출처 : Standard Magazine Forum ( http://forum.standardmag.org/viewtopic.php?id=1152) 물론 javascript library를 너무 믿고 과용하면 안된다는 우려의 소리도 들립니다만, 잘 사용하면 작업의 효율성도 높이고 또 웹 브라우저들 간의 호환성 걱정을 덜어내면서 사용자들의 사용성도 같이 올릴 수 있는 좋은 도구라고 생각합니다.수 많은 여러 javascript library들 중에 제가 가장 마음에 들어하는 라이브러리로는 jQuery를 들 수 있습니다.여러 잡다한 기능들로 너무 비대하지도 않고 핵심 기능들을 잘 갖추고 있는 라이브러리라고 생각됩니다. 물론 다른 필요한 기능들도 plugins 형태도 선택적으로 추가할 수도 있고, 또 만.. 2010. 4. 24.
[본문스크랩] jQuery - New Wave Javascript 2007/3/5 Ver 0.1 송치형(scroco@naver.com) Ajax가 인기를 얻으면서 수많은 Ajax, Javascript 라이브러리들이 생겨났다. 이제 이들을 하나하나 비교해보는 것조차 버거울 지경이다. 나도 몇 달 전부터 Ajax 프로그래밍을 하고 있는데 전에는 Rails를 사용했기 때문에 기본적으로 Prototype/Scriptaculous를 이용하게 되었다. 그런데 최근 Grails로 포팅 작업을 하게 되면서 과연 Prototype과 Scriptaculous를 계속 사용해야 하는지에 대한 의문이 들기 시작했다. 그래서 다음과같은 라이브러리들을 검토해 보았다. 1. Prototype/Scriptaculous 2. jQuery 3. YUI 4. Dojo 5. GWT 그리고 '안정성', '기.. 2010. 4. 24.
Prototy Api 도움말 도움말 형식으로 된 Prototype Api 메뉴얼 이다 영문이긴 하지만 프로토 타입을 사용해서 작업할 일이 있다면 유용할듯 하다. 2010. 4. 24.
이미지 업로드 전 클라이언트 경로를 통한 미리보기 IE 7.0 이상의 버젼과 FireFox 3.0 이상의 버젼에서는 파일 업로드시 이미지 미리보기 스크립트를 이전과 같이 짜면 하나도 보이지 않는다. 물론 서버에 업로드 된 이미지 경로를 따서 보여주는 방식도 있지만 클라이언트의 JavaScript 만으로 해결하고자 하는 나같은 사람도 있기때문에 구글링을 열심히 하고 노하우를 축적하여 함수를 만들어내게 되었다. IE 8.0 의 경우를 포함해봤는데, objFile.Value 값이 'C:\fakepath\파일경로' 이므로 클립보드를 이용한 편법을 쓴다. 귀찮은점 한가지로 페이지 로딩한번에 한번씩 '클립보드 엑세스를 허용하시겠습니까?' 라고 물어온다. 귀찮지 않게 쓰려면 제어판 > 인터넷 옵션 > 보안 > 사용자 지정 수준 > 스크립팅 > 프로그램 클립보드 액세.. 2009. 6. 4.
OpenLayers OpenLayers는 브라우저에서 지도데이터를 표시하기 위한 순수 자바스크립트 라이브러리입니다. http://www.openlayers.org/ OGC 웹 표준도 준수하여 개발해 놓았구요..(WMS, WFS, WMS, SLD, GML,....등) 전세계적으로 많이 활용하는 웹기반 GIS 프레임웍입니다. 구굴맵, 버추얼 어스, 야후맵등도 손쉽게 이용할수 있습니다. 두말 하면 잔소리 ^^;; 예제를 보시면 이해하기 쉬울겁니다. - 전체예제http://www.openlayers.org/dev/examples/ - OpenLayers를 활용하여 구글맵 사용예http://openlayers.org/dev/examples/google-reproject.html 이미지맵 서버만 있다면 OpenLayers만으로 클라이.. 2009. 5. 16.
scriptX - 프린트제어 출력이 잘 되십니까? =============================================================================== 다음은 MeadCo 사에서 제공하는 ScriptX 에 대한 보다 더 자세한 설명입니다. =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- ASP나 자바스크립트로는 이러한 웹브라우저의 인쇄기능 설정을 변경할 수 없습니다. 사용할수 있는것이라고는 오직 여러분들이 잘 아시는 window.print(); 밖에 없습니다. ASP나 자바스크립 트 같은 스크립트 언어로는 윈도우 API를 사용할수 없기 때문이죠. 따라서 할수 있.. 2008. 10. 9.
[기술문서] prototype.js 레퍼런스(?) 도움말형식(chm), PDF자료 Prototype.chm prototype-151-api.pdf 스쿨에서는 아직 제가 못 본거 같아 자료를 올립니다. prototype.js 를 이용하여 개발하시는 학우들에게 도움이 되었으면 합니다. 영문이며 1.5.1 버전입니다. - 추가 2008. 3. 11 - 실행시 페이지가 나오지 않으면 오른쪽 마우스버튼->속성->보안해제 를 해주시면 되겠습니다. ㅡㅡ; 출처 : PHPSCHOOL 2008. 10. 7.
[펌][스크립트] 롤링배너객체 Rolling ------------------------------------- Config ------------------------------------- var myRolling = new Rolling(appendElement,width,height,방향[0-좌,1-우,2-상,3-하],스크롤픽셀,호출주기,딜레이); myRolling.box.innerHTML = ""; myRolling.box.innerHTML += "1"; myRolling.box.innerHTML += "2"; myRolling.box.innerHTML += "3"; myRolling.box.innerHTML += "4"; myRolling.Init(); //객체초기화 myRolling.Run(); //객체실행 ---------------.. 2008. 7. 1.
Prototy Api 도움말 도움말 형식으로 된 Prototype Api 메뉴얼 이다 영문이긴 하지만 프로토 타입을 사용해서 작업할 일이 있다면 유용할듯 하다. 2008. 6. 27.