기존 코드베이스와 함께 응용 프로그램 셰퍼드를 사용할 수 있습니까? Application Shepherd는 기존 코드베이스와 쉽게 통합 할 수 있도록 설계되었습니다. 독립형 라이브러리이므로 사용할 특정 프레임 워크 나 기술이 필요하지 않습니다. 단순히 프로젝트로 가져 와서 가이드 생성을 시작할 수 있습니다. 응용 프로그램 셰퍼드 모바일 친화적인가? 데스크탑 및 모바일 장치 모두에서. 가이드는 화면 크기에 맞게 자동으로 조정하여 모든 장치에서 훌륭한 사용자 경험을 보장합니다. 전용 커뮤니티 나 지원은 없지만 전용 커뮤니티 나 지원이 없습니다. 응용 프로그램 목자 네트워크, 일반 JavaScript 및 웹 개발 포럼 및 커뮤니티에 대한 도움과 조언을 찾을 수 있습니다. Application Shepherd의 문서는 라이브러리를 효과적으로 사용하는 방법을 배우는 훌륭한 자료입니다.
HubSpot이 개발 한
시작하기
목자는 오픈 소스이며 코드는 Github에서 찾을 수 있습니다. 셰퍼드의 데모는 Hubspot에서도 제공됩니다. 시작합시다.
참을성이 없어도 여기에 시작할 기본 코드가 있습니다. 이것은 응용 프로그램의 한 단계 여행을 만듭니다. 이것은 대화 상자를 선택기 #id_selector와 일치하는 요소의 맨 아래에 바인딩합니다.
<span>var tour = new Shepherd<span>.Tour</span>({
</span> <span>defaults: {
</span> <span>classes: 'shepherd-theme-arrows',
</span> <span>scrollTo: true
</span> <span>}
</span><span>});
</span>
tour<span>.addStep('myStep', {
</span> <span>title: 'Hi there!',
</span> <span>text: 'This would help you get started with this application!',
</span> <span>attachTo: '#id_selector bottom',
</span> <span>classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
</span> <span>buttons: [
</span> <span>{
</span> <span>text: 'Exit',
</span> <span>classes: 'shepherd-button-secondary',
</span> <span>action: function() {
</span> <span>return tour.hide();
</span> <span>}
</span> <span>}
</span> <span>]
</span><span>});</span> 포함
단일 목자 JavaScript 파일을 포함해야합니다. Shepherd는 또한 CSS 파일에 포함 된 기본 테마와 함께 제공됩니다.
단계 생성
"시작하기"코드를 다시 확인해 봅시다. 다음은 투어의 단일 단계를 시작하는 코드입니다.
<span><span><span><link</span> type<span>="text/css"</span> rel<span>="stylesheet"</span> href<span>="css/shepherd-theme-arrows.css"</span> /></span>
</span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="./shepherd.min.js"</span>></span><span><span></script</span>></span></span>
투어 시작
투어를 설정 한 후 남은 것은 시작하는 것입니다!
API tour <span>= new Shepherd<span>.Tour</span>({
</span> <span>defaults: {
</span> <span>classes: 'shepherd-theme-arrows',
</span> <span>scrollTo: true
</span> <span>}
</span><span>});</span>
이제 우리는이 인스턴스로 어떻게 일할 수 있는지 확인할 것입니다. 단계 및 기본값은 투어 인스턴스의 옵션입니다. 그 방법은 아래에 설명되어 있습니다.
addStep (id, 옵션) - 위에서 본 것처럼 ID를 할당 한 다음 텍스트 나 버튼과 같은 옵션을 추가하여 나중에 설명합니다.
getByid (id) -이 메소드는 ID로 특정 단계를 선택하는 데 사용됩니다.
show (id) - ID로 특정 단계를 표시합니다
(이벤트, 핸들러) - 이벤트를 투어에 바인딩합니다. 이것은 jQuery의 bind () 메소드와 유사합니다
꺼짐 (이벤트, 핸들러) - 이벤트를 풀립니다.
투어 인스턴스에는 시작, 완료, 쇼 및 숨은 이벤트도 있습니다.
단계
우리는 전에 단계를 추가했지만 자세히 살펴 보겠습니다. 다음 목록은 정의 할 수있는 옵션을 설명합니다.
제목 - 제목을 적용하거나 적용하지 않을 수도 있습니다.
응용 프로그램 셰퍼드 설치 간단합니다. NPM NPM 설치 응용 프로그램 목자를 사용하여 NPM을 통해 설치할 수 있습니다. 일단 설치되면 'Application-Shepherd'의 Import Shepherd를 사용하여 프로젝트로 가져올 수 있습니다. 목자는 광범위한 사용자 정의를 허용합니다. 색상, 크기, 위치 및 더 많은 가이드 요소를 변경할 수 있습니다. 이를 통해 앱의 모양과 느낌과 일치하는 가이드를 만들어 원활한 사용자 경험을 제공 할 수 있습니다.Application Shepherd는 복잡한 다중 단계 가이드를 처리하는 방법은 무엇입니까?
Application Shepherd는 복잡한 가이드를 쉽게 처리하도록 설계되었습니다. 일련의 작업을 통해 사용자를 안내하는 다중 단계 가이드를 만들 수 있습니다. 각 단계에는 고유 한 텍스트, 위치 및 동작이있어 상세하고 대화식 가이드를 만들 수 있습니다. 응용 프로그램 목자는 사용 편의성과 유연성으로 인해 눈에 띄게됩니다. 다른 라이브러리는 효과적으로 사용하기 위해 더 많은 기술적 지식이 필요할 수 있지만, Application Shepherd는 모든 기술 수준의 개발자가 액세스 할 수 있도록 설계되었습니다. 또한 광범위한 사용자 정의 옵션을 제공하여 앱의 모양과 느낌과 일치하는 안내서를 만들 수 있습니다.
예, 응용 프로그램 셰퍼드는 훌륭한 도구입니다. 새로운 사용자의 보드. 앱을 통해 새로운 사용자를 안내하는 세부적인 단계별 가이드를 만들어 효과적으로 사용하는 방법을 이해하도록 도와 줄 수 있습니다. 애플리케이션 셰퍼드를위한 커뮤니티 또는 지원 네트워크가 있습니까?
위 내용은 Shepherd와 함께 신청서를 소개합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
