DeviceMock으로 브라우저에 장치 목업 만들기
PSD에서 스케치 파일에 이르는 다양한 온라인 장치를 무료로 찾을 수 있습니다. 하지만, 신속하게 온 - 더 - 플라이 (on-the-fly) 장치 모형 만들기 브라우저에서?
음, rm-labo의 여러분 덕분에 가능합니다! 무료 jQuery 플러그인 인 DeviceMock.js를 사용하면 페이지 요소 주위에 벡터 장치 감싸기, 간단한 자바 스크립트와 SVG 사용하기.
그래서 정확히 어떻게 작동합니까??
음, 먼저 네가 필요해. jQuery의 복사본 과 GitHub의 DeviceMock 플러그인 버전. JS 파일, CSS 파일 및 SVG 파일을 사용하여 실제 장치를 만듭니다..
너는 할 수있다. 모든 유형의 요소 타겟팅 페이지에서, 간단한 이미지에서 전체 div로, 또는 iframe과 같은 내장 된 요소까지도 포함 할 수 있습니다. 즉, 멋진 미니 브라우저 구축 귀하의 사이트에서 iframe과 다른 페이지로 바로 이동하십시오..
이 플러그인은 다섯 가지 장치 유형:
- 웹 브라우저
- 스마트 폰
- 태블릿
- 데스크톱
- 휴대용 퍼스널 컴퓨터
이 모든 모형은 다음을 사용합니다. 평면 디자인 스타일 그것들은 SVG로 만들어 졌기 때문에. 그리고 그것들은 모두 애플 기기와 매우 유사하게 보입니다. 예를 들어, 스마트 폰은 아이폰의 복제품이고, 데스크톱 모니터는 아이맥과 같이 눈에 띄게 보입니다.
이 모든 벡터는 쉽게 추가 할 수 있으며 SVG를 지원하는 모든 브라우저.
너는 심지어 속성 변경 모형 (흰색 / 검정색) 및 방향 (세로 풍경).
브라우저 모형을 사용하는 경우에도 가짜 URL을 지정하십시오 검색 주소창에 더 많은 사용자 정의를 추가하는 재미있는 방법입니다..
이 라이브러리는 모든 사람에게 유용하지는 않지만 틈새 문제를 해결합니까 프로토 타입 작성시 많은 UI / UX 개발자가 직면하는 문제.
자세한 내용은 GitHub 페이지 또는 라이브 사이트 활발한 데모.
