gpt4 book ai didi

javascript - 美国 map 插件,具有状态数据/悬停功能的新按钮

转载 作者:行者123 更新时间:2023-12-03 10:31:57 30 4
gpt4 key购买 nike

我正在使用 jQuery 美国 map 插件。

在这里找到的。 https://github.com/NewSignature/us-map/

我正在尝试添加 10 个附加按钮,它们也将与状态数据相关联。例如,默认情况下,您可以将鼠标悬停在某个状态上,并且有一个悬停颜色。我试图在为其创建附加按钮的新状态下保持这种效果。

例如,下面的新按钮。

$("#star_btn1").click(function() {
$('#ca').toggle();

该插件已定义和可自定义悬停样式。

'stateHoverStyles': {
fill: '#ffc600',
},

和:

   _defaultMouseOverAction: function(stateData) {
// hover effect
this.bringShapeToFront(stateData.shape);
this.paper.safari();

// ... for the state
var attrs = {};
if(this.options.stateSpecificHoverStyles[stateData.name]) {
$.extend(attrs, this.options.stateHoverStyles, this.options.stateSpecificHoverStyles[stateData.name]);
} else {
attrs = this.options.stateHoverStyles;
}

stateData.shape.animate(attrs, this.options.stateHoverAnimation);

有什么想法可以将其与我的新按钮结合起来吗?

最佳答案

您可以让按钮的事件处理程序触发 map 插件的事件。

HTML:

<button type="button" class="stateBtn" data-name="CA">California</button>
<button type="button" class="stateBtn" data-name="MN">Minnesota</button>
<br />
<br />
<div id="map" style="width: 550px; height: 350px;"></div>
<div id="clicked-state"></div>

map 的原始 JavaScript:

$('#map').usmap({
click: function (event, data) {
$('#clicked-state')
.text('You clicked: ' + data.name)
.parent().effect('highlight', {
color: '#C7F464'
}, 2000);
}
});

按钮的附加 JavaScript:

$('.stateBtn').on('click mouseout mouseover', function(e) {
var name = $(this).attr('data-name');
$('#map').usmap('trigger', name, e.type, e);
});

注意如何添加其他状态按钮而无需添加任何其他 JavaScript 代码。

Demo on jsfiddle

US Map Plugin Documentation

关于javascript - 美国 map 插件,具有状态数据/悬停功能的新按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29170879/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com