鱼骨图形式展示信息

所属分类:媒体-幻灯片和轮播图,图片展示

 40793  560  查看评论 (15)
分享到微信朋友圈
X
鱼骨图形式展示信息 ie兼容6

标题不限制字数,分页个数可自适应。

轮播效果使用了superslide
相关插件-幻灯片和轮播图,图片展示

自适应图片轮播插件

自适应图片轮播插件,支持移动端滑动切换同时兼容性好
  幻灯片和轮播图
 48846  441

jQuery幻灯片切换

jQuery网站宽屏banner幻灯片切换
  幻灯片和轮播图
 29630  381

swiper横向轮播

swiper横向轮播,简单好用
  幻灯片和轮播图
 84341  571

jQuery带缩略图的轮播图插件PgwSlideshow

PgwSlideshow是一款基于jQuery的图片轮播插件,这是一款简单带缩略图的jquery插件。该轮播图插件默认底部带有缩略图效果,支持ie8浏览器,并带平滑过渡效果。
  幻灯片和轮播图
 34245  323

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ERA 0
    2020/10/9 16:05:31
    请问怎么加链接?
        isl83
        2020/10/13 18:40:56

        这个是刚学前端时候写的,写的不好。如果一定要用的话可以这样:

        // 修改数据格式如下:
        data = [
           {
               'link': { // 新增的属性
                   name: '这是一个链接',
                   url: 'www.baidu.com'
               },
               '审理时间':'2014-12-20 至 2014-12-20',
               '承办庭室':'XXXX',
               '承办法官':'XXX',
               '承办法院':'XXXXXXX法院',
               '案件状态':'XX','案号':'(XXXX)XXXXXX第XXXX号'},
        ];
        
        
        //封装某个链接 添加代码到fishBone.js第149行
        $.each(this, function(key, value) {
           if (key == 'link') {
               var name = value.name;
               var url = value.url;
               var li = $("<li><a class='fishbone_block_item' href=" + url + ">" + name + "</a></li>").css("border-left","1px solid "+color);
               li.appendTo(ul);
           }
        });
        木直?0
        2023/12/5 16:47:08
        url地址
    回复
    叶子祝佳音 0
    2018/10/14 12:29:55
    尊敬的作者您好,演示数据里面的json属性个数数量都是一样的,如果各个流程有的多有的少,那么线的长度就会远离那个中轴线!请问怎么设置? 回复
    WangJ 0
    2017/8/15 11:23:01

    请问如何新增颜色

        isl81
        2017/9/1 10:09:31

        fishBone.js 第一行配置

    回复
    忧伤小王子 0
    2017/4/7 11:11:03

    怎么解决数据多了,展示重叠在一起的问题

        isl81
        2017/4/14 15:43:23

        太长的数据不适合一行显示,可以加省略号,如果想修改每个块的宽度,是在js里有动态设置宽度

    回复
    斜??45?┇笑 0
    2017/3/30 12:04:47

    为什么使用高版本的JQ会报错item.size is not a function(…)

    回复
    kele 0
    2016/10/5 15:10:25
    如何让轴线竖起来展示数据
        isl81
        2017/4/14 16:01:07
        用ul+li,配合轮播就可以了 
    回复
    mico 0
    2016/8/30 18:08:16
    非常喜欢!人才
        isl80
        2017/4/14 16:07:04

        设计驱动开发~

    回复
    ?匚あ寺 0
    2016/5/6 10:05:28
    用火狐 和 ie9 打开演示案例,会出现不同的样式。在火狐下,line-first 的li标签里面的图片都是使用的红色的,在该li样式里面添加的background-position-y 好像是不起作用了  ,除了第一个,后面的都存在,放下面的也是用的这个图片  。 第二个问题是 title-center 与 title-left,title-right 之间的高度变得不一样了。中间的高于两边 ,偶尔会出现中间低于两边    现在找解决方法,不知LZ有什么好的办法吗?
        isl80
        2016/5/16 17:05:10
        哇 首先感谢您的下载和建议,问题已修改,可以到下面这个地址下载,下载fishBone目录为源码。https://github.com/liangyj021/jquery-demo火狐里面只支持background-position,修改了js代码;还有高度不一致问题,是由于左中右的line-height和font-size不统一导致,CSS样式已整理。可以正常显示
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复