Question

我正在使用Mouseover弹出窗口创建一个图像网格，并使用this jQuery。

我在我的DataList鼠标悬停工作正常时绑定它，但弹出窗口显示DataList的第一张图像的相同图像。

看看下面的图片

enter image description here

.aspx代码是

<asp:DataList ID="DataListSearchResult" Width="97%" HorizontalAlign="left" AlternatingItemStyle-VerticalAlign="Bottom"
     RepeatLayout="Flow" ItemStyle-VerticalAlign="Bottom" RepeatDirection="Horizontal"
     runat="server">
     <ItemStyle HorizontalAlign="left" />
     <ItemTemplate>
          <table width="176" border="0" cellspacing="1" cellpadding="0" align="left" style="margin-left: 0px">
              <tr>
                  <td align="left">
                      <div class="thumbnail" id="div" style="width: 170px; height: 170px; margin-left: 5px;">
                      <div id="div1" class="thumb">
                      <img id="img1" alt="<%#gettitlethumb(Eval("ImageTag"))%>" data-tooltip="sticky3" src="TVQ/ThumbNail/<%#Eval("ImageFile")%>" />
                                                           <div id="mystickytooltip" class="stickytooltip">
                                                                <div style="padding: 5px">
                                                                    <div id="sticky3" class="atip">
                                                                        <a class="thumbnail" href="javascript:ImageDetailWindowNew('<%#Eval("IMGId")%>','<%#Eval("ImgCode")%>')">
                                                                        <img id="mousehoverimg" alt="" src="TVQ/Mouseover/<%#Eval("ImageFile")%>" /></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                           </table>
                                </ItemTemplate>
                            </asp:DataList>

.Css

.stickytooltip{
box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
display:none;
position:absolute;
display:none;
border:5px solid black; /*Border around tooltip*/
background:white;
z-index:3000;
}


.stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
background:black;
color:white;
padding-top:5px;
text-align:center;
font:bold 11px Arial;
}

.JS

var stickytooltip={
    tooltipoffsets: [100, -30], //additional x and y offset from mouse cursor for tooltips
    fadeinspeed: 1000, //duration of fade effect in milliseconds
    rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
    stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
    stickynotice1: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message
    stickynotice2: "Click outside this box to hide it", //customize tooltip status message

    //***** NO NEED TO EDIT BEYOND HERE

    isdocked: false,

    positiontooltip:function($, $tooltip, e){
        var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
        var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), 
        x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
        y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
        $tooltip.css({left:x, top:y})
    },

    showbox:function($, $tooltip, e){
        $tooltip.fadeIn(this.fadeinspeed)
        this.positiontooltip($, $tooltip, e)
    },

    hidebox:function($, $tooltip){
        if (!this.isdocked){
            $tooltip.stop(false, true).hide()
            $tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice1)
        }
    },

    docktooltip:function($, $tooltip, e){
        this.isdocked=true
        $tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice2)
    },


    init:function(targetselector, tipid){
        jQuery(document).ready(function($){
            var $targets=$(targetselector)
            var $tooltip=$('#'+tipid).appendTo(document.body)
            if ($targets.length==0)
                return
            var $alltips=$tooltip.find('div.atip')
            if (!stickytooltip.rightclickstick)
                stickytooltip.stickynotice1[1]=''
            stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
            stickytooltip.hidebox($, $tooltip)
            $targets.bind('mouseenter', function(e){
                $alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
                stickytooltip.showbox($, $tooltip, e)
            })
            $targets.bind('mouseleave', function(e){
                stickytooltip.hidebox($, $tooltip)
            })
            $targets.bind('mousemove', function(e){
                if (!stickytooltip.isdocked){
                    stickytooltip.positiontooltip($, $tooltip, e)
                }
            })
            $tooltip.bind("mouseenter", function(){
                stickytooltip.hidebox($, $tooltip)
            })
            $tooltip.bind("click", function(e){
                e.stopPropagation()
            })
            $(this).bind("click", function(e){
                if (e.button==0){
                    stickytooltip.isdocked=false
                    stickytooltip.hidebox($, $tooltip)
                }
            })
            $(this).bind("contextmenu", function(e){
                if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
                    stickytooltip.docktooltip($, $tooltip, e)
                    return false
                }
            })
            $(this).bind('keypress', function(e){
                var keyunicode=e.charCode || e.keyCode
                if (keyunicode==115){ //if "s" key was pressed
                    stickytooltip.docktooltip($, $tooltip, e)
                }
            })
        }) //end dom ready
    }
}

//stickytooltip.init("targetElementSelector", "tooltipcontainer")
stickytooltip.init("*[data-tooltip]", "mystickytooltip")

请帮我创建。

Answer 1

好的，我们这样做

假设我们有一个带有图像的图库文件夹（ 1.jpg，2.jpg等等）

众所周知，datalist本身就是在表中显示数据，所以我们不需要创建表，我们只需要创建图像

<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1">
            <ItemTemplate>
                <a href="#">
                    <img src='gallery/<%# Eval("src") %>.jpg' width="150" data-tooltip='sticky<%# Eval("Id") %>' />
                </a>
            </ItemTemplate>
</asp:DataList>

<div id="mystickytooltip">

</div>

现在，我们的下一个任务是使用mystickytooltip和div填充image

我用 jQuery 完成了这项任务这是我怎么做的

$(function () {

    $("#DataList1 img").each(function () {
         $id = $(this).data("tooltip");
         $src = $(this).attr("src");
         $("div#mystickytooltip").append("<div id='" + $id + "' class='atip'> <img src='" + $src + "' width='200' /></div>");
    });

 });

enter image description here

注意：在stickytooltip.js脚本

之前调用此脚本

鼠标悬停在DataList上的图像弹出不在Asp.net中工作

1 个答案: