2

ポップアップはデータベースから情報を取得し、ネストされたグリッドビュー内の画像にカーソルを合わせると表示されるパネルに動的に追加します。ポップアップの位置も画像の左側にある必要があります。画像にカーソルを合わせると、マウスアウトするとすぐに消えます。私も初心者であるjqueryを使用してこれを達成しようとしてきたので、誰かが助けることができる場合は支援が必要です。

 $('img.imagepopupcontext').mouseover(function () {
            var cvalue = $(this).parent().parent().attr('id'); //tr.innerGridRow parent
            count++;
            $('#ctl00_ContentPlaceHolder1_txtkey').val(cvalue);
            $('#ctl00_ContentPlaceHolder1_btnpopupclick').click();

            var pos = $(this).offset();

            $('#ctl00_ContentPlaceHolder1_panelshow').css({
                position: "absolute",
                top: (pos.top - 100) + "px",
                left: (pos.left - 310) + "px"
            });
            $('#ctl00_ContentPlaceHolder1_panelshow').css('display', 'block');
            //alert('image test over' + pos.left + "," + pos.top);

        });

        $('img.imagepopupcontext').mouseout(function () {
            //alert(count);
            count = 0;
            //$('#ctl00_ContentPlaceHolder1_btnpopupclick').html('');
            $('#ctl00_ContentPlaceHolder1_panelshow').hide();
            //alert('image test mouse out');

        });

JSFIDDLE を見るにはここをクリック

4

1 に答える 1

2

以下のコードがあなたの旅の始まりになると思います。JSFiddleも更新しました。ただし、アカウントが節約されるかどうかはわかりません。

jQuery のホバー機能には「mouseover」と「mouseout」の両方が組み込まれているので、少し使いやすくなっています。

CSS

    #info
    {
        background: #CCC;
        width: 300px;
        padding-bottom: .5em;
        padding-right: 15px;
        overflow: hidden;
        position: absolute;
    }

HTML

    <table border="1" bgcolor="skyblue">
        <tr>
            <td>
                in progress
            </td>
            <td>
                Sale
            </td>
        </tr>
        <tr>
            <td>
                in progress
            </td>
            <td>
                <table border="1" bgcolor="orange">
                    <tr>
                        <td>
                            inner table
                        </td>
                        <td>
                            inner table2
                        </td>
                        <td>
                            <img id="imgpopup" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div id="divshowpopup">
        <p id="dbInfo">
            Show information from database
        </p>

jQuery

    $(function () {

        // Set the offsets for the mouse over upfront 
        // so they are easier to change.
        var offsetY = -20; 
        var offsetX = 40;

        $('#imgpopup').hover(function (e) {
            // Begin mouseover function

            // Grab the p tag with the id of 'dbInfo' in order
            // to retrieve information from it later
            var $dbInfo = $('#dbInfo');

            // Create a variable that will hold the HTML
            // for the pop up. However, this is not the best
            // way dynamically create the popup. You should
            // look into jQuery templating.
            var html = '<div id="info">';
            html += '<h4>Info here</h4>';
            html += '<p>' + $dbInfo.text() + '</p>';
            html += '</div>';

            // Append the variable to the body and the select
            // itself and its children and hide them, so you
            // can then add a fadeIn effect.
            $('body')
                .append(html)
                    .children('#info')
                    .hide()
                    .fadeIn(400);

            // This is where the popup offesets away from your cursor
            // The variables set up top will decide how far away the
            // pop up strays away from your cursor.
            $('#info')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);

        }, function () {
            // Begin mouseout function

            // Remove on mouse out
            $('#info').remove();
        });

        // Whenever the mouse moves the popup will follow using
        // the offsets set up top.
        $('#imgpopup').mousemove(function (e) {
            $('#info')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);
        });

    });
于 2012-05-03T18:27:51.407 に答える