jQuery横向上下排列鱼骨图形式信息展示代码时光轴样式(转自CSDN,原文链接附于文中)...

本文主要是介绍jQuery横向上下排列鱼骨图形式信息展示代码时光轴样式(转自CSDN,原文链接附于文中)...,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文链接:http://www.jqueryfuns.com/resource/2173

$.fn.fishBone = function(data) {var colors = ['#F89782', '#1A84CE', '#F7A259', '#43A6DA', '#F9BF3B','#88C7CC','#EF6D5F','#60A96E','#F03852','#3A9284'];/**入口*///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所占的宽度 = 自身宽度+marginleftvar 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) {var length = colors.length;var y = 0;//图片位置if (i <= length - 1) {y += -i * 60;} else {y += -(i % length) * 60;}return y + "px";};/** .title-center背景纵坐标,600px开始,见图片title.png*/function getTitleCenterY(i) {var length = colors.length;var y = -598;//图片位置if (i <= length - 1) {y += -i * 60;} else {y += -(i % length) * 60;}return y + "px";};/**.title-right背景纵坐标,1200px开始,见图片title.png*/function getTitleRightY(i) {var length = colors.length;var y = -1200;//图片位置if (i <= length - 1) {y += -i * 60;} else {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) {var itemclass=itemClass(index);//显示在轴上方或下方标识 top/bottomvar color = getColor(index);var lineFirstY = getLineFirstY(index);var titleLeftY = getTitleLeftY(index);var titleCenterY = getTitleCenterY(index);var titleRightY = getTitleRightY(index);var ul = $("<ul></ul>");//遍历封装属性//封装审理时间和案号if(itemclass=='top'){$.each(this, function(name, value) {if (name == '审理时间') {var li = $("<li class='line-first'>" + value + "</li>").css('background-position-y', (parseInt(lineFirstY)+9)+"px");//9是原计算结果的偏移量,显示位置正合适li.appendTo(ul);return;}});$.each(this, function(name, value) {if (name == '案号') {var li = $("<li class='title'></li>");var titleLeft =  $("<span class='title-left'> </span>").css('background-position-y',titleLeftY);var titleCenter =  $("<span class='title-center'>"+value+"</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;}});}

 

转载于:https://www.cnblogs.com/jjSunyet/p/9876925.html

这篇关于jQuery横向上下排列鱼骨图形式信息展示代码时光轴样式(转自CSDN,原文链接附于文中)...的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/352187

相关文章

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

利用Python调试串口的示例代码

《利用Python调试串口的示例代码》在嵌入式开发、物联网设备调试过程中,串口通信是最基础的调试手段本文将带你用Python+ttkbootstrap打造一款高颜值、多功能的串口调试助手,需要的可以了... 目录概述:为什么需要专业的串口调试工具项目架构设计1.1 技术栈选型1.2 关键类说明1.3 线程模

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n