鱼骨时间轴案例（转自CSDN,原文链接附于文中）
$.fn.fishBone = function(data) {
var colors = ['#F89782','#1A84CE'];
/**入口*/
//1.创建dom
$(this).children().remove();
$(this).append(creataFishBone(data));
//2.自适应
var rowcount = fixWindow();
//3.翻页滚动效果
jQuery(".fishBone").slide({
titCell: ".hd ul",
mainCell: ".bd>ul",
autoPage: true,
effect: "left",
autoPlay: false,
scroll: rowcount,
vis: rowcount
});
/**自适应 平均分布*/
function fixWindow() {
//item所占的宽度 = 自身宽度+marginleft
var item = $(".fishBone .bd .item");
var marginleft = parseInt(item.css('margin-left'))
var item_w = item.width() + marginleft;
//显示区域
var bd_w = $(".fishBone .bd").width();
//能显示的个数 取整
var rowcount = parseInt(bd_w / item_w);
if (rowcount > item.size()) {
//rowcount = item.size();
$(".fishBone .prev,.fishBone .next").hide()
}
//设置新的宽度使其平均分布
var item_w_temp = bd_w / rowcount - marginleft;
item.width(item_w_temp);
return rowcount;
};
/**li左边框线颜色 border-left-color 动态获取*/
function getColor(i) {
var length = colors.length;
var color = 'gray';
if (i <= length - 1) {
color = colors[i];
} else {
color = colors[i % length];
}
return color;
};
/**轴线上圆点位置纵坐标，见图片line-point.png*/
function getLinePointY(i) {
var length = colors.length;
var y = 0;
if (i <= length - 1) {
y = -i * 20;
} else {
y = -(i % length) * 20;
}
return y + "px";
};
/**第一行日期圆点位置纵坐标，图片line-first.png*/
function getLineFirstY(i) {
var length = colors.length;
var y = 0;
if (i <= length - 1) {
y = -i * 60;
} else {
y = -(i % length) * 60;
}
return y + "px";
};
/** .title-left背景纵坐标，0px开始，见图片title.png*/
function getTitleLeftY(i,val) {
var length = colors.length;
var y = 0;//图片位置
if(val == 'zy'){
y+=-i*60;
}else if(val == 'mz'){
y+=-(i % length)*60;
}
return y + "px";
};
/** .title-center背景纵坐标，600px开始，见图片title.png*/
function getTitleCenterY(i,val) {
var length = colors.length;
var y = -598;//图片位置
if(val == 'zy'){
y+=-i*60;
}else if(val == 'mz'){
y+=-(i % length)*60;
}
return y + "px";
};
/**.title-right背景纵坐标，1200px开始，见图片title.png*/
function getTitleRightY(i,val) {
var length = colors.length;
var y = -1200;//图片位置
if(val == 'zy'){
y+=-i*60;
}else if(val == 'mz'){
y+=-(i % length)*60;
}
return y + "px";
};
/**创建dom结构*/
function creataFishBone(data) {
var fishBone = $("<div class='fishBone'/>");
var wrapper = $("<div class='wrapper'></div>");
var bd = $("<div class='bd'></div>");
var ul_item = $("<ul/>");
//遍历数据
$(data).each(function(index,e) {
var itemclass=itemClass(index);//显示在轴上方或下方标识 top/bottom
var i = 0;
var color = '';
if(e.encounterType=='zy'){
color = colors[0];
index = 0;
}else if(e.encounterType=='mz'){
color = colors[1];
index = 1;
}
//var color = getColor(i);
var lineFirstY = getLineFirstY(index);
var titleLeftY = getTitleLeftY(index,e.encounterType);
var titleCenterY = getTitleCenterY(index,e.encounterType);
var titleRightY = getTitleRightY(index,e.encounterType);
var ul = $("<ul></ul>");
//遍历封装属性
$.each(this, function(name, value){
if (name == 'mpiId'){
mpiId = value;
}
});
//判断是门诊还是住院
var val="住院记录";
$.each(this, function(name, value) {
if (name == 'encounterType' ) {
if(value=='zy'){
val="住院记录";
}else if(value='mz'){
val="门诊记录";
}
}
});
//出院时间
var outDate="";
var inHosOrgCode="";
//outpatientNo住院号
var outpatientNo="";
//inpatient_record_id
var inpatientRecordId="";
var jobType=""
var emrId=""
$.each(this, function(name, value) {
if(name=='outDate'){
outDate=value;
}else if(name=='inDate'){
inDate=value;
}else if(name == 'diagName'){
diagName=value;
}else if(name=='inHosOrgCode'){//机构编码
inHosOrgCode=value;
}else if(name=='outpatientNo'){
outpatientNo=value;
}else if(name=='inpatientRecordId'){
inpatientRecordId=value;
}else if(name=='jobType'){
jobType=value;
}else if(name=='emrId'){
emrId=value;
}else if(name='bedNo'){
bedNo=value;
}
});
if(itemclass=='top'){
$.each(this, function(name, value) {
if (name == 'encounterType') {
var li = $("<li class='line-first'>" + orgCodeName+val + "</li>")
.css('background-position-y', (parseInt(lineFirstY)+9)+"px");//9是原计算结果的偏移量，显示位置正合适
li.appendTo(ul);
return;
}
});
if(val=="住院记录"){
$.each(this, function(name, value) {
if (name == 'inHosNo') {
var li = $("<li class='title'></li>");
var titleLeft = $("<span class='title-left'> </span>").css('background-position-y',titleLeftY);
var titleCenter = $("<span class='title-center'><a style=\"text-decoration: underline;color: #fff;cursor:pointer;\" title='"+inpatientRecordId+"' onclick=\"getPatientHealthTree('"+mpiId+"','"+value+"','"+outDate+"','"+inHosOrgCode+"','zy','"+outpatientNo+"','"+inpatientRecordId+"','"+jobType+"','"+emrId+"','"+inDate+"','"+outDate+"')\"> 入院时间："+inDate+"</a></span>").css('background-position-y',titleCenterY);
var titleRight = $("<span class='title-right'> </span>").css('background-position-y',titleRightY);
li.append(titleLeft).append(titleCenter).append(titleRight);
li.appendTo(ul);
return;
}
});
}else if(val=="门诊记录"){
$.each(this, function(name, value) {
if (name == 'outpatientNo') {
var li = $("<li class='title'></li>");
var titleLeft = $("<span class='title-left'> </span>").css('background-position-y',titleLeftY);
var titleCenter = $("<span class='title-center'><a style=\"text-decoration: underline;color: #fff;cursor:pointer;\" title='"+inpatientRecordId+"' onclick=\"getPatientHealthTree('"+mpiId+"','"+value+"','','"+inHosOrgCode+"','mz','"+outpatientNo+"','"+inpatientRecordId+"','"+jobType+"','"+emrId+"')\"> 就诊时间："+inDate+"</a></span>").css('background-position-y',titleCenterY);
var titleRight = $("<span class='title-right'> </span>").css('background-position-y',titleRightY);
li.append(titleLeft).append(titleCenter).append(titleRight);
li.appendTo(ul);
return;
}
});
}
//封装其他属性
$.each(this, function(name, value) {
if(name=='diagName'){
var li =$("<li>诊断：" + value + "</li>").css("border-left","1px solid "+color);
li.appendTo(ul);
}
});
$.each(this, function(name, value) {
if(name=='bedNo'){
var li =$("<li>床号：" + value + "</li>").css("border-left","1px solid "+color);
li.appendTo(ul);
}
});
$.each(this, function(name, value) {
if(name=='deptName'){
var li =$("<li>就诊科室：" + value + "</li>").css("border-left","1px solid "+color);
li.appendTo(ul);
}
});
}
//封装轴线上的圆点
var linePointY = getLinePointY(index);
var point = $("<li class='line-last line-point'></li>").css('background-position', '0px ' + linePointY);
point.appendTo(ul);
//生成一个item（一个完整的案件）
var li_item = $("<li class='item'></li>");
var content = $("<div class='content'></div>");
ul.appendTo(content);
content.appendTo(li_item);
li_item.addClass(itemClass(index)).appendTo(ul_item);
});
ul_item.appendTo(bd);
bd.appendTo(wrapper);
var prev = $("<a class='prev'></a>");
var next = $("<a class='next'></a>");
var line = $("<div class='line'/>")
fishBone.append(wrapper).append(prev).append(next).append(line);
return fishBone;
};
/**item添加样式，显示在上方或下方*/
function itemClass(index) {
index += 1;
if (index % 2 == 0) {
//偶数显示到下方
return "top";
} else {
//奇数显示到上方
return "top";
}
}
}
效果图：如下：
原文链接：https://blog.csdn.net/LuuvyJune/article/details/80352141
如要转载，请注明出处
