Статьи

Представляем ваше приложение с овчаркой

Январь 29, 2019

Как веб-разработчик, вы, вероятно, понимаете, что создание приложения часто является легкой задачей — представить его миру — непростая задача. Некоторые предпочитают создавать презентации, другие делают видео. Разве не было бы неплохо, если бы у вас было что-то, что могло бы помочь вашим пользователям пройти через ваше приложение?

Войдите в Пастуха, через HubSpot. Shepherd — это простая библиотека JavaScript, которая поможет вам провести пользователей по всему приложению. Это поможет вам направить пользователей в нужное место, точно так же, как пастух заботится о своем стаде овец.

Есть и другие библиотеки для этой цели, но я предпочитаю Shepherd, потому что он не имеет никаких зависимостей. Он также поддерживает CoffeeScript, хотя здесь мы будем изучать только JavaScript.

Начиная

Shepherd с открытым исходным кодом и его код можно найти на GitHub . Демоверсия Shepherd также доступна на Hubspot . Давайте начнем.

Для нетерпеливых, вот основной код для начала. Это создаст один шаг вашего приложения. Это привязывает диалог к ​​нижней части элемента, соответствующего селектору #id_selector 

 var tour = new Shepherd.Tour({
  defaults: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

tour.addStep('myStep', {
  title: 'Hi there!',
  text: 'This would help you get started with this application!',
  attachTo: '#id_selector bottom',
  classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
  buttons: [
    {
      text: 'Exit',
      classes: 'shepherd-button-secondary',
      action: function() {
        return tour.hide();
      }
    }
  ]
});

Ломая пастуха

Теперь, когда у вас запущен простой код, давайте разберем шаги на части, которые мы можем понять.

Включает

Вам нужно включить один JavaScript-файл Shepherd. Пастух также поставляется с темой по умолчанию, содержащейся в файле CSS. 

 <link type="text/css" rel="stylesheet" href="css/shepherd-theme-arrows.css" />
<script type="text/javascript" src="./shepherd.min.js"></script>

Инициализировать Пастыря

В следующем примере кода показано, как создается тур с помощью JavaScript. Поскольку вы вскоре добавите шаги к своему туру, опция по defaults 

 tour = new Shepherd.Tour({
  defaults: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

Создание шагов

Давайте еще раз проверим этот код «начало работы». Вот код, который инициирует один шаг тура: 

 tour.addStep('myStep', {
  title: 'Hi there!',
  text: 'This would help you get started with this application!',
  attachTo: '#id_selector bottom',
  classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
  buttons: [
    {
      text: 'Exit',
      classes: 'shepherd-button-secondary',
      action: function() {
        return tour.hide();
      }
    }
  ]
});

Вы можете прикрепить дополнительную кнопку, если планируете выполнить несколько шагов. Ниже приведен пример использования кнопок, если у вас есть два шага: 

 tour.addStep('step1', {
  ...
  buttons: [
    {
      text: 'Exit',
      classes: 'shepherd-button-secondary',
      action: function() {
        return tour.hide();
      }
    }, {
      text: 'Next',
      action: tour.next,
      classes: 'shepherd-button-example-primary'
    }
  ]
});

tour.addStep('step2', {
  ...
  buttons: [
    {
      text: 'Back',
      action: tour.back,
      classes: 'shepherd-button-example-primary'
    }, {
      text: 'Exit',
      classes: 'shepherd-button-secondary',
      action: function() {
        return tour.hide();
      }
    } 
  ]
});

Начать тур

После настройки тура остается только запустить его! 

 tour.start();

API

Shepherd предоставляет обширный API, а также документацию , объясняющую его поведение. Здесь мы пройдем несколько полезных звонков.

Экземпляры тура

Сначала создайте тур, как показано ниже. 

 myTour = new Shepherd.Tour({ options })

Теперь мы посмотрим, как мы можем работать с этим экземпляром. stepsdefaults Его методы описаны ниже.

  • addStep(id, options)textbuttons
  • getById(id)
  • show(id)
  • on(event, handler) Это похоже на метод jQuery bind() .
  • off(event, handler)

Экземпляр тура также имеет такие события, как startcompleteshowhide

меры

Хотя мы добавили шаги раньше, давайте посмотрим поближе. В следующем списке описаны параметры, которые вы можете определить.

  • title
  • text
  • attachTo#id_selector bottom
  • classes Это зависит от темы, которую вы используете.
  • buttons Каждая кнопка имеет textclassesaction

Существуют различные методы, которые могут быть использованы для облегчения вашей задачи. Вот некоторые из полезных:

  • show()
  • hide()
  • cancel()
  • complete()
  • destroy()
  • on(event, handler)
  • on(event, handler)

Вывод

Хотя Shepherd выглядит довольно многообещающе, один замеченный мной сбой — поддержка браузером IE 9+. Но если вы не планируете поддерживать старые браузеры, попробуйте.

Вы можете найти живое демо на основе кода этой статьи на GitHub . Демо может быть дополнительно изменено. Вы можете попробовать привязать обработчики событий для клавиш со стрелками к навигации Shepherd. Вы также можете создавать CSS-классы и прикреплять их к разным элементам, чтобы сместить фокус с одного элемента на другой.

34
Share: