Библиотека JavaScript, чтобы добавить воздушный шар с сообщениями, указывающими на обязательные элементы управления ввода

Question

Когда моя веб-страница нагрузки пользователь должен быть предложено сделать несколько выборов в последовательности.

Я хочу сообщение воздушных шаров появляться с сообщениями что-то вроде - "Эй, так как вы выбрали свою страну, теперь выберите провинцию".Эти воздушные шары также должны указывать на этот конкретный контроль выбора.

Обратите внимание, что эти воздушные шары должны появиться в некотором вызове метода, который заставит их жить, а не, когда зависел, как подсказки

Любые предложения приветствуются

Answer 1

Посмотрите на этот плагин: http://zurb.com/playground/ jquery-joyride-feature-tour-plugin .

Я не уверен в вашей HTML-структуре, но вот что вы делаете. В вашем HTML каждое место, где вы хотите, чтобы ваш «воздушный шар», чтобы, кажется, вам необходимо указать идентификатор якора.

(примеры, взятые из официальной документации)

Например, если вы хотите «воздушный шар» над href, то:

/* Joyride can be attached to any element with a unique ID or class, in any order */
<h3 id="yourHeaderID"></h3>
<p class="your-paragraph-class"></p>
<a id="yourAnchorID" href="#url"></a>

.

После того, как вы настроите анкеры, вам нужно определить, как ваш воздушный шар должен выглядеть.Для каждого anchor id ваш должен указать data-attribute с этим идентификатором, если не указан, то воздушный шар будет прикреплен к элементу body.Пример изучения ниже:

/* Each tip is set within this <ol>. */
/* This creates the order the tips are displayed */
<ol id="chooseID">
  /* data-id needs to be the same as the parent it will attach to */
  <li data-id="newHeader">Tip content...</li>

  /* This tip will be display as a modal */
  <li>Tip content...</li>

  /* using 'data-button' lets you have custom button text */
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>

  /* you can put a class for custom styling */
  <li data-id="parentElementID" class="custom-class">Content...</li>
</ol>

.

Тогда вам нужно добавить немного магии JavaScript, чтобы сделать все работать:

/* Launching joyride when to page is loaded */

<script>
$(window).load(function() {
  $("#chooseID").joyride({
    /* Options will go here */
  });
});
</script>

.

Есть несколько вариантов, которые вы можете установить, просмотрите ссылку выше.