그냥 개발자 블로그

집중된 정보 전달을 위해서는 원페이지 홈페지이가 적절합니다. 다음은 마케팅 기업인 피엔브릿지의 홈페이지 제작 후기 입니다. 홈페이지는 원페이지로 제작되었으며, 반응형으로 제작되어 PC는 물론 모바일에서도 이용자들에게 명확히 정보 전달을 하고 있습니다. 또한 홈페이지 하단에 견적문의 메모를 남길수 있는 기능을 두어, 고객이 메모를 남기면 사전에 설정된 이메일로 내용이 발송됩니다. 원페이지 홈페이지 제작문의는 워크식스를 이용해 주세요. copyright (c) 2017 워크식스

탭메뉴를 간단히 구현하는 플러그인 버튼1 버튼2 버튼3 버튼4 콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠4 1. 제이쿼리가 연결되어 있어야 합니다. 버튼1 버튼2 버튼3 버튼4 콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠4 2. 다운로드 받은 플러그인을 설치한 경로를 지정해 줍니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 버튼1 버튼2 버튼3 버튼4 콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠4 3. 기본 html 태그 및 스타일을 추가해 줍니다. 버튼1 버튼2 버튼3 버튼4 콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠4 4. 페이지가 실행되면 동시에 실행될 수 있는 위치에 함수를 위치 시킵니다. 5. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다. [문의하기] copyright ⓒ 2017. 워크식스

모바일웹에서 swipe menu가 필요할때사용.양쪽모두 swipe 이용가능 1. 제이쿼리 설치가 필요합니다. 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 위와 같이 레이아웃을 구성합니다. 4. 페이지 로딩시 실행되는 스크립트에 다음과 같이 함수를 추가 합니다. $('#swipemenu').swipeMenu({ type:1, // 1:양쪽, 2:왼쪽, 3:오른쪽 speed:300, // 메뉴움직임 속도 side_width:250 // 메뉴 폭 }); 5. 원하는 옵션을 설정 합니다. 6. 소스는 여기에서 다운로드 받을수 있습니다. [문의하기] copyright ⓒ 2017. 워크식스

제이쿼리를 이용한 책장 넘기는 효과를 구현한 플러그인 1. 제이쿼리를 설치해 줍니다. 2. 다운로드 받은 플러그인을 설치해 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 위와 같이 책의 내용을 한장씩 이미지로 추가합니다. 4. 페이지가 실해될때 자바스크립도 동시에 실행되는 위치에 함수를 작성합니다. $('#book').book({ speed:15, //페이지 넘기는 속도를 조절합니다. (추천 값 = 15) bookgb: '#666' // 페이지의 맨 앞장과 맨 뒷장의 배경을 지정 합니다. }); 5. 필요한 옵션을 적용 합니다. 6. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다. [문의하기] copyright ⓒ 2017. 워크식스

레이어팝업 또는 토스트팝업 구현을 도와주는 플러그인 1. 제이쿼리가 설치가 필요합니다. 2. 다운로드한 플러그인을 설치합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 위와 같이 원하는 함수명으로 함수를 만듭니다. $('body').pgpopup({ type:'toast', // 팝업형태 (toast, layer, slide) msg:'welcome', // 메시지 padding:'5px', // 여백 width:'50%', // 토스트폭, %로 지정 color:'#ffffff', // 내용 글자색 bgcolor:'#111111', // 레이어 배경색, #111111 와 같이 헥사코드 이용 transparency:'0.8', // 투명도, 0.8 과 같이 값을 입력, 최..

사이트 최상단에 위치하여 본문을 아래로 밀어내는 기능을 가지고 있으면 오늘은 그만 보기 기능도 가지고 있는 플러그인 오늘은 더이상 보지 않기 닫기 1. 제이쿼리 설치가 필요 합니다. 오늘은 더이상 보지 않기 닫기 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 오늘은 더이상 보지 않기 닫기 3. 상단 배너 기본구조의 html 태그를 위와 같이 작성 합니다. 오늘은 더이상 보지 않기 닫기 4. 페이지가 실행될때 자동으로 실행될 수 있도록 함수를 작성 합니다. $('#banner1').dropdwonbanner({ todayClose:'.todayclose', //오늘은 더 이상 보지 않기 버튼을 설정 합니다. close:'.close', /..

자동 또는 수동으로 동작 가능한 이미지슬라이드를 구현하게 해주는 플러그인 1. 제이쿼리 설치가 필요 합니다. 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 3. 배너 레이아웃 및 스타일을 작성 합니다. 4. 페이지가 열릴때 플러그인 자동으로 실행될 수 있도록 함수를 작성 합니다. $(function(){ $('#banner1').slidebanner({ page:true, //페이지를 사용여부 설정 arrow:{left:'◀',right:'▶'}, //좌우 이동 사용 여부 및 버튼 모양 설정 auto:true, //배너를 자동으로 동작 여부 설정 speed:3000, //배너 변경시 속도 설정 delay:3000 //배너가 멈추어 있는 ..

엣지, 익스플로러, 크롬 등에서 스크롤바에 스타일을 적용할 수 있게 해주는 플러그인 내용 1. 제이쿼리가 설치되어 있어야 합니다. 내용 2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. ) 내용 3. 설치를 원하는 엘리먼트에 아이디를 부여합니다. 내용 4. 페이지가 실행될때 동시에 실행할 수 있도록 함수를 작성해 줍니다. $('#test').thinScrollbar({ scrollbarcolor : '#ddd', // 스크롤바 배경색을 결정 합니다. 헥사코드로 작성해야 하며 기본값은 #ddd 입니다. slidercolor : '#555' // 스크롤바 색을 결정 합니다. 헥사코드로 작성해야 하며 기본값은 #555 입니다. }); 5. 필요한 옵..