网站新手引导tips提示功能开发经验分享

kevin-ying

前几天将前端开拓者的前台页面调整为响应式网页，发现在手机端的页面布局下导航栏非常难以处理。通过多种方案的尝试与调整，最终决定将导航栏设置为超出屏幕宽度横向滚动的方式以满足布局与功能上的需要。

如上图，在web浏览器中可以看到一个横向滚动的滚动条，用户很清楚的知道可以拖动导航条以查看后面的导航内容。但是在手机中，并没有这样的滚动条显示，多数情况下是看不到的。因此导航条可以滚动的这项功能很可能不会被用户发现，从而导致用户体验上的障碍，因此网站功能上的引导便显得尤为重要。

如何在网站上引导用户关注你网站上无法直接看到的功能呢？目前比较主流的常见做法是当用户第一次进入你的网站是时给与一个悬浮的提示窗口，用户可以选择性的关闭这个窗口，完成用户的第一次功能体验引导。

如下图，可以有效的告知用户导航条是具有滚动功能的。

开发tips功能的思路？

一、首先要在HTML中做好相应的tips对话框窗口，使其能够正确的显示在需要的位置。这里需要用到HTML与CSS的相关知识，具体需要怎么做本文就不做详细讲解。

二、通过jquery来控制tips窗体的显示与消失

三、为了避免用户每次打开网页都显示tips窗口，我们还需要通过js来设置与读取cookie，用于保存用户上次关闭tips的操作。

四、为了获得更好的体验，可以考虑为页面增加一些遮罩，突出显示需要展示的功能位置。

jquery完整的实现代码

通过不断的调试与测试，前端开拓者的tips功能已经能够正常运行，下面将jquery部分的代码分享给大家，并且会加上相应的注释以便与大家理解。由于每个网站的需求与实际情况都不同，html和css部分请自行按需编写。

[JavaScript] 纯文本查看 复制代码

/*设置cookie*/
$(document).ready(function(e) {
    $('#tclose').click(function(){
		$(".m960tips").hide();  //隐藏tips整体窗口
		var date=new Date(); //获取当前时间
		var expiresDays=365;  //将date设置为365天以后的时间
		date.setTime(date.getTime()+expiresDays*24*3600*1000); //将tips的cookie设置为10天后过期 
		document.cookie="tips=1;expires="+date.toGMTString();  //设置cookie
	})
});

$(function(){
	/*获取cookie参数*/
	var getCookie = document.cookie.replace(/[ ]/g,"")  //获取cookie，并且将获得的cookie格式化，去掉空格字符
	var arrCookie = getCookie.split(";")  //将获得的cookie以“分号”为标识 将cookie保存到arrCookie的数组中
	var tips;  //声明变量tips
	for(var i=0;i<arrCookie.length;i++){   //使用for循环查找cookie中的tips变量
		var arr=arrCookie[i].split("=");   //将单条cookie用“等号”为标识，将单条cookie保存为arr数组
		if("tips"==arr[0]){  //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
			tips=arr[1];   //将cookie的值赋给变量tips
			break;   //终止for循环遍历
		} 
	}

	/*判断cookie是否设置，如果没有设置cookie则显示提示文字*/
	if(tips != 1){  //默认情况下判断，如果没有设置tips则执行下面的脚本，将tips对话框显示出来
		var WHeight = $(window).height();
		var WWidth = parseInt($(window).width());
		if(WWidth < 960){
			$('.m960tips').show();
			$('#bakg').css("height",WHeight);
			$('#bakg').show();
			$('.m960tips').css("z-index","999");
			$('.navcon').css("z-index","999");
		}
	}
})