아... 역시 별건 아니고..
클라이언트중 하나가 아우스 오른쪽 버튼이랑 키보드 복사 등등을 막아 컨텐츠를 복사하는것을 막아 달래서..
그거 쉽게 뚫려서 효과 없는데... 하다가 jquery에 비슷한 플러그인 있나 보다가 없어서 이리저리 뒤져보다가 재미난 것들을 두가지를 발견했다.

첫째는 마우스 오른쪽 버튼 감지 하는 플러그인.
둘째는 키보드 단축키 감지 하는 플러그인.

이 둘을 조합하면 먼가 되겠다 싶어서.. 해봤는데 잘된다.. 물론 jquery랑 위 두개의 플러그인을 불러 들여야 하지만 쓸만허다..

  1. $(document).ready( function() {   
  2.   //no mouse right button   
  3.   $("html").rightClick(function(e){}).noContext();   
  4.   //no key   
  5.   $(document).bind('keydown''ctrl+a'function(){return false;}).bind('keydown''ctrl+c'function(){return false;});   
  6.   //no drag   
  7.   $(document).mousedown(function(){$(document).mousemove(function(e){return false;});});   
  8. });  


드래그 금지도 해볼까 싶다가 관련 플러그인도 없고.. 드래그만 되면 머하나? 해서 그냥 뒀다.. 사실 드래그 해서 바탕화면에 놓기라든지, 메뉴를 이용한 저장이라던지.. 하려면 하겠지만 서두... 귀찮아서 안하는 사람도 많을거 같고..
 이거 때문에 jquery랑 플러그인 두개를 써야 한다는게 좀 그렇지만.. 아무튼 쓸만..

부탁 받은 사이트는 이렇게 그냥 다 함께 써버린다.. jquery는 덩치가 크니까 따로 불러서.. 복사해서 걍써도 잘될것이다..
 
  1. /*mouseR button***************************************************************/  
  2. if(jQuery) (function(){$.extend($.fn, {rightClick: function(handler) {$(this).each( function() {$(this).mousedown( function(e) {var evt = e;$(this).mouseup( function() {$(this).unbind('mouseup');if( evt.button == 2 ) {handler.call( $(this), evt );return false;} else {return true;}});});$(this)[0].oncontextmenu = function() {return false;}});return $(this);},rightMouseDown: function(handler) {$(this).each( function() {$(this).mousedown( function(e) {if( e.button == 2 ) {handler.call( $(this), e );return false;} else {return true;}});$(this)[0].oncontextmenu = function() {return false;}});return $(this);},rightMouseUp: function(handler) {$(this).each( function() {$(this).mouseup( function(e) {if( e.button == 2 ) {handler.call( $(this), e );return false;} else {return true;}});$(this)[0].oncontextmenu = function() {return false;}});return $(this);},noContext: function() {$(this).each( function() {$(this)[0].oncontextmenu = function() {return false;}});return $(this);}});})(jQuery);   
  3. /*****************************************************************************/  
  4.   
  5. /*hotkey**********************************************************************/  
  6. (function(jQuery){jQuery.fn.__bind__=jQuery.fn.bind;jQuery.fn.__unbind__=jQuery.fn.unbind;jQuery.fn.__find__=jQuery.fn.find;var hotkeys={version:'0.7.9',override:/keypress|keydown|keyup/g,triggersMap:{},specialKeys:{27:'esc',9:'tab',32:'space',13:'return',8:'backspace',145:'scroll',20:'capslock',144:'numlock',19:'pause',45:'insert',36:'home',46:'del',35:'end',33:'pageup',34:'pagedown',37:'left',38:'up',39:'right',40:'down',109:'-',112:'f1',113:'f2',114:'f3',115:'f4',116:'f5',117:'f6',118:'f7',119:'f8',120:'f9',121:'f10',122:'f11',123:'f12',191:'/'},shiftNums:{"`":"~","1":"!","2":"@","3":"#","4":"$","5":"%","6":"^","7":"&","8":"*","9":"(","0":")","-":"_","=":"+",";":":","'":"\"",",":"<",".":">","/":"?","\\":"|"},newTrigger:function(type,combi,callback){var result={};result[type]={};result[type][combi]={cb:callback,disableInInput:false};return result;}};hotkeys.specialKeys=jQuery.extend(hotkeys.specialKeys,{96:'0',97:'1',98:'2',99:'3',100:'4',101:'5',102:'6',103:'7',104:'8',105:'9',106:'*',107:'+',109:'-',110:'.',111:'/'});jQuery.fn.find=function(selector){this.query=selector;return jQuery.fn.__find__.apply(this,arguments);};jQuery.fn.unbind=function(type,combi,fn){if(jQuery.isFunction(combi)){fn=combi;combi=null;}   
  7. if(combi&&typeof combi==='string'){var selectorId=((this.prevObject&&this.prevObject.query)||(this[0].id&&this[0].id)||this[0]).toString();var hkTypes=type.split(' ');for(var x=0;x<hkTypes.length;x++){delete hotkeys.triggersMap[selectorId][hkTypes[x]][combi];}}   
  8. return this.__unbind__(type,fn);};jQuery.fn.bind=function(type,data,fn){var handle=type.match(hotkeys.override);if(jQuery.isFunction(data)||!handle){return this.__bind__(type,data,fn);}   
  9. else{var result=null,pass2jq=jQuery.trim(type.replace(hotkeys.override,''));if(pass2jq){result=this.__bind__(pass2jq,data,fn);}   
  10. if(typeof data==="string"){data={'combi':data};}   
  11. if(data.combi){for(var x=0;x<handle.length;x++){var eventType=handle[x];var combi=data.combi.toLowerCase(),trigger=hotkeys.newTrigger(eventType,combi,fn),selectorId=((this.prevObject&&this.prevObject.query)||(this[0].id&&this[0].id)||this[0]).toString();trigger[eventType][combi].disableInInput=data.disableInInput;if(!hotkeys.triggersMap[selectorId]){hotkeys.triggersMap[selectorId]=trigger;}   
  12. else if(!hotkeys.triggersMap[selectorId][eventType]){hotkeys.triggersMap[selectorId][eventType]=trigger[eventType];}   
  13. var mapPoint=hotkeys.triggersMap[selectorId][eventType][combi];if(!mapPoint){hotkeys.triggersMap[selectorId][eventType][combi]=[trigger[eventType][combi]];}   
  14. else if(mapPoint.constructor!==Array){hotkeys.triggersMap[selectorId][eventType][combi]=[mapPoint];}   
  15. else{hotkeys.triggersMap[selectorId][eventType][combi][mapPoint.length]=trigger[eventType][combi];}   
  16. this.each(function(){var jqElem=jQuery(this);if(jqElem.attr('hkId')&&jqElem.attr('hkId')!==selectorId){selectorId=jqElem.attr('hkId')+";"+selectorId;}   
  17. jqElem.attr('hkId',selectorId);});result=this.__bind__(handle.join(' '),data,hotkeys.handler)}}   
  18. return result;}};hotkeys.findElement=function(elem){if(!jQuery(elem).attr('hkId')){if(jQuery.browser.opera||jQuery.browser.safari){while(!jQuery(elem).attr('hkId')&&elem.parentNode){elem=elem.parentNode;}}}   
  19. return elem;};hotkeys.handler=function(event){var target=hotkeys.findElement(event.currentTarget),jTarget=jQuery(target),ids=jTarget.attr('hkId');if(ids){ids=ids.split(';');var code=event.which,type=event.type,special=hotkeys.specialKeys[code],character=!special&&String.fromCharCode(code).toLowerCase(),shift=event.shiftKey,ctrl=event.ctrlKey,alt=event.altKey||event.originalEvent.altKey,mapPoint=null;for(var x=0;x<ids.length;x++){if(hotkeys.triggersMap[ids[x]][type]){mapPoint=hotkeys.triggersMap[ids[x]][type];break;}}   
  20. if(mapPoint){var trigger;if(!shift&&!ctrl&&!alt){trigger=mapPoint[special]||(character&&mapPoint[character]);}   
  21. else{var modif='';if(alt)modif+='alt+';if(ctrl)modif+='ctrl+';if(shift)modif+='shift+';trigger=mapPoint[modif+special];if(!trigger){if(character){trigger=mapPoint[modif+character]||mapPoint[modif+hotkeys.shiftNums[character]]||(modif==='shift+'&&mapPoint[hotkeys.shiftNums[character]]);}}}   
  22. if(trigger){var result=false;for(var x=0;x<trigger.length;x++){if(trigger[x].disableInInput){var elem=jQuery(event.target);if(jTarget.is("input")||jTarget.is("textarea")||jTarget.is("select")||elem.is("input")||elem.is("textarea")||elem.is("select")){return true;}}   
  23. result=result||trigger[x].cb.apply(this,[event]);}   
  24. return result;}}}};window.hotkeys=hotkeys;return jQuery;})(jQuery);   
  25. /*****************************************************************************/  
  26.   
  27. $(document).ready( function() {   
  28.   //no mouse right button   
  29.   $("html").rightClick(function(e){}).noContext();   
  30.   //no key   
  31.   $(document).bind('keydown''ctrl+a'function(){return false;}).bind('keydown''ctrl+c'function(){return false;});   
  32.   //no drag   
  33.   $(document).mousedown(function(){$(document).mousemove(function(e){return false;});});   
  34. });  
 
2009/10/27 드래그 금지기능 추가..
사실 기존 이벤트로는 금방 뚫려서 시도 해보지도 않았었는데 jquery이벤트로 처리 하니까 안풀리더라... 한줄 추가 했을뿐인데 말이지..
요거 잼나는데.. 조만간 플러그인 두개 없애 버보리고 통합된기능으로 새도해 볼까 싶다..
그리고 브라우저별로 문제가 있는데..
IE 6, 7, 8 : 마우스 O, 키보드 O, 드래그 O,  모두 잘된다..
Chrome     : 마우스 O, 키보드 O, 드래그 O,  모두 잘된다..
Firefox    : 마우스 O, 키보드 O, 드래그 X, 드래그 방지 기능 안된다..
Safari     : 마우스 O, 키보드 O, 드래그 O,  모두 잘된다..
Opera      : 마우스 X,  키보드 X, 드래그 X,  모든기능 안된다.(아무튼 오페라.. 별나..)

yesClick이나 Spell,IEToy 그리스몽키로도 아직은 못푼다 ㅋㅋ
혹여 이 스크립트를 사용한 곳을 발견한다면 오페라로.. ㅎㅎ

** 2009/12/21
간혹 드래그 금지 기능과 플래시로 드롭다운 메뉴를 만들었을때 상성이 좋지 못한 결과를 가져올때가 있습니다. 그런 경우 드래그 금지는 주석 처리 하고 사용하세요..  그래그 금지 해제 원하는 결과는 얻을 수 있었습니다.





출처 : http://blog.bits.kr/127
신고

댓글을 달아 주세요

Javascript - Jquery 링크모음

Posted by 비회원 프로그래밍/jQuery : 2010.10.18 11:43


[jquery 관련 링크모음]

메뉴얼
http://j2k.naver.com/j2k_frame.php/korean/semooh.jp/jquery/api/events/keydown/fn/

jQuery Grid Plugin
http://www.trirand.com/blog/?page_id=6 (*******)

팬시박스
http://fancy.klade.lv/ (****)

디자이너를 위한 jquery
http://www.webdesignerwall.com/demo/jquery/(****)

그리드
http://www.reconstrukt.com/ingrid/example2.html

http://crepitus.com/misc/ext/tree.html(*****)


AutoScroll
http://jdsharp.us/jQuery/plugins/AutoScroll/demo.php (****)


drag and drop
http://host.sonspring.com/dragdrop/ (***)


http://www.mootools.net/ (자바스크립트 프레임워크)


two PostgreSQL DB의 구조를 비교
http://pgdiff.sourceforge.net/


 테이블 td하이라이팅
http://cssglobe.com/lab/tablecloth/


JQuery메뉴얼
http://docs.jquery.com/Tutorials

 

http://www.ajaxrain.com/tag.php?tag=image&page=1(예제모음 ****)

 

 
일본 자바스크립트
http://www.skuare.net/test/index.html

plain text + edit
http://snipplr.com/view/3147/rollover-images-with-jquery/


지도 하이라이트
http://drupal.org/project/jq_maphilight

단계별 입력(5단계)
http://worcesterwideweb.com/jquery/wizard/

점수 레이팅
http://sandbox.wilstuckey.com/jquery-ratings/

jquery리소스
http://speckyboy.com/2008/07/21/20-amazing-jquery-plugins-and-65-excellent-jquery-resources/


형준님(하위항목까지 dnd)
http://www.bernardopadua.com/nestedSortables/test/widget/
 

 
판매/재고/주문/배달 인터넷 재고관리프로그램
http://www.greenpc.co.kr/sales01/first.html
 

 
체크박스트리(트리메뉴 속에 체크박스 있음)
http://www.blueshoes.org/_bsJavascript/components/tree/examples/example3.html
http://www.blueshoes.org/en/javascript/multilevelselector/
 
폼항목관리
http://www.phpform.org/formbuilder/index.php
http://www.formfields.com/FORMgenArea/FORMgenLite/FORMgen3_0/


 

자동빌더
http://www.scriptcase.net/siteen/home/home.php?rand=8560f8280d329781&rand=2b32008adebb55b5
[ScriptCase 비밀번호] admin/admin
 

 


컬럭 Picker
http://www.intelliance.fr/jquery/color_picker/


jQuery MultiSelect
http://abeautifulsite.net/notebook_files/62/demo/jqueryMultiSelect.html


"jQuery checkbox v.1.0.0" demo
http://widowmaker.kiev.ua/checkbox/

 

jQuery Treeview Plugin Demo
http://jquery.bassistance.de/treeview/demo/

 

jQuery columnManager plugin
http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html

 


Example: Demo of jQuery fadeToggle plugin in action
http://yelotofu.com/labs/fade-toggle/

 


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


Masked Input Plugin
http://digitalbush.com/projects/masked-input-plugin


Watermark Input Plugin
http://digitalbush.com/projects/watermark-input-plugin

 

PHP & JQuery Photo Upload and Crop - DEMO
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

 

jCarousel
http://www.gmarwaha.com/jquery/jcarousellite/index.php

 



 

jquery.xslTransform  Perform browser-based XSL transformations on the fly.
http://jquery.glyphix.com/


clueTip : A jQuery Plugin
http://examples.learningjquery.com/62/demo/


jQuery sliding gallery demo
http://phplug.net/components/javascript/jquery-gallery.html

 

ClockPick
http://www.oakcitygraphics.com/jquery/clockpick/trunk/ClockPick.cfm

 

jQuery File Tree Demo
http://abeautifulsite.net/notebook_files/58/demo/

 

jQuery Lightbox Plugin (balupton edition)
http://www.balupton.com/sandbox/jquery_lightbox/


imagebox
http://www.intelliance.fr/jquery/imagebox/


phpImageCloud jquery example.
http://phpimagecloud.sourceforge.net/examples/jquery/


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


슬라이드컨텐츠
http://thizzdesigns.110mb.com/coda/index.html#1

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

 

3D로테이션
http://www.willjessup.com/sandbox/jquery/rotator/rotator.html


그리드
http://checkyourroster.com/testing/jQuery%20grid%20demo.htm

 

이모티콘
http://packed.it/JSmile/demo/


prettyPhoto a jQuery lightbox clone
http://www.no-margin-for-errors.com/projects/prettyPhoto/


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


이미지 슬라이딩
http://www.maxb.net/scripts/ycodaslider-2.0/include/demo/#10


Query Flash Plugin - Basic Example
http://jquery.lukelutman.com/plugins/flash/example-basic.html


메뉴애니메이션
http://www.getintothis.com/pub/projects/rb_menu/

 

Tagging Demo
http://remysharp.com/wp-content/uploads/2007/12/tagging.php

 

JQuery Select Box
http://www.brainfault.com/demo/selectbox/?field1=ddd&myselectbox=3


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


그리드
http://reconstrukt.com/ingrid/example1.html

 

jQuery Autocomplete Mod
http://www.pengoworks.com/workshop/jquery/autocomplete.htm


Select combobox below and type in your text.
http://stuff.rajchel.pl/jec/


Select Combo Plugin
http://lasso.pro/selectCombo/


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
 

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

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

 


비쥬얼 쿼리(jquery도움말)
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 - 3단콤보
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데모- jquery의 다양한 이동
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

 
매우유용한 10개의 jquery플러그인
http://www.nalanta.com/node/7


하이라이트와 Plain Text를왔다갔다.
http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps


jquery 그리드 예제
http://www.trirand.com/blog/?page_id=5

 
웹디자인 포트폴리오
http://www.chazzuka.com/Portofolio/



5개를 두고 이동하기
http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.sortable.html

 
jQuery Coda Slider
http://jqueryfordesigners.com/coda-slider-effect/


이미지 줌
http://benjaminsterling.com/jquery-jqgalview-photo-gallery/ (jquery)
http://www.flashimagegallery.com/pics/artwork/ (플래시)


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


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


플래시무비 플러그인
http://jquery.lukelutman.com/plugins/flash/


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


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



37개의 jquery플러그인
http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.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



jquery.xslTransform - XSLT / 탭 / 디버그
http://jquery.glyphix.com/



light-box
http://www.balupton.com/sandbox/jquery_lightbox/


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


캐로셀(jquery)
http://sorgalla.com/projects/jcarousel/


아코디언메뉴
http://designreviver.com/tutorials/jquery-examples-horizontal-accordion



3*3에서의 위치이동(jquery)
http://host.sonspring.com/portlets/


jQuery Tutorials for Designers - 디자이너를 위한 jquery 튜토리얼
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/



비행기예약 인터페이스
http://www.digital-web.com/extras/jquery_crash_course/

 


드루팔모듈
http://drupalmodules.com/module/image-enhanced-scaling


드루팔 - 오픈소스 CMS
Drupal.org is the official website of Drupal, an open source content management platform.
http://drupal.org/

ajax관련 도서모음
http://www.ajaxdaddy.com/store

 

모든 자바스크립트 예제모음
http://www.ajaxrain.com/tag.php?tag=image&page=2(모음)

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

jquery예제모음
http://www.spicyexpress.net/general/jquerry-at-it-best-downloadable-jquerry-plugins-and-widgets-for-you-2/(예제모음)




출처 : http://ysksoft.textcube.com/2
신고

댓글을 달아 주세요


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


샘플에는 타겟 지정 시
  $('a[@rel*=lightbox]').lightBox({fixedNavigation:true});

이런 형태로 지정하게 되어있는데 위와같이 하게되면

jquery 특정버전 이후로는 셀렉터에 약간 차이가 있어 오류가 발생하게 된다.

갤러리 화 시킬 이미지의 rel 값 잡은것을 attr("rel","lightbox") 로 옵션을 잡거나

class를 lightbox 형태로 줘서 상단에서 맞게끔 셀렉트 해주면 정상적으로 사용가능함.

좋쿤



lightbox 기존건 prototype을 사용해서 jquery와는 같이 쓸수가 없었는데

jquery용으로 나온 lightbox가 있긴 하다

근데 단점은 2008년이후로 업데이트 한것이 없어서

최신버전 jquery1.4.2 에선 제대로 적용이 되질 않고

초창기 jquery1.2.3 에서만 적용이 가능하다.


신고

댓글을 달아 주세요

  1. 2010.10.14 11:52 신고 손님입니다.  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 jquery 검색도중 방문하게 되었습니다.
    위에서 언급하신 jquery lightbox plugin는 1.4.2버전에서도 사용가능 합니다. ^^;
    혹시나 다른 분들이 보시고 오해하실까 해서 댓글 남깁니다~

    • BlogIcon 제부도소년 2010.10.14 17:51 신고  댓글주소  수정/삭제

      제가 테스트 하기로는 오류가 났었는데
      제가 작업한 소스상에 문제가 있었나보네요..
      혹시 나중에 방문 하시게 되면
      참고 가능한 주소나 소스 알려주시면 감사하겠습니다
      수고하세여~

input type=image ,text ,password 를 별도로 style 지정 하는법

웹표준에 맞춰 사이트를 진행하다보니 드자이너선생님이 css를

img               { border-spacing:0px;border-style:none;padding:0px; border:0 none; vertical-align:middle; }

저런식으로 이미지 태그 전체에 지정하다보니

input type=image 도 ie에서는 img 태그로 인식했는지... 스타일이 먹어버려서 곤란했었다

그래서 지식신과 구글신을 뒤져가며 찾아낸 결과

style 에서

input[type=image] , input[type="image"] , input:image , input.image 등 별별게 많이 나왔지만

영문사이트를 찾아보니

ie에서 input[type=image]  이속성은 적용이 되지않는다고 했다

쿨하게 포기하고 jquery 로 작업한후 phpschool에 물어봤더니.. 아래와같은 답변이 나왔다.


처리방법은 2가지정도로 볼수 있는데

1.jquery 를 이용한 방법
일단 쉽고 빠르다.

<script type="text/javascript" src="../Anyjs/jquery-1.4.js"></script>
<script>
 $(function(){
  $("input:image").css("vertical-align","middle");
 });
</script>

input image selector 를 찾아 css로 v-align 만 지정해줬다.


2.style 옵션 중 expression 를 활용
input{vertical-align:expression((this.type=="image")? 'middle' : ''); }

type==image  true 인 경우 middle  아니면 '' 을 준것인데
둘다 빠르게 적용 가능하다.



신고

댓글을 달아 주세요

방금 일하다 짠 소슨데

전체체크 클릭시 확인을 누르면 해당 라인이 전체 선택되고

다시 한번 클릭하고 확인을 누르면 해당라인이 전체 체크해제 된다.

라인이 아래와 같이 일렬로 되어있는 출석부나, 납부내역 같은 걸 사용할때 유용하게 쓰일득.

script로 해도 충분히 가능한건데..
jquery의 selector 사용에 익숙해져보려고 억지로 짜맞춘ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

input[name='all_chk_month'] 는 input 타입 중 name 값이 all_chk_month 인것을 말하는것이고

$(this).attr("checked") 은 클릭한것의 속성값 중 checked 값을 검사하는건데

아래와 같이 하게되면
if($(this).attr("checked") ){    --> 이부분에서 checked == true 인거냐고 자동적으로 해석하게 된다.
 //결과
}

var frm=$(this).val();    는 내가 전체체크 대상의 value 값을 해당라인 폼 이름값으로 잡아놔서 frm으로 잡은거고

$("."+frm).attr("checked","");    는 나머지 쩌리 체크박스들의 class 를 폼이름으로 잡았기 때문에

해당 전체체크박스에 속해있는 하부 체크박스들 중 class가 폼이름과 같은것만 checked를 false 로 만들어주는것임.



<script>
 $(document).ready(function(){
  $("input[name='all_chk_month']").click(function(){
   var frm=$(this).val();

   if($(this).attr("checked")){
    if(confirm("확인을 누르면 해당라인이\n전체 선택 됩니다.")){
     $("."+frm).attr("checked","checked");
    }else{
     $(this).attr("checked","");
    }
    //alert($(this).val()+' is checked');
   }else{
    if(confirm("확인을 누르면 해당라인이\n선택 취소 됩니다.")){
     $("."+frm).attr("checked","");
    }else{
     $(this).attr("checked","checked");
    }
   }
  });
 });
</script>



      <form name="edit_frm_<?=$i?>" action="in_list_excute.php?<?=$code_var?>" method="post">
      <input type="hidden" name="exe_code" value="edit_ok">
      <input type="hidden" name="no" value="<?=$row_list[idx]?>">
       <tr height="30" bgcolor="<?=$bgcolor?>">
      <td align="center" valign="middle">
       <?=$name?>
       <input type="checkbox" name="all_chk_month" value="edit_frm_<?=$i?>">
      </td>
       <?for($j=1;$j<=12;$j++){?>
        <td align="center" valign="middle">
        <?=$total_month_span[$j]?>
         <input type="checkbox" name="month<?=$j?>" value="Y" <?=$total_month_chk[$j]?> class="edit_frm_<?=$i?>">
         <!--
         <?=$total_month[$j]?>
         -->
        <?=$end_span?></td>
       <?}?>
      <td align="center" valign="middle">
       <input type="image" src="../images/button/modify.gif"></a>
       <a href="javascript:del_function('<?=$code_var?>', <?=$idx?>, <?=$page?>)"><img src="../images/button/delete.gif"></a>
      </td>
       </tr>
      </form>

신고

댓글을 달아 주세요


우선 jQuery 의 기능들 중 each , append , appendTo , html , hide , size , eq(0) 의 문법사용을 볼것이다.


jQuery는 우선 상단 jQuery 플러그인 삽입
<
SCRIPT type="text/javascript" src="../jquery/jquery-1.4.2.min.js">
</script>


이후
<script language="javascript">
$(function(){
  실행문구
});
와 같은형태로 구성된다.

1. TD 클릭하면 숨기기

   $("td").click(function(){
    $(this).hide();
   }) 

 <table border="1">
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
  <tr>
   <td>클릭하면 사라짐</td>
  </tr>
 </table>

위에서 셀렉트를 할 공간은 $("") 이곳인데
td 가 아닌 css에서 쓰이는 #id 나 .class 명을 적어도 똑같이 적용이 된다.
여기서 말하는 this는 클릭한 것에대한 값이 되며
jQuery 내 존재하는 hide() 펑션에 의해 숨겨지게 된다.


2.전체 p태그를 jq 배열에 담아서 $(jq[배열위치])로 해당배열 위치 찾아서 alert 함

   var jq=$("p");
   alert($(jq[1]).html());

jq 안에 p태그들을 배열로 넣어준다.
이후 jq의 [1]번째 배열의 내용을 alert 해줌.
여기서 html 은 예를들어

  <p>제품1 </p>
  <p>제품2 </p>

위와 같은경우 2번째 p 태그 안의 내용 ( 제품2 )만 출력해준다.


3.body 엘레먼트 내에 해당내용 입력함 - 맨 뒤쪽에 입력됨. 동일한 태그명(아래의 body)가 있는경우 모든 body에 삽입됨

   $("<div><p>Hello,World!</p></div>").appendTo("body");

 <BODY>
testestestsetest
 </BODY>
appendTo 태그는 선택한 body값의 끝부분에 앞에 입력된 내용을 넣어준다.


4. p태그 내의 html 들을 result 안에 넣어서 alert 시킨것임  
주의)var로 생성된 것의 경우 appendTo 가 먹지않음. append 로 할것

   var result="";
   $("p").each(function(){
    result+=$(this).html();
    alert(result);
   })
   $(result).appendTo("#result");    //1
   $("#result").append(result);       //2

  <p>제품1 </p>
  <p>제품2 </p>
 <div id="result"></div>

적용해보면 1번의경우 내용이 먹질않는다..
아무래도 var로 생성한것은 적용이 되지않는것으로 보임.
append 는 appendTo 와 반대로
값을 넣어줄 공간을 지정 후 내용을 입력하면 들어가게 된다.

each는 위와같은 형태로 사용해야 하며 result+=$(this).html(); 이 부분은
맨위에 설정된 p 태그를 this로 html() 을 내용으로 보면됨.

5.each 를 이용한 셀렉트 한것 중 몇번째 배열인지 확인하는법

   var result="";
   var i=0;
   $("p").each(function(i,find){
    result+=$(find).html()+": "+(i+1)+"번째 element\n";
   });
   alert(result);

  <p>제품1 </p>
  <p>제품2 </p>

위에서 i는 자동증가하는 숫자값이 되며
find는 this 개념으로 생각..
result 에서 실제 뿌려질때에는
제품1: 1번째 element\n
제품2: 2번째 element\n
이런 형태로 출력되게 된다.

6.현재페이지에 해당 element가 몇개 있는지 확인할때

   alert("div내에 있는 input 태그의 갯수는 "+$("div input").size()+"개 입니다.");

 <div id="list_box">
  <span>제품리스트</span>
  <p>제품1 </p>
  <p>제품2 </p>
 </div>

 <div id="button_box">
  <input type="button" id="up_click_button" value="올리기">
  <input type="button" id="down_click_button" value="내리기">
 </div>

$("div input") 은 div 내의 input 으로 생각을 하면 된다.
그 후의 .size() 를 통하여 총 몇개의 배열을 받았는지 뿌려주게 되며
결과값은
div내에 있는 input 태그의 갯수는 2개 입니다.
와 같이 뿌려지게 된다.


7.$("element").eq(위치)로 해당 element내의 eq번째 배열을 select


   $("#up_click_button").click(function(){   
    $("#write_box p").eq(0).appendTo("#list_box");
   })
   $("#down_click_button").click(function(){   
    $("#list_box p").eq(0).appendTo("#write_box");
   })

 <div id="list_box">
  <span>제품리스트</span>
  <p>제품1 </p>
  <p>제품2 </p>
 </div>

 <div id="button_box">
  <input type="button" id="up_click_button" value="올리기">
  <input type="button" id="down_click_button" value="내리기">
 </div>

 
 <div id="write_box">
  <span>장바구니</span>
 </div>

태그를 실제 적용해보면 알겠지만
append , appendTo 태그는
복사가 아닌 잘라내기 기능이라고 생각하면 된다.
위 소스는 id가 up_click_button 인걸 click 하게 되면 id가 write_box 인것 안의 p 태그의 [0]번째 배열의 내용을
id가 list_box 라는 곳에 붙여넣겠다는 소스내용이다.

위에서 적용한 샘플소스는 아래에서 열람 가능하다.

http://jaweb.anyhost.co.kr/jstudy/01.php

신고

댓글을 달아 주세요

  1. 2010.06.04 12:58 신고 BlogIcon jojigpog  댓글주소  수정/삭제  댓글쓰기

    내용이너무쉽네요 강사하셔도되겠수멜

  2. 2010.08.12 16:16 신고 gd  댓글주소  수정/삭제  댓글쓰기

    공부해보려고 시작했는데.. 너무 도움이 많이 될듯합니다. 퍼갑니다.


 
아예 기초도 모르는 상태에서 보시면 도움이 될겁니다.

책보고 응용하여 제작한게 대부분이고 몇가지는 퍼온것들도 있습니다.



1.php
http://jaweb.anyhost.co.kr/study/

2.jQuery
http://jaweb.anyhost.co.kr/jstudy/
신고

댓글을 달아 주세요




<script src='../jq/jquery.js' type='text/javascript'></script>
<script src='../jq/jquery..js' type='text/javascript'></script>

<script>
$(function(){  
 $("input[type=file]").filestyle({
 image: "../img/search_bt.gif",
 imageheight : 18,
 imagewidth : 90
 });
});
</script>

<input type="file" name="file01" size="10">

결과물
신고

댓글을 달아 주세요

jquery 로그인창

Posted by 비회원 프로그래밍/jQuery : 2010.01.30 11:45
아이디, 패스워드가 맞는경우에만 로그인 버튼이 보이게끔 작업해둔 페이지입니다.

현재 j_board 라고 공부용으로 만드는 게시판에 적용되어있습니다.




<? include "../_include/adm_header.php"; ?>
<? include "../_include/js_inc.php"; ?>
<? include "../_include/func_inc.php"; ?>

<? include "../_include/jquery_inc.php"; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> jboard 로그인 </TITLE>
<style>
#result{
text-align:center;
}
#insert_div{
vertical-align:middle;
}
.input_box{
width:120px;
height:21px;
border:1px solid #9A9A9A;
border-bottom:1px solid #D8D8D8;
border-right:1px solid #D8D8D8;
color:#404040; 
vertical-align:middle;
padding:3px 0 0 3px;
</style>
<script language="javascript">
$(function(){
$("#ad_pw,#ad_id").keyup(function(){
if($("#ad_id").val()){
if($("#ad_id").val()=="admin" && $("#ad_pw").val()=="admin1"){
$("#result").css("background-color","skyblue").html("<input type='button' value='login' onclick='ad_form_chk()'>");
}else{
if($("#ad_pw").val()){
$("#result").css("background-color","hotpink").text("패스워드가 다릅니다.");
}else{
$("#result").css("background-color","yellow").text("비밀번호를 입력 해주세요.");
}
}
}else{
$("#result").css("background-color","yellow").text("아이디를 입력 해주세요.");
}
})
});


var state="false";
function ad_form_chk(){
al_f("ad_id","아이디");
al_f("ad_pw","패스워드");
if(state=="true"){
ad_form.submit();
}
}
</script>
 </HEAD>

 <BODY>
  
 <table>
 <form action="login_cook.php" name="ad_form" onsubmit="return ad_form_chk();">
<tr>
<td>
<div id="insert_div">
id : <input type="text" id="ad_id" name="ad_id" tabindex="1" accesskey="l" datatype="alphanumeric" mask="-_." class="input_box">
<br>
password : <input type="password" id="ad_pw" name="ad_pw" class="input_box" tabindex="2" >
</div>
<div id="result">
</div>
</td>
</tr>
</form>
</table>

 </BODY>
</HTML>
신고

'프로그래밍 > jQuery' 카테고리의 다른 글

Jquery 1.4 버전에 추가된 새 기능 15개  (0) 2010.02.04
jquery ui 적용사례  (2) 2010.01.30
jquery 로그인창  (0) 2010.01.30
jquery select,checkbox 중복체크  (0) 2010.01.25
jquery 유효성검사  (0) 2010.01.25
jquery 테이블 색변경  (0) 2010.01.25
태그 : CSS, JQuery, keyup, val, 로그인

댓글을 달아 주세요

 «이전 1  다음»