-3

したがって、私がしなければならないことは次のとおりです。リスト ボックスから項目を選択するときに、その項目の追加情報を別のボックスに動的に表示できるようにする必要があります。つまり、車のリストをスクロールしているとしましょう。選択した車ごとに、価格、色、走行距離などを表示します。カーソルを合わせたときの要素。言い換えれば、理想的には、アイテムのすぐ隣に必要なすべての情報が入った魔法のようにポップアップする小さなボックスが表示されることです。それを実装する方法に関する推奨事項はありますか？

更新：探しているものを明確にするために。以下の回答の1つが示唆するように、change（）イベントに応答し、この特定の目的のために以前に定義したhtml要素を手動で更新することで、最終的に実装しました。

$('#available-elements').change(function() {
    var id = $(this).val();
    var element = find_element(id);//retrieve complete element info
    $('#the_prompt').show();
    $('#prompt_name').find('td').text(element.title);
    $('#prompt_datatyp').find('td').text(element.dataType);     
    $('#prompt_groupCode').find('td').text(element.groupCode);
});

prompt 要素は次のように定義されます。

    <table id="the_prompt" style="border:2px solid grey;">
      <tr id='prompt_name'><td class="rate_prompt"></td></tr>
      <tr id='prompt_datatyp'><td class="rate_prompt"></td></tr>
      <tr id='prompt_groupCode'><td class="rate_prompt"></td></tr>
     </table>

しかし、これか何かのプラグインがあることを望んでいました。特に、事前に定義された場所、サイズなどで静的な html 要素を定義し、そのコンテンツを手動で更新することを避けることを望んでいました。代わりに、クリックされたリスト要素のすぐ隣に、クリックされた要素を指す矢印が付いた、ホバー オーバー ヘルプに似たプロンプトが表示されることを望みます。私はまだ jQuery に比較的慣れていませんが、その機能とプラグインに非常に感銘を受けているため、上記のアイデアは非現実的ではありませんでした。

4

2 に答える 2

2

このソリューションは、データ属性から取得した説明を固定 div に表示し、リスト項目にカーソルを合わせたときにインフォボックスの位置を調整します。

jQuery コード:

$(document).ready(function(){
    var lastli = null;
    var ci = $('#carinfo');
    $('.carlist li').hover(function(e){
        if (lastli == this) { return; } else {}
        var top = e.pageY;
        var left = e.pageX;
        if (left+100 > $(window).width()){
            left -= 100;
        }
        ci.html($(this).data('info'));
        ci.css({'top':top, 'left': left}).show();
    },function(e){
        var elt = e.toElement || e.relatedTarget;
        if (elt != this && elt != ci[0]) {
            ci.hide();
            lastli = null;
        } else {
            lastli = this;
        }
    });
    ci.mouseleave(function(e){
        var elt = e.toElement || e.relatedTarget;
        if (elt!=lastli) {
            ci.hide();
            lastli = null;
        }
    });
});

HTML サンプル:

<ul class="carlist">
    <li data-info="2004 Ford Ranger XLT 2.3L 2WD 125758 miles $5,988">
        2004 Ford Ranger
    </li>
</ul>

<div id="carinfo"></div>

CSS:

ul.carlist { 
    list-style:none;
    padding:0;
}

ul.carlist li {
    padding: 5px;
    margin: 5px;
    background-color:#eef;
}

#carinfo {
    position:absolute;
    display:none;
    background-color: white;
    border:1px solid red;
}

デモ

于 2013-05-14T18:51:42.353 に答える