1

newsignature（http://newsignature.github.com/us-map/）のjquertを使用して、非常にクールなインタラクティブなusマップを使用しています。クリックしたときに州ごとに固有の情報を入力する方法がわかりません。つまり、ユーザーがワシントンをクリックすると、アーカンサスをクリックしたときとは異なり、特定の情報が表示されます。おそらく、コンテンツのスタイルを設定する機能ですら。

私が使用している現在のコードは次のとおりです。

$(document).ready(function() {
  $('#map').usmap({
    'stateSpecificStyles': {
      'AK' : {fill: '#0F253F'}
    },
    'stateSpecificHoverStyles': {
      'HI' : {fill: '#0F253F'}
    },

    'mouseoverState': {
      'HI' : function(event, data) {
        //return false;
      }
    },


    'click' : function(event, data) {
      $('#alert')
        .text('Click '+data.name+'  copy ')
        .stop()
        .css('backgroundColor', '#ff0')
        .animate({backgroundColor: '#ddd'}, 1000);
    }
  });


});

特定の状態をクリックすると、その状態に関する情報と各状態の同じ情報が表示されます。

4

1 に答える 1

1

さて、彼らがクリックした状態はdata.nameプロパティにあります。これには多くの方法があります。何を試しましたか？

$('#map').usmap({
  // The click action
  click: function(event, data) {
    var description = "No state info loaded for this state.";
    switch(data.name)
    {
        case 'IL':
            description = 'You clicked on the Land of Lincoln!';
            break;
        case 'MO':
            description = 'You clicked on the Show-Me State!';
            break;
        // etc
    }
    $('#clicked-state')
      .text(description)
      .parent().effect('highlight', {color: '#C7F464'}, 2000);
  }
});

実際、ドキュメントを詳しく見てみると、次のような状態固有のメソッドを作成することもできます。

$('#map').on('usmapclickIL', function(event, data) {
    $('#clicked-state')
      .text('You clicked on the Land of Lincoln!')
      .parent().effect('highlight', {color: '#C7F464'}, 2000);
});
于 2012-11-01T14:32:48.450 に答える