Shepherd와 함께 신청서를 소개합니다

키 테이크 아웃

HubSpot이 개발 한 Shepherd는 응용 프로그램 투어를 통해 사용자를 안내하는 데 도움이되는 간단한 JavaScript 라이브러리입니다. 도서관은 오픈 소스이며 의존성이 없으므로 개발자에게 선호하는 선택입니다. 그것은 각각 자체 텍스트, 위치 및 동작으로 단계를 만들 수 있으며 사용자 정의를위한 광범위한 API를 제공합니다. 유망한 기능에도 불구하고 목자는 특히 IE 9에 대한 브라우저 지원이 제한되어 있습니다. 그러나 개발자가 구형 브라우저를 지원하지 않을 계획하는 유용한 도구 일 수 있습니다. 또한 간단한 API 및 명확한 설명서를 제공하여 모든 기술 수준의 개발자가 액세스 할 수 있습니다. 웹 개발자로서, 당신은 아마도 응용 프로그램을 만드는 것이 종종 쉬운 부분이라는 것을 알고있을 것입니다. 세상에 그것을 제시하는 것은 그 자체로 오르막 작업입니다. 어떤 사람들은 프레젠테이션을 만드는 것을 선호하고 일부는 비디오를 만듭니다. 사용자가 앱을 통해 사용자를 안내하는 데 도움이된다면 좋지 않습니까? Hubspot에 의해 목자에 들어갑니다. Shepherd는 간단한 JavaScript 라이브러리로 응용 프로그램 여행을 통해 사용자를 안내하는 데 도움이됩니다. 목자가 양 떼를 돌보는 것처럼 사용자를 올바른 장소로 안내하는 데 도움이됩니다. 이 목적을위한 다른 도서관도 있지만 목자를 선호하는 이유는 의존성이 없기 때문입니다. 또한 커피 스크립트를 지원하지만 여기에서만 JavaScript 만 탐색 할 것입니다.

시작하기

목자는 오픈 소스이며 코드는 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 파일에 포함 된 기본 테마와 함께 제공됩니다.

셰퍼드 초기화 다음 코드 샘플은 JavaScript를 통해 투어가 어떻게 생성되는지 보여줍니다. 투어에 곧 단계를 추가 할 것이므로 초기화의 기본값 옵션은 해당 옵션을 모든 단계에 추가하지 않는 한 모든 단계에 해당 옵션을 추가합니다.

단계 생성 "시작하기"코드를 다시 확인해 봅시다. 다음은 투어의 단일 단계를 시작하는 코드입니다.

<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>

셰퍼드는 광범위한 API와 그 행동을 설명하는 문서를 제공합니다. 여기에서는 유용한 전화를 거칩니다. 투어 인스턴스 먼저 아래 그림과 같이 투어를 만듭니다.

이제 우리는이 인스턴스로 어떻게 일할 수 있는지 확인할 것입니다. 단계 및 기본값은 투어 인스턴스의 옵션입니다. 그 방법은 아래에 설명되어 있습니다.

addStep (id, 옵션) - 위에서 본 것처럼 ID를 할당 한 다음 텍스트 나 버튼과 같은 옵션을 추가하여 나중에 설명합니다. getByid (id) -이 메소드는 ID로 특정 단계를 선택하는 데 사용됩니다. show (id) - ID로 특정 단계를 표시합니다 (이벤트, 핸들러) - 이벤트를 투어에 바인딩합니다. 이것은 jQuery의 bind () 메소드와 유사합니다 꺼짐 (이벤트, 핸들러) - 이벤트를 풀립니다. 투어 인스턴스에는 시작, 완료, 쇼 및 숨은 이벤트도 있습니다.

단계 우리는 전에 단계를 추가했지만 자세히 살펴 보겠습니다. 다음 목록은 정의 할 수있는 옵션을 설명합니다.

제목 - 제목을 적용하거나 적용하지 않을 수도 있습니다.

텍스트 - 단계에 표시 될 텍스트.
• att 클래스 - 대화 상자에 추가 할 추가 클래스. 이것은 당신이 사용하는 테마에 따라 다릅니다.
버튼 - 표시 할 버튼 목록. 각 버튼에는 텍스트, 추가 클래스를 추가 할 추가 클래스 및 버튼을 클릭 할 때 수행 할 동작이 있습니다.
• 작업을보다 쉽게 ​​만드는 데 사용할 수있는 다양한 방법이 있습니다. 다음은 유용한 것 중 일부입니다.
show () - 단계를 보여줍니다 hide () - 단계를 숨 깁니다 cancel () - 단계를 숨기고 투어를 취소하십시오. complete () - 단계를 숨기고 투어를 완료하십시오. Destrove () - 단계를 파괴합니다 (이벤트, 핸들러) - 이벤트를 바인딩합니다. (이벤트, 핸들러) - 이벤트를 해제합니다.
결론
• 목자가 꽤 유망한 것처럼 보이지만, 내가 알아 차린 딸꾹질은 IE 9의 브라우저 지원입니다. 그러나 오래된 브라우저를 지원할 계획이 없다면 시도해보십시오. GitHub 에서이 기사의 코드를 기반으로 라이브 데모를 찾을 수 있습니다. 데모는 추가로 수정 될 수 있습니다. Shepherd Navigation의 화살표 키의 바인딩 이벤트 처리기를 시도 할 수 있습니다. 또한 CSS 클래스를 만들어 다른 요소에 연결하여 한 요소에서 다른 요소로 초점을 바꿀 수 있습니다. 응용 프로그램 셰퍼드
에 대한 자주 묻는 질문 (FAQ) 응용 프로그램 셰퍼드 란 무엇이며 Shepherd.js와 어떻게 다릅니 까? Shepherd.js와는보다 사용자 친화적이고 구현하기 쉽도록 설계되었다는 점에서 Shepherd.js와는 다릅니다. Shepherd.js는 강력한 도구이지만 효과적으로 사용하려면 JavaScript에 대한 더 깊은 이해가 필요합니다. 반면에 응용 프로그램 셰퍼드는 간단한 API와 명확한 문서를 통해 모든 기술 수준의 개발자가 액세스 할 수 있도록 설계되었습니다.
• 응용 프로그램 셰퍼드를 설치하려면 어떻게해야합니까?

응용 프로그램 셰퍼드 설치 간단합니다. NPM NPM 설치 응용 프로그램 목자를 사용하여 NPM을 통해 설치할 수 있습니다. 일단 설치되면 'Application-Shepherd'의 Import Shepherd를 사용하여 프로젝트로 가져올 수 있습니다. 목자는 광범위한 사용자 정의를 허용합니다. 색상, 크기, 위치 및 더 많은 가이드 요소를 변경할 수 있습니다. 이를 통해 앱의 모양과 느낌과 일치하는 가이드를 만들어 원활한 사용자 경험을 제공 할 수 있습니다.Application Shepherd는 복잡한 다중 단계 가이드를 처리하는 방법은 무엇입니까?

Application Shepherd는 복잡한 가이드를 쉽게 처리하도록 설계되었습니다. 일련의 작업을 통해 사용자를 안내하는 다중 단계 가이드를 만들 수 있습니다. 각 단계에는 고유 한 텍스트, 위치 및 동작이있어 상세하고 대화식 가이드를 만들 수 있습니다.

기존 코드베이스와 함께 응용 프로그램 셰퍼드를 사용할 수 있습니까? Application Shepherd는 기존 코드베이스와 쉽게 통합 할 수 있도록 설계되었습니다. 독립형 라이브러리이므로 사용할 특정 프레임 워크 나 기술이 필요하지 않습니다. 단순히 프로젝트로 가져 와서 가이드 생성을 시작할 수 있습니다.

응용 프로그램 셰퍼드는 다른 사용자 안내서 라이브러리와 어떻게 비교됩니까?

응용 프로그램 목자는 사용 편의성과 유연성으로 인해 눈에 띄게됩니다. 다른 라이브러리는 효과적으로 사용하기 위해 더 많은 기술적 지식이 필요할 수 있지만, Application Shepherd는 모든 기술 수준의 개발자가 액세스 할 수 있도록 설계되었습니다. 또한 광범위한 사용자 정의 옵션을 제공하여 앱의 모양과 느낌과 일치하는 안내서를 만들 수 있습니다.

응용 프로그램 셰퍼드 모바일 친화적인가? 데스크탑 및 모바일 장치 모두에서. 가이드는 화면 크기에 맞게 자동으로 조정하여 모든 장치에서 훌륭한 사용자 경험을 보장합니다.

신규 사용자를 온 보드에 응용 프로그램 셰퍼드를 사용할 수 있습니까?

예, 응용 프로그램 셰퍼드는 훌륭한 도구입니다. 새로운 사용자의 보드. 앱을 통해 새로운 사용자를 안내하는 세부적인 단계별 가이드를 만들어 효과적으로 사용하는 방법을 이해하도록 도와 줄 수 있습니다.

응용 프로그램 셰퍼드로 생성 된 안내서를 어떻게 업데이트하거나 수정합니까? Application Application Shepherd에서는 가이드 업데이트 또는 수정이 쉽습니다. 코드의 가이드 단계의 속성을 간단히 변경하면 변경 사항이 안내서에 반영됩니다. 이를 통해 앱이 발전함에 따라 가이드를 최신 상태로 유지할 수 있습니다.

애플리케이션 셰퍼드를위한 커뮤니티 또는 지원 네트워크가 있습니까?

전용 커뮤니티 나 지원은 없지만 전용 커뮤니티 나 지원이 없습니다. 응용 프로그램 목자 네트워크, 일반 JavaScript 및 웹 개발 포럼 및 커뮤니티에 대한 도움과 조언을 찾을 수 있습니다. Application Shepherd의 문서는 라이브러리를 효과적으로 사용하는 방법을 배우는 훌륭한 자료입니다.

위 내용은 Shepherd와 함께 신청서를 소개합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!