本文介绍了如何更改背景颜色,标记CSS,并在标记上添加悬停文字?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我尝试使用升级方案的



CSS

  .vis-item.vis-background.preupgrade {
background-color:rgba(0,153,255,0.2)
}

.vis-item.vis-background.prerelease {
background-color:rgba(102,204,255,0.2)
}

.vis-item.vis-background.postupgrade {
background-color:rgba(204,204,255,0.2)
}

控制器

  $ scope.visData = new vis.DataSet([
{start:'2015-07-26',end:'2015-08-25',type:'background' ,title:'Pre Upgrade',className:'preupgrade'},
{start:'2015-08-26',end:'2015-09-30',type:'background',title:'Pre发布',className:'prerelease'},
{start:'2015-10-01',end:'2015-10-31',type:'background',title:'Post Upgrade',className: 'postupgrade'}
]);
$ scope.visOption = {
editable:false,
autoResize:true,
moveable:true,
margin:{
item:10,
axis:20
}
};

Visjs时间表HTML

 < vis-timeline data =visDataoptions =visOptionevents =visEvent>< / vis-timeline> 

我还提供了

解决方案

查看文档,您可以查看文档,





此外,他们还有活动等等,所以你应该能够拖动和动画内置,但我找不到它的文档中的一个明显的例子。


I am trying to create a timeline view using visjs of a upgrade scenario (Pre Upgrade, Pre Release &Post Upgrade) something similar to the image below. Need some pointers to create different region colors as depicted in the image, CSS to change the main marker to an image source and also on hover of the slider (region or markers) it should show some description.

CSS

.vis-item.vis-background.preupgrade {
  background-color: rgba(0, 153, 255, 0.2);
}

.vis-item.vis-background.prerelease {
  background-color: rgba(102, 204, 255, 0.2);
}

.vis-item.vis-background.postupgrade {
  background-color: rgba(204, 204, 255, 0.2);
}

Controller

$scope.visData = new vis.DataSet([
  {start: '2015-07-26', end: '2015-08-25', type: 'background', title: 'Pre Upgrade', className: 'preupgrade'},
  {start: '2015-08-26', end: '2015-09-30', type: 'background', title: 'Pre Release', className: 'prerelease'},
  {start: '2015-10-01', end: '2015-10-31', type: 'background', title: 'Post Upgrade', className: 'postupgrade'}
]);
  $scope.visOption = {
    editable: false,
    autoResize: true,
    moveable: true,
    margin: {
        item: 10,
        axis: 20
    }
};

Visjs timeline HTML

<vis-timeline data="visData" options="visOption" events="visEvent"></vis-timeline>

I am also providing a plunker link for this problem.

Now I have achieved most of the things by using both AngularJS and jQuery simultaneously, but need help to convert everything to AngularJS. Still adding a custom time is pending and click event.

Updated Plunker link

解决方案

Looking at the documentation you can see docs for where they spell out the classes to what you need to update for styling.

http://visjs.org/docs/timeline/#Editing_Items

Also they have events for onmoving and such so you should be able to drag and animate built in but I couldn't find a clear example of it in their docs.

这篇关于如何更改背景颜色,标记CSS,并在标记上添加悬停文字?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 11:59
查看更多