• [jQuery] jQuery UI 모바일 디바이스에서도 Touch 되도록 (jQuery UI Touch Punch 0.2.3) jQuery UI로 slider 등의 UI 제작시 모바일, 태블릿등의 디바이스에서 터치가 인식되지 않아 작동되지 않는 경우 아래 jQuery UI Touch Punch 플러그인을 jQuery UI 아래에 추가하여 작동시킬 수 있다. (원본 js 파일은 첨부파일 다운로드!) jQuery UI Touch Punch /*! * jQuery UI Touch Punch 0.2.3 * * Copyright 2011–2014, Dave Furfero * Dual licensed under the MIT or GPL Version 2 licenses. * * Depends: * jquery.ui.widget.js * jquery.ui.mouse.js */ !function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
• [jQuery] 이미지맵 반응형 적용하기 (area 태그) 반응형 사이트의 경우 PC기준으로 이미지맵(area) 태그 작성 후 모바일에서 이미지 사이즈가 축소되었을 때 축소된 비율 만큼 area 좌표를 자동 조정해주는 코드. jQuery $(document).ready(function(){ //이미지맵이 있는 경우 반응형 이미지맵 처리 var coords = new Array(); function imagemap_coords(type = ''){ $('area[response_croods]').each(function(idx){ if(type=='ready'){ coords[idx] = $(this).attr('coords'); } var map_id = $(this).parent('map').attr('name'); var $img = $('img[usemap="#'+map_id+'"]'); var org_width = parseInt($img[0].naturalWidth); var now_width = $img.width(); var croods_exp = coords[idx].split(','); var coords_re = ''; for(var i=0;i<croods_exp.length;i++){ coords_re += ','+croods_exp[i]*(now_width/org_width); } coords_re = coords_re.substring(1); $(this).attr('coords',coords_re); }); } imagemap_coords('ready'); $(window).resize(imagemap_coords); }); HTML <area shape="rect" alt="" title="" coords="472,24,507,64" href="" target="" response_coords />
• [Javascript] 숫자 세자리수 마다 콤마(,) 찍기 문자열이 숫자인 경우, 세자리수 마다 콤마(,)를 찍어주는 함수. Javascript function get_comma(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
• [jQuery] 백그라운드에서 audio 재생 및 일시정지 하기 audio 상자 노출 없이 백그라운드에서 재생 또는 일시정지 시킬 수 있는 기본 예제 코드. 버튼을 html로 하나 만들어두고 버튼을 한번 클릭시 재생, 한번 더 클릭하는 경우 일시정지 시킬 수 있다. jQuery $(function() { var audio_source = new Audio('/images/main/songs.mp3'); var audio_state = 0; $('#aside .play').click(function(e) { e.preventDefault(); // play if (audio_state == 0) { audio_source.loop = true; // 반복재생 audio_source.volume = 0.7; // 볼륨 audio_source.play(); audio_state = 1; } else if (audio_state == 1) { audio_source.pause(); audio_state = 0; } }) }) HTML <aside id="aside"> <a href="#" class="play">음악재생</a> </aside>
• [jQuery] file 인풋에 이미지 첨부시 썸네일 보여주기(Blob) 2 file 인풋에 이미지 파일 첨부시 첨부한 이미지의 썸네일을 보여주는 예제이다. 첨부한 이미지의 Blob 정보를 생성하여 임시 이미지를 생성해 준다. jQuery blobimg = { 'init' : function(){ this.action(); }, 'action' : function(){ changeIMG = function(obj){ var $this = obj; if($this.files && $this.files[0]){ var reader = new FileReader(); reader.readAsDataURL($this.files[0]); reader.onload = function(e){ var fileName = e.target.result; $($this).parents('.filebox').find('.tmb').find('img').attr('src',fileName); } } } $(':file').on({ 'change' : function(){ changeIMG(this); } }) } } $(function(){ blobimg.init(); }); HTML <div class="filebox"> <div class="tmb"> <img src="" alt="" /> </div> <input type="file" name="" id="" /> </div>
• [jQuery] radio, checkbox 디자인 하기 radio나 checkbox 인풋 디자인은 여간 까다로운게 아니다. 아래 예제는 radio, checkbox 를 감싸고 있는 label에 Class를 부여하여 보다 간단한 방법으로 인풋 디자인이 가능하게 해준다. jQuery //checkbox, radio design labelDesign = { 'init' : function(){ this.action(); }, 'action' : function(){ var ele = { 'inp' : 'label.chk :checkbox, label.chk :radio' } var is_checked = function($this){ var chked = $this.is(':checked'); var this_type = $this.attr('type'); if(chked){ if(this_type=='radio'){ $this.parents('label').addClass('on').siblings($this.parent()).removeClass('on'); }else{ $this.parents('label').addClass('on'); } }else{ $this.parents('label').removeClass('on'); } } $(document).on('click change', ele.inp, function() { is_checked($(this)); }); $(window).on({ 'load' : function(){ $(ele.inp).each(function(){ is_checked($(this)); }) } }); } } HTML <label class="chk"><input type="checkbox" /></label>
• [jQuery] bxslider 반응형에서 개수 다르게 노출하기 bxslider 플러그인을 사용하여 반응형 사이트를 구축하는 경우 PC 와 모바일에서 갯수가 다르게 보이도록 하는 예제. 아래 예제는 PC 에서는 4개의 이미지가, 모바일에서는 2개의 이미지가 노출되로록 한다. bxrolling = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'roll' : $('.roll'), } var opts = function(){ var vis = $('#_device_mo').is(':visible'); //PC인 경우 if(!vis){ var vars = { 'auto' : true, 'useCSS' : false, 'pager' : false, 'minSlides' : 4, 'maxSlides' : 4, 'slideMargin' : 10, 'slideWidth' : 290, 'moveSlides' : 1 } //모바일인 경우 }else{ var vars = { 'auto' : true, 'useCSS' : false, 'pager' : false, 'minSlides' : 2, 'maxSlides' : 2, 'slideMargin' : 10, 'slideWidth' : 290, 'moveSlides' : 1 } } return vars; } var rolling = function(){ roll = $ele.roll.bxSlider(opts()); } rolling(); $(window).on({ 'load resize' : function(){ roll.reloadSlider(opts()); } }) } } $(function(){ bxrolling.init(); });
• Youtube iframe API 기본 샘플 코드 (일시정지, 화질설정) Youtube의 iframe API를 통해 동영상을 제어하는 기본 샘플 코드. 문서 상단에 Javascript SDK를 포함 시킨다. <script async src="https://www.youtube.com/iframe_api"></script> 아래와 같이 기본 코드를 작성한다. 아래 예시에서는 onReady, onStateChange 예시 코드를 함께 포함 시켰다. <script> //동영상 로드 function onYouTubeIframeAPIReady(vid) { var player; player = new YT.Player('muteYouTubeVideoPlayer', { videoId: vid, // YouTube Video ID width: 1100, // Player width (in px) height: 610, // Player height (in px) playerVars: { autoplay: 0, // Auto-play the video on load controls: 0, // Show pause/play buttons in player showinfo: 0, // Hide the video title modestbranding: 0, // Hide the Youtube Logo loop: 1, // Run the video in a loop fs: 0, // Hide the full screen button cc_load_policy: 0, // Hide closed captions iv_load_policy: 3, // Hide the Video Annotations autohide: 0, // Hide video controls when playing rel: 0 }, events: { onReady: function(e) { //e.target.setVolume(5); }, onStateChange : function(e){ if(e.data==0){ console.log('state Change!'); } } } }); } </script> 위와 같이 생성된 player 객체에 다양한 Method를 통해 동영상을 제어할 수 있다. 예시는 아래와 같다. [일시정지] player.pauseVideo(); [화질설정] player.setPlaybackQuality('highres');

• 1
• 2