2

jQueryのベクターマップにトグル機能を実装する方法、

私の要件は次のとおりです。ユーザーが任意の領域を選択した場合、色で強調表示する必要があります。ユーザーが同じ領域をクリックすると、古い状態 (色またはデフォルト状態なし) になります。

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>
4

2 に答える 2

4

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。

于 2013-03-14T14:36:37.917 に答える
0

強調表示する CSS クラスを作成し、JS または jQuery を使用して切り替えますか?

CSS ハイライト クラス:

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}

jQueryトグル

$(document).ready(function(){
    $('#text').click(function(){
        $(this).toggleClass('highlighted');
    });
});

Codecademy からの例: JSFiddle

于 2013-03-14T08:23:54.247 に答える