• 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所占的宽度 = 自身宽度+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) {
            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/bottom
     
                var 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;
                        }
                    });
                }
  • 相关阅读:
    java资料
    tomcat内存配置
    mybatis深入理解(一)之 # 与 $ 区别以及 sql 预编译
    Sturts2的国际化处理
    web.xml中如何设置配置文件的加载路径
    varchar和varchar2的区别
    IDEA 常见文件类型的图标介绍
    IDEA文件编码修改
    Debug 介绍
    IntelliJ IDEA 显示行号方法
  • 原文地址:https://www.cnblogs.com/jjSunyet/p/9876925.html
Copyright © 2020-2023  润新知