필요한 입력 컨트롤을 가리키는 메시지와 함께 풍선을 추가하는 Javascript 라이브러리

Question

내 웹 페이지가로드되면 사용자가 순서대로 몇 가지 선택을하도록 프롬프트가 표시됩니다.

메시지 풍선에 다음과 같은 메시지가 표시되도록하고 싶습니다. "네가 선택한 국가를 선택 했으니 지금은 그 지역을 선택하십시오." 이 풍선은 특정 선택 컨트롤을 가리켜 야합니다. http://zurb.com/playground/jquery-joyride-feature-tour-plugin :이 풍선

모든 제안을

Answer 1

이 플러그인을 살펴보십시오 환영 툴팁처럼 공중 선회 할 때 라이브하지 말라고 할 것 몇 가지 메서드 호출에 나타납니다,

알 수 있습니다.

귀하의 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마다 해당 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> 

그런 다음 당신이 모든 일을하기 위해 몇 가지 자바 스크립트 마법의 시작을 추가해야합니다

이

/* Launching joyride when to page is loaded */ 

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

설정할 수있는 옵션의 소수가 있습니다, 위의 링크를 참조하시기 바랍니다.