Sign in
Sign up
통합검색
Open menu
회원로그인
회원가입
통합검색
Synology
(7)
AWS
(5)
Linux
(31)
PHP
(8)
Python
(3)
Javascript
(21)
HTML / CSS
(11)
떡볶이집앞 사진관
Synology
(7)
AWS
(5)
Linux
(31)
PHP
(8)
Python
(3)
Javascript
(21)
HTML / CSS
(11)
떡볶이집앞 사진관
Javascript
[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)
file 인풋에 이미지 파일 첨부시 첨부한 이미지의 썸네일을 보여주는 예제이다. 첨부한 이미지의 Blob 정보를 생성하여 임시 이미지를 생성해 준다. jQuery blobimg = { 'init' : function(){ }, '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