반응형

jQuery 8

[JavaScript] FullCalendar - 가장 유명한 그 캘린더 라이브러리

이전에도 쓰던 라이브러리인데 이번에 수정 할 부분이 생겨서 다시 찾아보있더니 업데이트가 많이 되었다. https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io 더 다양해진 기능들과 깔끔해진 디자인으로 업데이트 된거 같다. 아래는 데모 사이트 https://fullcalendar.io/demos Demos | FullCalendar fullcalendar.io ..

IT 2022.10.13

[JS] VanillaJS

VanillaJS란? 공식 사이트에서는 쉽고빠르고 가벼운 크로스 플랫폼 프레임워크라고 소개되어 있다. 그냥 순수 자바스크립트코드로 작성하는것. jQuery보다는 압도적으로 빠르고 크로스 브라우징이 잘 되는 특성이 있다. VanillaJS 공식 사이트 vanilla-js.com/ Vanilla JS Vanilla JS Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each da..

IT 2020.11.26

DropZone 썸네일에 버튼 추가하기

플러그인에 기본으로 있는 remove버튼을 사용해도 되었지만 버튼을 클릭해서 다른 이벤트를 주고 싶다던가 버튼의 css를 변경하고 싶은경우가 생겨 부득이하게 새로운 버튼을 생성하게 됨. 1. 먼저 삽입할 버튼의 html을 선언한다. var dz_delete_button = ' 삭제 '; 2. dropzone의 이벤트 안에 Element를 추가한다. file_dropzone.on('addedfile', function (file) { var remove_button = Dropzone.createElement(dz_delete_button); var _this = this; remove_button.addEventListener('click', function (e) { e.preventDefault();..

IT 2019.09.04

[jQuery]select박스

Selectbox셀렉트박스의 모든것. 셀렉트박스나 체크박스나 사용할 때 일단 구글링.아는것도 생각이 잘 안나서 맨날 구글링을 함.근데 진짜 셀렉트박스사전같은 대박 사이트를 찾아냄. http://blog.daum.net/twinsnow/124 여기인데 셀렉트박스로 할 수 있는 거의 모든것이 적혀있다. 원본사이트는 저 위의 사이트이고어떤 분이 또 잘 정리해둔 사이트가 있다. 아래의 내용은 거기서 퍼온것이고해당 블로그주소는 요기요기요기요. http://egloos.zum.com/tiger5net/v/5667935 1. jQuery로 선택된 값 읽기 $("#selectBox option:selected").val();$("select[name=name]").val(); 2. jQuery로 선택된 내용 읽기 $(..

IT 2017.04.26

[jQuery]트리구조 플러그인 - fancytree

Fancytree 트리구조 일하다보니 메뉴구성을 트리구조로 보여줘야 할 필요가 있었는데 차장님이 사용해보라고 알려주심. 괜춘한듯. 여기저기 필요한데가 많을것 같아서 포스팅 한다. 아이콘은 js파일에서 수정 할 수 있다. 그리고 사용방법이 그리 어렵지는 않은데 뭔가 트리구조에 대한 이해가 필요할것 같다. 예제 사이트 주소 → http://wwwendt.de/tech/fancytree/demo/ github 주소 → https://github.com/mar10/fancytree/ document 주소 → https://github.com/mar10/fancytree/wiki api reference 주소 → http://wwwendt.de/tech/fancytree/doc/jsdoc/ 내가 사용해본것만 설명..

IT 2017.04.20

[jQuery].dotdotdot 말줄임

.dotdotdot말줄임 플러그인 특정 공간에 텍스트를 넣었을 때 넘칠 때 말줄임 표시를 하고 싶을 때 사용하는 플러그인. 기본 사용방법 $(document).ready(function() {$("#wrapper").dotdotdot({ ellipsis: '... ', // 말줄임 대체 문자watch watch: false, // 윈도우창에 따라서 업데이트 여부wrap : 'word', // 문자를 자를 단위 : 'word'/'letter'/'children'height: null, // 높이 설정 , null일경우 자동 callback: function( isTruncated, orgContent ) {}, // .dotdotdot 이후 실행 부울,문자열 두개의 매개변수 lastCharacter: { ..

IT 2017.03.19

[jQuery]파일용량 계산하기

파일용량 계산하기 일하다보면 가끔 필요한데 외워지진 않고 매번 찾아봐야하는 것들 중 하나.... 찾기귀찮아서 적어놓음. 나는 php를 사용하기 때문에 filesize()를 사용해서 byte용량을 받아온다.그리고 ajax로 통신하여 리턴받은 값을 함수에 변수로 던져준다. 아래에 소스는 구글에 찾으면 가장 많이 나오는 소스중에 하나이다. function byteCalculation(bytes) { var bytes = parseInt(bytes); var s = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']; var e = Math.floor(Math.log(bytes)/Math.log(1024)); if(e == "-Infinity") return "0 "+s[0]; else re..

IT 2016.12.14

[API]차트생성 - Chart.js

[API] Chart.js 차트생성기능을 만들기위해여러 무료 api를 찾던중디자인과 기능이젤 맘에들어서 사용해본chart.js를 소개하도록 하겠다. http://www.chartjs.org 오픈소스이고 8가지의 타입이 있고 html5의 canvas를 사용하고 반응형이다. 시작해보자.일단 chart.js를 사용하려면 GitHub에서 다운받거나 CDN을 이용한다.나는 걍 CDN을 이용한다. 차트를 만들자.먼저 canvas를 만들고 너비와 높이를 정한뒤꼭 id를 넣자. 기본 사용틀이다. 기본 폰트 셋팅이다. 공통으로 사용되는 구성이다. 차트 제목에 관련된 구성요소들인데일단 저런 옵션 안주면 안나오고나오게 하고 싶으면 저 도표에 있는 옵션들로 구성하면 될거 같다. 배경에 패턴을 넣을 수 있는데나는 아직 해보진 ..

IT 2016.11.25
반응형