JQuery31 jQuery - 선택 요소 사이즈 재조정 / resizeble() div 크기 사용자가 조절 가능한 플러그인 안녕하세요. 고코더 입니다. 자바스크립트에서 사용자에게 특정 요소를 특히 div 를 자유로운 크기로 조절 할 수 있게 하는 기능을 소개하려고 합니다. resizeble 이라는 UI 기능이빈다. https://jqueryui.com/resizable/ 해당 기능은 다양한 곳에 사용이 가능합니다. 사용자 편의에 대시보드를 만들게 하는 곳에 특히 많이 쓰입니다. 그래서 오늘은 이 기능에 대해 다루려고 합니다. 먼저 제가 정리한 간단 예제를 보시겠습니다. 1234567891011121314151617 $(function(){ $("#resizeble").resizable(); }); gocoder ResizebleColored by Color Scriptercs 해당 .. 2019. 3. 14. jQuery - 색상코드 선택 플러그인 / Color Picker 색상 RGB input 선택 plugin 안녕하세요. 고코더 입니다. 웹사이트에서 사용자에게 색상코드를 선택 값을 받을 때 input 박스로 받는 거보다 조금 더 우아하게 받을 수 있는 플러그인을 하나 소개하려고 합니다. ▼ 바로 jquery 미니 컬러 입니다. https://www.jqueryscript.net/other/Color-Picker-Plugin-jQuery-MiniColors.html 플러그인 .js 몇가지를 첨부 한 후에 속성만 주면 간단하게 input 박스를 컬러 코드를 선택 할 수 있는 기능으로 만들어 줍니다. ▼데모를 보면 이미 다양한 패턴의 예제를 만들어 났고 그대로 복사해서 붙혀넣어 쓰기 편하게 되어 있습니다. 색상코드 관련힌 인픗박스 기능은 전부 있어 보입니다. https://.. 2019. 3. 12. JavaScript - .js 안에서 jquery 사용하는 방법 단독 .js 사용시 제이쿼리 사용법 안녕하세요. 고코더 입니다. .js는 자바스크립트 파일 확장자 입니다. 우리는 흔히 원하는 js안에 붙혀넣고 jquery를 사용하세요. 이런식으로 하시면 jquery 코드를 사용하여 js 코딩을 하실 수 있습니다. 마무리 js 개발이라면 표준 자바스크립트로 만드시는게 더 좋아 보입니다. 2019. 3. 8. jQuery - lazyload() 이미지 동적으로 / 스크롤시 호출 이미지가 화면에 올때 로딩 되게 하기 안녕하세요. 고코더 입니다. 오늘은 동적으로 이미지를 호출하여 페이지 로딩은 빠르게 하고 고객이 원하는 곳에 갔을 때만 해당 이미지를 볼 수 있도록 만들어 보려고 합니다. 모바일을 많이 사용하는 환경에서 이젠 동적 호출은 기본이 되어가고 있습니다. 오늘 써볼 플러그인은 lazyload() 입니다. ▼홈페이지는 아래와 같습니다. https://appelsiini.net/projects/lazyload/ 공식적인 API 의 내용은 읽어보셔서 참고 하시길 바랍니다. 저는 좀 더 익스프레스 하게 알려드리기 위해 샘플을 코딩 해보았습니다. ▼ 아래 내용을 참고해주세요 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2.. 2018. 2. 12. jQuery - 예약어 변경 하기 / $.noConflict() 제이쿼리 $ 대신 다른걸로 선언하기 오늘은 jQuery의 예약어를 바꾸는 방법을 알아보겠습니다. 예약어 - 시스템에서 미리 준비해놓은 명명규칙 jQuery의 선언은 아시다 시피 $ , jQuery 두가지가 예약어로 되어 있습니다. ▼아래 예제를 실행하면 1 2 3 4 5 6 7 8 9 10 11 12 jQuery( document ).ready(function() { alert('jQuery'); }); $(document).ready(function() { alert('$'); }); Colored by Color Scripter cs ▼화면과 같은 결과가 보입니다. 그런데 지금은 아무도 안쓰는 프로토타입도 예약어로 $가 되어 있습니다. 함께 쓰면 상당히 혼란스럽겠죠 그래서 jQuery에는 선언 에약어.. 2018. 1. 6. jQuery - 긴 텍스트 ... 으로 줄이기 / dotdotdot 긴 글 텍스트 축약하기 DIV에 긴 텍스트가 들어가면 크기가 조절이 되거나 일명 글자가 삐져나오죠 그래서 보통 몇 글자 이상이면 ...을 붙혀서 축약 시키도록 코딩을 합니다. 하지만 해당 기능 각 프론트 개발자마다 다르게 구현 해놓아 유지보수가 어렵습니다. 그래서 오늘은 긴 텍스틀 알아서 축약해주는 플러그인을 소개하겠습니다. ▼우선 참조 사이트는 아래입니다. nl을 보아 네덜란드 개발자인거 같은데 홈페이지 부터 매우 이쁘네요 자세한 레퍼런스는 해당 홈페이지에서 둘러보세요 http://dotdotdot.frebsite.nl/ 해당 사이트를 참고해 개발자 분들이 빠르게 익힐 수 있도록 익스프레스하게 예제를 만들어봤습니다. ▼jquery와 해당 dotdotdot.js를 참조하였습니다. 1 2 cs ▼우선 사용.. 2017. 12. 24. jQuery - 게시판 정렬하기 / Table sort 테이블 데이터 정렬 화면에 보이는 데이터를 정렬 하고 싶을때가 있습니다. (혹은 그런 기획이 오면 해야죠) ▼엑셀에 사용하는 그 기능 처럼요 하지만 웹에서는 DB에 order by 명령어를 받아 새로고침 하여 뿌리는 경우가 많아 느리기도 하고 굳이 서버를 다녀와야 할까 싶죠 그럴때 사용할수 있는 플로그인을 하나 소개 하겠습니다. ▼해당 사이트에 tabersorter 라는 플로그인 http://tablesorter.com/ 오늘은 해당 사이트에 나와 있는 내용을 익스프레스하게 압축하여 설명해보겠습니다. Jquery로 테이블에 있는 데이터를 거침없이 정렬 해봅시다. ▼jQuery와 tablesorter를 참조한다. ▼적용 하고 싶은 Table 속성에 .tablesorter() 추가한다. $(document).. 2017. 12. 5. jQuery | Plugin - select 박스 검색 가능하게 검색 가능한 select 박스 셀렉트 박스의 옵션이 많아지면 스크롤 길이도 어마 어마 하고 불편합니다.오름순으로 정렬 하여 데이터를 나열하면 되지만.우리의 클라이언트들은 참을성이 많지가 않습니다. 그래서 오늘은 아주 쓸만한 컴포넌트를 준비했습니다.select2 라는 jquery 플러그인이다.아래 홈페이지에서 자세한 정보를 찾아보자.https://select2.org/ 하지만 익스프레스하게 알려드리기 위해아주 기초적이고 간단하게 코딩을 해보았습니다. ▼우선 아래처럼select2.css , select2.js를 참조 시키자 그리고 jquery는 기본12cs ▼참고로 jquery 참조 URL은 외웁시다.1cs http://code.jquery.com/jquery.min.jshttp://code.jquery.c.. 2017. 11. 2. Javascript - 아이폰,안드로이드 기기 체크 자바스크립트로 아이폰 체크하기 이젠 아이폰 점유율이 절반 가까운 이 시점에윈도우와 안드로이드만을 두고 개발하는 시대가 끝난거 같습니다. 간단한 예로 어플도 아이폰과 안드로이드 두개를 만들어놓고접속하는 기기단말을 보고 분기하여 안드로이드일땐 플레이 스토어 어플로아이폰일땐 아이툰즈 어플로 링크를 보내줘야 할것 입니다. 그래서 오늘은 이 체크하는 방법을 아래처럼 다뤄봤다. navigator : 브라우저 전반에 걸친 정보를 제공하는 객체이다.platform : 브라우저를 실행하는 플랫폼 (기기) 가 무엇인지 말해준다. 아래처럼 아주 간단하게 코딩이 완성 되었습니다.그밖에도 navigator 객체를 이용하여 클라이언트의 접속 환경을 알아낼 수 있습니다. var UserAgent = navigator.platfor.. 2017. 11. 2. 이전 1 2 3 4 다음
