如何在jQuery矢量 map 中实现切换功能,
我的要求是:如果用户选择任何区域,它应该用颜色突出显示。 如果用户单击同一区域,它应该进入旧状态(没有颜色或默认状态)。
我可以使用 JS 和 jQuery 来实现这一点吗?或者我需要任何其他插件的帮助。
任何想法、建议和指导都受到高度赞赏。谢谢
示例代码:
<script src="Mobile Portal Management Tool (MPMT)_files/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'usa_en',
enableZoom: true,
showTooltip: true,
// selectedRegion: 'MO'
onRegionClick: function(event, code, region)
{
/* var message = 'You selected "'
+ region
+ '" which has the code: '
+ code.toUpperCase()
// alert(message);
$('#location-selected').html(message); */
var ul = $('#location-selected');
var list = ul.children('li');
var isInList = false;
for(var i = 0; i < list.length; i++){
if(list[i].innerHTML === region) {
isInList = true;
break;
}
}
if(isInList)
alert("User selected region already in the list")
else
var newli = $('<li></li>').html(region).appendTo(ul);
$('ul').children('li').on('dblclick',function()
{
//alert("Selected list item will be removed from the list...")
$(this).remove();
});
}
});
</script>
最佳答案
您可以通过将属性 colors
分配给所选区域来实现此目的。例如,要使加利福尼亚为蓝色,您可以编写如下内容
var highlight = {colors: {ca : '#0000ff'}}
要从时钟回调设置颜色属性,您可以调用它
onRegionClick: function(element, code, region) {
$('#vmap').vectorMap('set', 'colors', highlight);
}
要切换颜色,您可以添加 if 开关,该开关仅检查元素是否设置了突出显示颜色。您还可以使用它在列表中添加/删除区域。
$(document).ready(function() {
highlight = {};
$('#vmap').vectorMap({
map: 'usa_en',
enableZoom: true,
showTooltip: true,
color: '#f4f3f0',
onRegionClick: function(element, code, region) {
if(highlight[code]!=='#0000ff'){
highlight[code]='#0000ff';
$('<li id=\"li_'+code+'\"></li>').html(region).appendTo($('#location-selected'));
} else {
highlight[code]='#f4f3f0';
$('#li_'+code).remove();
}
$('#vmap').vectorMap('set', 'colors', highlight);
},
onRegionOut: function(element, code, region){
$('#vmap').vectorMap('set', 'colors', highlight);
},
});
});
我还将其放在 jsfiddle 上以进行快速说明: http://jsfiddle.net/FxVzG/
为了使其正常工作,您还需要在 onRegionOut
中设置颜色。
关于javascript - jQuery 矢量 map 中的切换功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15404186/