필수 입력 컨트롤을 가리키는 메시지가 포함된 풍선을 추가하는 Javascript 라이브러리

Question

내 웹페이지가 로드되면 사용자에게 몇 가지 항목을 순서대로 선택하라는 메시지가 표시되어야 합니다.

"안녕하세요, 국가를 선택하셨으니 이제 지역을 선택하세요."와 같은 메시지가 포함된 메시지 풍선이 팝업되기를 원합니다.또한 이러한 풍선은 해당 특정 선택 컨트롤을 가리켜야 합니다.

이러한 풍선은 툴팁처럼 마우스를 올렸을 때가 아니라 활성화되도록 하는 일부 메서드 호출에 나타나야 합니다.

어떤 제안이라도 환영합니다

Answer 1

이 플러그인을 살펴보세요: http://zurb.com/playground/jquery-joyride-feature-tour-plugin.

귀하의 HTML 구조에 대해 잘 모르겠지만 여기에 귀하가 수행하는 작업이 있습니다.HTML에서 '풍선'을 표시하려는 모든 위치에 앵커 ID를 지정해야 합니다.

(공식 문서에서 가져온 예)

예를 들어, 위에 '풍선'을 원하는 경우 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 해당 ID를 지정하지 않으면 풍선이 다음에 첨부됩니다. 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>

그런 다음 모든 것이 작동하도록 하려면 일부 자바스크립트 매직 스타트를 추가해야 합니다.

/* Launching joyride when to page is loaded */

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

설정할 수 있는 옵션이 몇 가지 있습니다. 위의 링크를 검토하세요.