IT_Developers/Javascript79 jQuery - 디자인 요소 툴팁 박스 생성하기 / tooltipsy 레이어 부가설명 박스 달기 안녕하세요. 고코더 입니다. 브라우저는 title 요소에 값을 넣으면 보통 기본 팁 박스를 제공합니다. 하지만 우리의 클라이언트는 특이한걸 원하는 분이 많습니다. 이 타이틀 속성의 툴 팁의 디자인 요소를 넣고 싶어할 수도 있습니다. 그래서 이번 시간에는 toll tip을 바꿀수 있는 플러그인을 소개 하려 합니다. ▼ tooltipsy 라는 플러그인 입니다. http://tooltipsy.com/ ▼ 아주 간단하게 툴박스를 생성할 수 있는데요 아래 예제를 한번 실행해보세요. 123456789101112131415161718192021 $("#gocoder_tooltip").tooltipsy({ css: { 'padding': '5px', 'max-width': '100px', '.. 2019. 3. 26. JavaScript - 문자열 치환 replace, replaceAll 사용하기 자바스크립트 replace() 사용하기 안녕하세요 고코더 입니다. replace 는 서버언어에서 가장 유용한 함수 입니다. 특정문자를 치환해주는 가장 쉬운 방법이죠 자바스크립트도 당연히 replace.가 존재하는데 문제는 문자열을 하나만 바꿔 줍니다. replace() 사용법 ▼ replace() 기본 사용법12var str = "gocoder"str.replace("o","x");cs ▼ 사용법 "문자열".replace("대상문자","바뀌어 보여질 문자") ▼ 결과 값 이렇게 replace는 하나의 문자만 치환하고 종료 합니다. 그래서 서버사이드 언어에서 사용하던 그 replaceall이 아니죠. 그래서 방법이 필요 합니다. replaceAll() 함수로 사용하기 우리에겐 replaceall 이 필요합.. 2019. 3. 22. JavaScript- 타이핑 애니메이션 / typewriterjs 타자 치는 애니메이션 처럼 문자열 보이게 하기 안녕하세요. 고코더 입니다. 제 홈페이지에 묻고 답하기에 어떤 분이 제 블로그 스킨 상단에 타이핑 애니메이션에 대해 블로그 해드리겠습니다. http://gocoder.net/qna/943 제 블로그 스킨을 수정할때 조금 다른 사람보다 튀고 싶어서?? 해당 타이핑 애니메이션을 넣었습니다. 어떤 사람은 오류라고 하기도 하고 멋지다고 하기도 하고 다양한 반응이긴 한데 필요한 분이 있다고 하니 남겨드리겠습니다 ▼ TyperwritrJS 홈페이지 입니다. https://safi.me.uk/typewriterjs/ ▼ 홈페이지 예제만으로 충분하겠지만 제가 만든 소스를 바로 웹에서 확인해보세요 12345678910111213141516171819202122232425 v.. 2019. 3. 21. 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 - 자바스크립트 파라미터 받아오기 / location.search Get 일때의 스크립트로 parameter 가져오기 안녕하세요. 고코더 입니다. 자바스크립트로 사이트 URL이 보이는 get 방식일 경우 자바스크립트의 내장 함수인 location.search 을 이용해서 URL의 파라미터를 가져 올 수 있습니다. ▼ 이렇게 location.search는 URI 정보를 모두 가져옵니다. ▼ 그래서 너무나도 많이 쓰고 있는 getParameterByName 함수는 이런 기초함수를 이용하여 파라미터의 이름을 입력하면 해당 값을 가져 오는 역할을 합니다. ▼ 파라미터를 가져오게 하는 함수 123456function getParameterByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var r.. 2019. 3. 8. JavaScript - .js 안에서 jquery 사용하는 방법 단독 .js 사용시 제이쿼리 사용법 안녕하세요. 고코더 입니다. .js는 자바스크립트 파일 확장자 입니다. 우리는 흔히 원하는 js안에 붙혀넣고 jquery를 사용하세요. 이런식으로 하시면 jquery 코드를 사용하여 js 코딩을 하실 수 있습니다. 마무리 js 개발이라면 표준 자바스크립트로 만드시는게 더 좋아 보입니다. 2019. 3. 8. JavaScript - .js? 파라미터 값 사용 방법 script src .js에서 parameter 사용 방법 안녕하세요. 고코더 입니다. 자바스크립트를 개발하다보면 .js 에 파라미터를 넘겨서 해당 값을 이용해서 개발을 하는 경우가 있습니다. ▼ 이렇게 js를 참조하면서 필요한 파라미터를 넣는 경우가 있습니다. 그런데 자바스크립트에서 GET 형식의 파라미터를 받는 방법에서 getParameterByName 을 많이 사용하고 계십니다 -> 자바스크립트 파라미터 받아오기 / location.search 하지만 해당 함수는 Get 형태의 윈도우 로케이션 URL을 가져오는 방식으로ㅓ .js를 호출할때는 사용할 수 없습니다. 아래 함수를 사용하여 가져올 수 있습니다. 123456789101112131415 function scriptQuery() { var sc.. 2019. 3. 8. JavaScript - 자바 스크립트로 해당 날짜에만 실행 하기 하드코딩으로 자바스크립트로 특정 날짜에만 실행하기 안녕하세요. 고코더 입니다. 가끔 웹사이트를 운영하다보면 특정한 날짜에만 임시로 팝업을 실행한다거나 경고창을 띄우게 될일이 많습니다. 그럴 경우 하드코딩으로 잠시 개발하였다가 원복을 하는 경우가 많은데요 그저 간단한 코딩이고 현재 시간을 비교해서 if를 하면 끝인데 저는 날마다 헷갈리네요. 그래서 적어 놓습니다. 12345678910111213141516 if (new Date() >= new Date('12/01/2018 21:00:00') // 언제부터 && new Date() 2018. 12. 19. 이전 1 ··· 4 5 6 7 8 9 다음
