当我的网页加载时,应该提示用户按顺序进行一些选择。
我希望消息气球弹出消息,例如 - “嘿,既然你已经选择了你的国家,现在选择省份”。这些气球也应该指向那个特定的选择控件。
请注意,这些气球应该出现在一些可以使它们生效的方法调用上,而不是像工具提示一样悬停时出现
欢迎任何建议
当我的网页加载时,应该提示用户按顺序进行一些选择。
我希望消息气球弹出消息,例如 - “嘿,既然你已经选择了你的国家,现在选择省份”。这些气球也应该指向那个特定的选择控件。
请注意,这些气球应该出现在一些可以使它们生效的方法调用上,而不是像工具提示一样悬停时出现
欢迎任何建议
看看这个插件: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>
然后,您需要添加一些 javascript 魔术开始以使一切正常:
/* Launching joyride when to page is loaded */
<script>
$(window).load(function() {
$("#chooseID").joyride({
/* Options will go here */
});
});
</script>
您可以设置一些选项,请查看上面的链接。