改进的简单Tooltips显示_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > 改进的简单Tooltips显示

改进的简单Tooltips显示

 2014/9/14 12:23:31  临风独啸  程序员俱乐部  我要评论(0)
  • 摘要:使用js简单改进了Tooltips的显示效果,可进一步使用CSS对改进的Tooltips进行美化。前台布局代码:<asp:PanelID="Panel1"runat="server"Height="460px"ScrollBars="Auto"Width="735px"><divid="info"runat="server"style="line-height:35px;padding:10px0010px;"></div></asp:Panel>
  • 标签:
使用js简单改进了Tooltips的显示效果,可进一步使用CSS对改进的Tooltips进行美化。 前台布局代码:
 <asp:Panel ID="Panel1" runat="server" Height="460px" ScrollBars="Auto" 
        Width="735px">    
 <div id="info" runat="server" style=" line-height:35px;
     padding:10px 0 0 10px;" ></div>
    </asp:Panel>
     
     <div id="show" style="
         border: thin dashed #808080; 
         z-index: 1; position: absolute;
         top: 300px; left:120px; line-height:35px; 
         width: 450px; padding:15px 15px 15px 15px; 
         background-color :#FFFF99; visibility:hidden; ">
</div>

前台js脚本

function cl() {
            var n = document.getElementById("mid");
            var s = document.getElementById("show");
            s.innerText = n.title;

            var v = new Array();
            v = document.getElementsByClassName("sign");
            for (i = 0; i < v.length; i++)
                v[i].style.color = "Blue";
            n.style.color = "LimeGreen";
            for (i = 0; i < v.length; i++)
                v[i].id = "";
            s.style.top = window.event.clientY + "px";
            //s.style.left=(window.event.clientX + 50 )+ "px";
            s.style.visibility = "visible";
}

后台代码:

string str = "";
DataTable dt = new DataTable();
//数据表赋值...  三列:Tooltips内容列 链接指向地址列 链接显示文字列

for (i = 0; i < dt.Rows.Count;i++ )
{

    str+= "<a title='" + dt.Rows[i]["Tooltips内容列"].ToString()
    + "' target='_blank' href='#" + dt.Rows[i]["链接指向地址列"].ToString()
    + "' class='sign' onmouseover=\"this.id='mid';cl()\">" 
    + dt.Rows[i]["链接显示文字列"].ToString()+ "</a><br/>";
    
}

info.InnerHtml = str +"<br/><br/>";
dt.Dispose();

最终效果:

  

 

  • 相关文章
发表评论
用户名: 匿名