그냥 개발자 블로그

브라우저 종류에 관계 없이 select box에 스타일을 적용할 수 있게 해주는 플러그인 옵션1 옵션2 1. 제이쿼리를 설치가 필요 합니다. 옵션1 옵션2 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 옵션1 옵션2 2. select 태그 및 적용 시킬 스타일을 작성 합니다. 옵션1 옵션2 3. 페이지가 열릴때 자동으로 실행되게 함수를 작성 합니다. 4. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다. [문의하기] copyright ⓒ 2017. 워크식스

제이쿼리 플러그인 만들때 제이쿼리 ajax의 success 처럼 플러그인 내부에서 결과를 리턴 받아야 하는 경우가 있습니다.이럴때 콜백함수를 사용하여 플러그인 동작을 명령한 위치로 값을 리턴 할수 있습니다. 예제는 다음과 같습니다. $(document).ex({option : 'a',success : function(result){alert(result);}}); 1. 위와 같이 ex라는 플러그인을 동작 시켰다고 가정합니다. success 객체의 함수 인자 result 로 플러그인으로 부터 어떠한 값을 리턴 받는게 목적 입니다. (function($){var ele; $.fn.ex = function(option){ ele = $(this);if(option.success){compleate(option..

[소개] 원페이지 사이트에 사용하는 페이지 플러그인으로 스크롤 페이지간 상하 이동을 부드럽게 만들어 줍니다. [플러그인명] pageScroll.js [버전] 3.1웹표준을 고려한 수정 3.0각 섹션별 스크롤 높이 리턴 기능 추가 2.0 페이지 클릭 후 동작 추가 가능하도록 수정 1.0최초작성 [사용법] 1. 플레이그라운드에 홈페이지에서 제공하는 cdn을 복사하여 붙여 넣습니다. (제이쿼리와 제이쿼리 ui가 사전에 선언되어 있어야 합니다.) 2. 페이지 마다 id를 부여 합니다. 아이디는 원하는 값을 다르게 부여 합니다. 3. 페이지에 해당 하는 요소를 작성 한 후 for에 클릭시 이동할 id 값을 넣어 줍니다. 4. 페이지 그룹에 해당하는 엘리먼트에 pageScroll을 실행해 줍니다. [옵션설명] $(..

[소개] 탭을 가지고 있는 슬라이드 배너로 위아래로 배너가 이동하며 현재 배너에 따라서 탭에 강조가 표시됩니다. [플러그인명] tabbanner.js 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다. [버전] 1.0최초작성 [사용법] 1. 플레이그라운드 홈페이지에서 jquery cdn 주소를 복사 하여 개발하는 곳에 붙여 넣기 합니다. (제이쿼리 및 제이쿼리 UI 가 사전에 선언 되어 있어야 합니다) 2. 표시된 형태로 html을 작성해 줍니다. (위 html은 tabbanner 슬라이드를 사용하기 위한 기본 레이아웃 입니다.) 3. 표시된 형태로 스타일을 작성해 줍니다. (위 스타일은 tabbanner 슬라이드를 사용하기 위한 기본 스타일 입니다.) 4. 원하는 엘리먼트(예제에서는 main_ban..

전체화면을 가리고 그 위로 레이어팝업을 띄어야 할때 이용 레이어팝업 1. 제이쿼리 설치가 필요 합니다. 레이어팝업 2. 다운로드 받은 플러그인을 설치 합니다. 레이어팝업 3. 팝업 내에 표현될 페이지를 iframe 태그 src에 추가하여, 위와 같이 html 태그를 추가합니다. 레이어팝업 4. 버튼을 클릭하였을 경우 동작함수를 다음과 같이 추가 합니다. 5. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다. [과거버전 사용법 보러가기]2015/10/31 - [Jquery] - jquery 플러그인으로 전체화면 레이아웃 띄우기

간혹 전체화면을 가리고 그 위로 레이어팝업을 띄워야 할때가 종종 있는데요. 그때 사용하면 좋은 플러그인을 만들어서 알려드리려고요. fullPopup.js 라고 이름 붙인 플러그인은 여기 에서 다운로드 받아서 사용하실수 있으세요. 그러면 지금 부터 간단 사용법에 대해서 알려드릴게요. OPEN CLOSE 워크식스에서 다운로드 받은 플러그인을 원하는 위치에 넣고 연결 해줍니다. OPEN CLOSE 샘플 영상에서 처럼 가운데 하얀 레이어 팝업 영역에 해당 하는 div 를 생성해줍니다. 여기서 녹색으로 표시된 width와 height, display:none 는 필수 값입니다. div의 클래스 명은 원하는것으로 설정해 주면 됩니다. OPEN CLOSE 팝업을 열게할 버튼을 생성하고 그 안에 버튼을 클릭시 동작할 ..

오늘은 일단 동영상부터 보실까요? ㅎㅎ 아! 위 영상은 네이버가 아니에요. 네이버와 같이 비슷한 환경을 만든거에요 ㅋㅋ 동영상에서와 같이 각종 포털 사이트에서 작은배너를 큰배너로 확장시켜주는 영역들이 존재하는데요. 수요가 늘고 있어서 간단하게 제이쿼리(jquery) 플러그인으로 만들어봤어요. 플러그인은 홈페이지에서 다운받아 이용해보실수 있게 해놨어요. 이름은 bigbanner.js 라고 찾으시면 나올거에요 ㅎㅎ 그렇다면 이제 사용법에 대해서 한번 볼게요. 먼저 위과 같이 html을 작성해주셔야 하는데요. id는 어떤것이든 원하는것로 해주시고요. 첫번째 a태그 안에는 작은배너 이미지를 넣어주시고요. areabig 클래스 안에는 큰 배너이미지 또는 별도로 html 내용을 넣어주세요. CSS는 작은배너 사이즈..

문득 마트에서 카드로 계산하다가 든 생각인데요. "스마트폰으로 싸인을 받을순 없을까?" 하는 쓸때 없는 생각이 ㅋㅋㅋㅋㅋ 쓸때 없는 생각이라도 나중에 쓸모가 있지 않을까해서 제이쿼리(jquery) 플러그인으로 만들어 봤어요. 사실 이 제이쿼리(jquery) 플러그인은 간단해서 만들어진지 꽤 되었으나 블로그에 쓰는걸 깜박하고 이제야 쓰네요. 아쉽지만 스마트폰으로 화면 동영상을 캡쳐할만한 어플을 아직 찾지 못한 관계로 그냥 이미지로 올려요. 위 이미지는 제이쿼리(jquery) 플러그인 테스트 화면인데요. 정해진 영역에 손으로 쓰쓱~ 싸인을 할수 있어요. 뿐만 아니라 추출해서 form에 데이터를 담아 보낼수도 있죠. 이게 싸인이 데이터화 되어 form으로 전송된 결과인데요. 보시는것처럼 이미지가 문자화코드화 ..