关于Bootstrap tour的使用 - ptzhuf/cehuayuan GitHub Wiki

引用bootstrap tour

<link href="resources/css/bootstrap-tour.css" rel="stylesheet" />
<script src="resources/js/bootstrap-tour.js"></script>

使用bootstrap tour

	<script type="text/javascript">
		//Instance the tour
		var tour = new Tour({
			debug : true,
			steps : [ {
				element : "#list-group-div",
				title : "活动报名引导",
				placement : "top",
				content : "欢迎首次访问改版后的来到"
			}, {
				element : "#list-group-div",
				title : "Title of my step",
				placement : "top",
				content : "Content 2 of my step"
			} ]
		});
		// Initialize the tour
		tour.init();
		// Start the tour
		tour.restart();
	</script>

遇到的问题
问题1，在使用过程中一开始一直不弹出引导框，只有在F12 的调试框进行上下拉动，引起页面发生渲染变化时才会弹出引导。于是在tour对象中加上
```
debug : true
```
的调试功能。开启调试后发现console里打印出了tour已经结束，跳过初始化。所以又把代码中的tour.start()改成了tour.restart()。
问题2，修改完成后又遇到了我们的第二个问题，引导框还是没有弹出，console中打印上面的step节点都是孤点，又没有设置orphan，并且element元素找不到。经过源码跟踪debug，$(“#element”)确实是空的，所以应该是页面还未加载完成导致的。所以可以通过把script脚本放在页面的最后来实现，或者把脚本包裹在ready函数中~。综上就解决了我们的问题了。
问题3，今日（14-05-21）又遇到一个问题，在调用tour.next的时候没有办法进入下一步，跟踪代码发现current是空的，原因是我在onstart或者onshow方法中调用的next这时候 this.current 还没有准备好，于是将调用代码放到onShown中便可成功了。

问题4，在代码中加入了cookies的读写，这时候问题就出现了，goto到cookies中保存的stepIndex后，点击引导框里的下一步，引导框就直接关闭，跟踪代码后发现，current的next显示是"31"，当前步骤是"3"，于是怀疑是不是next有做+1 却变成了字符串相加，检查代码后发现由于是从cookies中读出的数据，所以都是String型，传入到goTo中后，current的步骤也变成了字符串，所以最后next就变成了第31步，自然是不存在的了。。。所以在cookies数据读取后做一次转型 new Number(cookeiVal) 就好了。下面放出最终代码：

// Instance the tour
var stepCookieVal = getCookie("tour" + version);
var isPrev = false;
var tour = new Tour(
	{
		debug : true,
		template : "<div class='popover'> <div class='arrow'></div> <h3 class='popover-title my-tour-title'></h3> <div class='popover-content'></div> <div class='popover-navigation'> <div class='btn-group'> <button class='btn btn-sm btn-default' data-role='prev'>&laquo; 上一步</button> <button class='btn btn-sm btn-default' data-role='next'>下一步 &raquo;</button> <button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button> </div> <button class='btn btn-sm btn-default' data-role='end'>结束向导</button> </div> </div>",
		steps : [
			{
				element : "#list-group-div",
				animation : true,
				title : "活动报名引导",
				placement : "bottom",
				backdrop : true,
				content : "欢迎首次访问改版后的活动报名系统中，下面进入新功能指导！"
			},
			{
				element : "#cookieDetailTd",
				animation : true,
				title : "活动报名引导",
				placement : "top",
				backdrop : true,
				content : "这是我们的第一步，你需要填写一个你在策花园中的cookie，<span class='text text-danger'>请仔细阅读！</span>"
			},
			{
				element : "#cookieTextarea",
				animation : true,
				title : "活动报名引导",
				placement : "top",
				backdrop : true,
				content : "请按照上一步的说明拷贝你的cookie到文本框中吧，<span class='text text-danger'>如果你之前已经拷贝过了，我们会读取默认的cookie不用再次拷贝了哦</span>"
			},
			{
				element : "#autoDiscoverBtn",
				animation : true,
				backdrop : true,
				title : "活动报名引导",
				placement : "top",
				content : "点击这里可以自动探索健身活动，如果你还需要探索其他的活动，请在左侧手动输入活动的列表页地址！"
			}, {
				element : "#urlInput1",
				animation : true,
				backdrop : true,
				title : "活动报名引导",
				placement : "top",
				content : "这里就是我们探索到的第一个活动地址！"
			}, {
				element : "#urlInput2",
				animation : true,
				backdrop : true,
				title : "活动报名引导",
				placement : "bottom",
				content : "这里就是我们探索到的第二个活动地址！"
			}, {
				element : "#isAutoSignUpCheckbox",
				animation : true,
				backdrop : true,
				title : "活动报名引导",
				placement : "top",
				content : "勾选上这个后，就可以在查询活动时，自动报名已经开放的活动！"	
			}, {
				element : "#submitBtn",
				animation : true,
				backdrop : true,
				title : "活动报名引导",
				placement : "top",
				content : "进入到这里就是我们的最后一步了，痛快的点击它吧~！"
			} ],
		onStart : function(tour) {
			if (stepCookieVal == tour._options.steps.length) {
				tour.end();
			} else {
			}
		},
		onPrev : function(tour) {
			isPrev = true
		},
		onNext : function(tour) {
			isPrev = false;
		},
		onShown : function(tour) {
			var stepIndex = tour.getCurrentStep();
			if (stepCookieVal > tour.getCurrentStep()
					&& isPrev == false) {
				tour.goTo(new Number(stepCookieVal));
			} else {
				setCookie("tour" + version, stepIndex);
			}
		},
		onEnd : function(tour) {
			setCookie("tour" + version, tour._options.steps.length);
		}
	});
// Initialize the tour
tour.init();
// Start the tour
tour.restart();

参考资料
Bootstrap tour官网

关于Bootstrap tour的使用 - ptzhuf/cehuayuan GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️