jQuery提示插件 qTip简单使用

简介：

qtip是Jquery的一款提示插件，使用比较简单，在Activiti工作流的流程追溯页面使用到qtip插件。

使用步骤：

1、 下载qtip插件

http://qtip2.com/download

2、 下载的插件目录

3、 一般情况下，将jquery.qtip.min.css和jquery.qtip.min.js放入项目中使用即可

4、 在页面引入css和js

<link rel="stylesheet" href="${appName}/res/jquery.qtip.min.css">
<script type="text/javascript" src="${appName}/res/jquery.qtip.min.js"></script>

5、 需要加qtip提示的代码片段(图片映射代码)

<map id="imgHref" name="imgHref">
<area id="usertask1" name="部门经理【审批】" type="userTask" shape="rect" coords="(97.0,167.0,233.0,222.0)" xposition="97.0px" yposition="167.0px" target="_blank" data-hasqtip="0" aria-describedby="qtip-0">
<area id="exclusivegateway1" name="Exclusive Gateway" type="exclusiveGateway" shape="rect" coords="(144.0,249.0,184.0,289.0)" xposition="144.0px" yposition="249.0px" target="_blank">
<area id="usertask2" name="人事【审批】" type="userTask" shape="rect" coords="(112.0,311.0,217.0,366.0)" xposition="112.0px" yposition="311.0px" target="_blank" data-hasqtip="1">
<area id="exclusivegateway2" name="Exclusive Gateway" type="exclusiveGateway" shape="rect" coords="(144.0,391.0,184.0,431.0)" xposition="144.0px" yposition="391.0px" target="_blank">
<area id="usertask3" name="经理联合【审批】" type="userTask" shape="rect" coords="(96.0,465.0,234.0,520.0)" xposition="96.0px" yposition="465.0px" target="_blank" data-hasqtip="2">
<area id="parallelgateway1_start" name="Parallel Gateway" type="parallelGateway" shape="rect" coords="(142.0,655.0,182.0,695.0)" xposition="142.0px" yposition="655.0px" target="_blank">
<area id="usertask5" name="人事【报备】" type="userTask" shape="rect" coords="(5.0,711.0,110.0,766.0)" xposition="5.0px" yposition="711.0px" target="_blank" data-hasqtip="3">
<area id="usertask6" name="部门【报备】" type="userTask" shape="rect" coords="(214.0,711.0,319.0,766.0)" xposition="214.0px" yposition="711.0px" target="_blank" data-hasqtip="4">
<area id="usertask7" name="销假" type="userTask" shape="rect" coords="(109.0,855.0,214.0,910.0)" xposition="109.0px" yposition="855.0px" target="_blank" data-hasqtip="5">
<area id="exclusivegateway3" name="Exclusive Gateway" type="exclusiveGateway" shape="rect" coords="(144.0,575.0,184.0,615.0)" xposition="144.0px" yposition="575.0px" target="_blank">
<area id="usertask8" name="提交申请" type="userTask" shape="rect" coords="(112.0,75.0,217.0,130.0)" xposition="112.0px" yposition="75.0px" target="_blank" data-hasqtip="6">
<area id="parallelgateway1_end" name="Parallel Gateway" type="parallelGateway" shape="rect" coords="(144.0,775.0,184.0,815.0)" xposition="144.0px" yposition="775.0px" target="_blank">
<area id="startevent1" name="Start" type="startEvent" shape="rect" coords="(147.0,5.0,182.0,40.0)" xposition="147.0px" yposition="5.0px" target="_blank">
<area id="endevent1" name="End" type="endEvent" shape="rect" coords="(144.0,955.0,179.0,990.0)" xposition="144.0px" yposition="955.0px" target="_blank">
</map>

6、qtip在jquery内的使用

$(function(){
	    $("area[type='userTask']").each(function (){
	    	var nodeId=$(this).attr('id');
	    	var processInstanceId="${proc_inst_id_}";
	    	$(this).qtip({
	  			content:{
	  				text:function (event,api){
	  					$.ajax({
	  						url:'${appName}/workflow/workflowProcess/getActivityApprovalInfo.ajax',
	  						data:{proc_inst_id_:processInstanceId,task_def_key_:nodeId}
	  					})
	  					.then(function(content) {
	  						if(content.length>0){
		  						var content_text="<table  border='1' width='260px;' height='50px;' style='text-align: center;font-size:12px;'>";
		  						for(var i=0;i<content.length;i++){
		  							content_text+="<tr><td width='115px;'>审批人:</td><td>"+content[i].assignee_+"</td></tr><tr><td>审批时间:</td><td>"+content[i].end_time_Disp+"</td></tr>"
		  										  +"<tr><td>审批意见:</td><td>"+content[i].comment_message+"</td></tr>";
		  						}
		  						content_text+="</table>";
		                        api.set('content.text', content_text);
	  						}else{
		                        api.set('content.text', "<div>暂无审批记录</div>");
	  						}
	                    }, function(xhr, status, error) {
	                        api.set('content.text', status + ': ' + error);
	                    });
	  					return '正在加载...';
	  				}
	  			},
	  			position:{
	  				target: 'mouse',
	                adjust: { mouse: false }
	  			}
		    });
	    });
    });

7、实现的效果