그냥 개발자 블로그

전체화면을 가리고 그 위로 레이어팝업을 띄어야 할때 이용 레이어팝업 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) 플러그인으로 만들어봤어요. 플러그인은 홈페이지에서 다운받아 이용해보실수 있게 해놨어요. 이름은 bigbanner.js 라고 찾으시면 나올거에요 ㅎㅎ 그렇다면 이제 사용법에 대해서 한번 볼게요. 먼저 위과 같이 html을 작성해주셔야 하는데요. id는 어떤것이든 원하는것로 해주시고요. 첫번째 a태그 안에는 작은배너 이미지를 넣어주시고요. areabig 클래스 안에는 큰 배너이미지 또는 별도로 html 내용을 넣어주세요. CSS는 작은배너 사이즈..

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

모바일웹은 화면이 좁아서 많은 메뉴를 넣기 애매할때가 자주 있죠. 그럴때 사용하면 좋은것이 회전메뉴인데요. 회전메뉴가 뭐냐구요? 아래 영상을 한번 보실게요. 이게 회전 메뉴에요. 회전메뉴를 통해서 좁은공간에도 많은 메뉴를 사용할수 있다는게 장점이죠. 그러나 구현이 복잡하다는게 단점인데요. 회전메뉴 단점을 극복하고자 제이쿼리(jquery) 플러그인을 만들었어요. 예제를 통해서 사용법을 살펴보면.... 15378264 Menu 우선 태그를 이렇게 작성해주었어요. 다른때 제이쿼리(jquery) 관련 포스팅보다 태그가 많은데요. 원형을 만들어야 하다보니 어쩔수 없었네요. id적힌곳이 두개가 보이는데 는 원하는대로 적어주시면 되요. 단, rmlist는 필수 클래스명로 변경되어선 안되요. 15378264 Menu ..

3일만에 새로운 플러그인을 내놓아요. 흔히들 쇼핑몰에서 스카이배너라 불리우는 따라다니는 배너를 구현하는 플러그인이에요. 일단 테스트 영상 함 보실게요. 요런 기능들 많이 보셨죠? 이 기능은 자주 이용하는 메뉴들을 늘 화면에 특정 위치에 존재하게하는 역할로 사이트 방문자들에게 보다 빠른 이동을 가능하게 해주죠. 요즘은 기본적으로 많이 탑재된 기능인데 간혹 디자인이 변경되었거나 실수로 기능이 삭제 되었을 경우 되살리기들 힘들어 하시더라고요. 그래서 플러그인으로 만들어 봤어요. 여타 다른 플러그인들과 마찬가지로 여기홈페이지에서 skyBanner.js 플러그인을 받아가실수 있고요. 영상에서 보여드린 예제를 통해서 사용법을 알아보죠. 예제에 사용된 html 이에요. 보통 사이트에 width 사이즈를 지정하여 가운..