WEB/Javascript/jQuery 2015. 9. 21.
Alert창을 자유자재로 구현해주는 open source -toastr.js
Alert창을 자유자재로 구현해주는 오픈소스입니다. 자세한 사용법은 홈페이지를 참조하세요 홈페이지 : http://codeseven.github.io/toastr/ github : https://github.com/CodeSeven/toastr Demo : http://codeseven.github.io/toastr/demo.html 라이선스 : MIT License toastr.info('Are you the 6 fingered man?')
WEB/Javascript/jQuery 2015. 9. 21.
문서 로딩을 보여주는 open source - pace.min.js
문서가 로딩되는것을 시각적으로 표현해주는 오픈소스입니다. 자세한 사용법은 홈페이지를 참조하세요 홈페이지 : http://github.hubspot.com/pace/docs/welcome/ github : https://github.com/HubSpot/PACE 라이선스 : ? paceOptions = { // Disable the 'elements' source elements: false, // Only show the progress on regular and ajax-y page navigation, // not every request restartOnRequestAfter: false } .pace { -webkit-pointer-events: none; pointer-events: none; ..
WEB/Javascript/jQuery 2015. 9. 21.
미니그래프를 만들어주는 open source - jquery.peity.min.js
조그만 그래프를 쉽게 만들어 주는 오픈소스입니다. 자세한 사용법은 홈페이지를 참조하세요 첫번째 홈페이지 : http://benpickles.github.io/peity/ github : https://github.com/benpickles/peity 라이선스 : MIT License 1/5 226/360 0.52/1.561 $("span.pie").peity("pie") 두번째 홈페이지 : http://omnipotent.net/jquery.sparkline/#s-about github : https://github.com/gwatts/jquery.sparkline/ 라이선스 : New BSD License Inline Sparkline: 1,4,4,7,5,9,10. Sparkline with dynam..
WEB/Javascript/jQuery 2015. 9. 21.
스크롤을 만들어주는 open source - jquery.slimscroll.min.js
DIV기준으로로 스크롤을 쉽게 만들어 주는 오픈소스입니다. 자세한 사용법은 홈페이지를 참조하세요 홈페이지 : http://rocha.la/jQuery-slimScroll github : https://github.com/rochal/jQuery-slimScroll 라이선스 : Dual licensed under the MIT and GPL Lorem ipsum dolor sit amet, consectetur .... snip $(function(){ $('#inner-content-div').slimScroll({ height: '250px' }); });
WEB/Javascript/jQuery 2015. 7. 31.
현재까지 가장 모던한 모바일 터치 슬라이더
현재 가장 모던한 모바일 터치슬라이더로 모바일뿐만아니라 일반 웹화면에서도 요긴하게 사용할 만한 플러그인입니다. 다양한 Swipe를 DEMO로 볼 수 있으며 쉽게 적용이 가능합니다. jQuery가 설치되어 있어야 하며 MIT라이선스를 가지고 있습니다. sds 홈페이지 http://www.idangero.us/swiper DEMO http://www.idangero.us/swiper/demos/ Install bower로 설치할 경우 bower install swiper 일반 사용법 css와 js를 임포트합니다. jquery를 사용하지 않는다면 swiper.min.js만 임포트하면되고 jquery를 사용한다면 jquery.js와 swiper.jquery.min.js를 임포트하면 됩니다. 아래의 Markup에..
WEB/Javascript/jQuery 2015. 7. 31.
스크롤에 따른 배경의 움직임 표현
최신의 홈페이지를 보면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. javascript로 스크롤에 따른 CSS의 background-position을 조정하여 구현한 기능으로 기존에 jQuery를 이용한 플러그인이 있어 소개합니다. MIT라이선스를 가지고 있습니다. 홈페이지 https://github.com/pederan/Parallax-ImageScroll DEMO http://codepen.io/pederan/full/Hheuy Install bower로 설치할 경우 bower install Parallax-ImageScroll npm으로 설치할 경우 npm install parallax-imagescroll 일반 사용법 ..
WEB/Javascript/jQuery 2015. 6. 8.
레이아웃의 다단을 100% 로 맞추기
레이아웃의 다단을 100% 로 맞추기 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동 맞춰지는 자바스크립트 입니다. 예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 `.pct’ 클래스가 자동으로 맞춰 줍니다. HTML 1단 2단 3단 4단 JAVASCRIPT $(function () { contentLayAutoWidth(); }); $(window).resize(function () { contentLayAutoWidth(); }); /* 레이아웃의 다단 단수를 100%로 채움 */ function contentLayAutoWidth..
WEB/Javascript/jQuery 2015. 2. 26.
GNB메뉴 Mouse On일때 스치기만해도 서브메뉴가 나올 시 해결방법
퍼블리싱을 하다보면 GNB의 1Depth 메뉴에 마우스를 올렸을경우 2Depth메뉴가 아래로 내려오는 UI를 구현하는경우가 많습니다. 퍼블리싱을 하다보면 GNB의 1Depth 메뉴에 마우스를 올렸을경우 2Depth메뉴가 아래로 내려오는 UI를 구현하는경우가 많습니다. 이때 의도치 않게 마우스가 브라우저 상단에서 컨테츠쪽으로 이동하려고 할때 GNB영역을 거치게 되는데, 바로 2Depth메뉴가 나타나는 경우가 생깁니다. 말하자면 의도치 않게 2Depth메뉴를 보게 되는 것입니다. 그럴경우 Mouse On의 감도를 조절하여 그냥 스쳐지나가는 것은 반응이 일어나지 않고 의도를 가지고 어느정도 버튼에 머물 경우 2Depth메뉴가 나오게 하는 javascript코드입니다. JAVASCRIPT var delay = ..
WEB/Javascript/jQuery 2014. 1. 16.
크롬(chrome)에서 javascript 디버깅하는 팁
javascript를 디버깅하는데 여러가지 툴이 존재하지만 저는 크롬을 많이 사용합니다.그중 많이 쓸만한 크롬의 콘솔을 이용한 디버깅 명령어를 몇가지 소개할까 합니다. console.debug(data); 콘솔에서 'data'에 해당하는 값을 보여 줍니다. console.table(data); 콘솔에서 'data'값을 Table 형태로 보여 줍니다. console.assert( value == 3, "value은 3은 아니네요"); 콘솔에서 조건에 맞지 않는 경우 보여 줍니다. console.count([title]); while 문등 반복문 등을 사용할 경우 카운트를 보여준다. console.dirxml(document.getElementById("f_search_target")); DOM의 선택된 내..
