首页 > 学院 > 开发设计 > 正文

改进的简单Tooltips显示

2019-11-17 01:45:17
字体:
来源:转载
供稿:网友

改进的简单Tooltips显示

使用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();

最终效果:

  


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表