그냥 개발자 블로그

브라우저 종류에 관계 없이 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을 실행해 줍니다. [옵션설명] $(..

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

페이드인-아웃 되는 배너를 넣고 싶을때 jquery 소스를 일일이 짜지 말고 플레이그라운드에서 만든 플러그인을 이용하시면 편리해요. 위 영상과 같은 효과를 낼수 있어요. 반응형으로 만들어진 사이트에서도 이용이 가능해하고요. 이미지경로를 설정만으로 자동으로 동작하고, 이미지가 바뀌는 시점도 시간으로 컨트롤 할 수 있어요. 여기에서 플러그인을 다운로드 할 수 있으니 다운로드 하셔서 따라 해보세요.플러그인 이름은 bgSlideBanner.js 에요.아! css 스타일은 작성 원하시는대로 해도 상관 없어서 따로 작성 안해 놨으니 참고하세요. [버전] 1.0 버전최초 작성 [사용법] The Association of American State Offices In Korea 1. 다운로드 받은 플러그인을 연결하세요..

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

웨딩스튜디오의 홈페이지를 만들면서 새로운 갤러리 형태를 만들어야 했어요. 그래서 탄생한 jquery plugin 인데요. 레이어 팝업 형태로 나타나 마우스 위치에 따라 자동으로 천천히 스크롤 되게 되어 있죠. 적용된 예제 영상을 일단 한번 보실게요. ie11,edge,chrome 에서 테스트된 플러그인이구요. 갤러리를 구현하기 위해서는 워크식스의 PLUGIN SHARE 에서 slideGallery.js 를 찾아 다운로드 받아 사용하시면 되요. 사용을 위한 설치는 다음과 같아요. //갤러리에서 동작시킬 이미지를 합친 이미지 slideGallery.js 다운 받아 서버에 넣었다면 해당경로를 그렇지 않다면 위 처럼 써주어 연결 합니다. //갤러리에서 동작시킬 이미지를 합친 이미지 스타일은 필수요소만 넣어 두었..

제 홈페이지 워크식스에서는 제가 만든 jquery(제이쿼리) 플러그인들을 공유하고 있는데요. jquery의 사용법을 몰라 어찌할바를 모르는분들이 있어서 이와 같은 글을 작성하게 되었어요. 간단하게 jquery 플러그인을 사용할수 있는 방법만 안내할게요. 일반적으로 웹 페이지는 다음과 같은 문서 구조를 가지고 있으며 jquery(제이쿼리)를 사용하기 위한 최소한의 조건을 작성해놓은 상태에요. 자세히 하나씩 살펴볼까요? jquery를 사용하기위해서는 jquery.js 또는 jquery.min.js 라는 문서가 필요해요. http://jquery.com에서 다운로드 받아 자신의 서버에 업로드 할수 있는데요. 신규버전이 나올때마다 문서를 교체해서 업그레이드해줘야 하는 불편하기 때문에 CDN 이라는걸 이용해요. ..