JS 动态生成一个下载详细信息提示框

最新推荐文章于 2023-07-21 13:48:48 发布

小六杂聊

最新推荐文章于 2023-07-21 13:48:48 发布

阅读量594

点赞数

分类专栏： js css 文章标签： JS 动态生成一个下载详细信息提示框

本文链接：https://blog.csdn.net/kabuqinuo229891/article/details/38388985

版权

js 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

上一周，通过html与css实现了一个下载详细信息tooltip,如下图：

然而，在做项目的时候，多数都是动态来生成，今天想通过js来动态生成这个下载详细信息提示框。

html代码如下:

<!DOCTYPE>
<html>
    <head>
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="relativeBlogs.css" type="text/css"/>
		<script type="text/javascript"  src="jquery-1.9.1.min.js"></script>
    </head>
    <body>
	       <div style="position:absolute;top:200px;left:300px;">
             <a href="#">下载</input>
	       </div>
    </body>
</html>

js代码如下图:

		     (function($){
			    $.fn.showDialog=function(data){
				    var target=$(this);
					var $body=$("<div><div>");
					 target.mousemove(
							  function () {
								  var $div=$("<div id='RelativeBlogs' class='RelativeBlogs' style='position:absolute;left:" + (target.offset().left+target.width()+6) + "px;top:" +(target.offset().top + target.height() +6) + "px'></div>");
								   var title=$("<strong>相关文章阅读</strong>");
								   var close=$("<a id='btn_close'>关闭</a>");
								   title.append(close);
								   close.mousedown(function() {
									    console.info($div);
										$body.remove();
									});
								   $div.append(title);
								   var ul=$("<ul></ul>");
								   $.each(data,function(i,item){
									   var li=$("<li></li>");
									   var span=$("<span class='date'>"+item.date+"<span>");
									   var a=$("<a title="+item.title+" href='"+item.href+"'>"+item.title+"</a>");
									   li.append(span);
									   li.append(a);
									   ul.append(li);
								   }); 
								   $div.append(ul);
                                   $body.append($div);
								   $(document.body).append($body);
							  });
				}
			  })(jQuery);
              });

调用如下：传入一个结果集data

 $(function() {
                 var data=[
				   {title:"Jquery插件--easyUI属性汇总... ",date:"2012/03/14",href:"Jquery插件--easyUI属性汇总..."},
				   {title:"Jquery插件--easyUI属性汇总... ",date:"2012/03/14",href:"Jquery插件--easyUI属性汇总..."},
				   {title:"Jquery插件--easyUI属性汇总... ",date:"2012/03/14",href:"Jquery插件--easyUI属性汇总..."},
				   {title:"Jquery插件--easyUI属性汇总... ",date:"2012/03/14",href:"Jquery插件--easyUI属性汇总..."},
				   {title:"Jquery插件--easyUI属性汇总... ",date:"2012/03/14",href:"Jquery插件--easyUI属性汇总..."},
				   {title:"Jquery插件--easyUI属性汇总... ",date:"2012/03/14",href:"Jquery插件--easyUI属性汇总..."}

				 ];
                 $("a").showDialog(data);

css代码如下：

@CHARSET "UTF-8";

*{padding: 0; margin: 0;}
a {color:#4466BB;outline:0;}
a:hover {color:#00A;}
ul,ol {list-style-type:none;}
img {border:0;}
#RelativeBlogs {width:400px;background-color:#FFFFFF;
font-size:10.5px;
border:1px solid #4682B4;}
#RelativeBlogs strong {display:block;margin:0 0 8px 0;background:#4682B4;color:#fff;padding:5px 5px;}
#RelativeBlogs strong a#btn_close {cursor:pointer;float:right;color:#fff;font-size:11px;}
#RelativeBlogs ul {margin:10px;}
#RelativeBlogs ul li {line-height:22px;}
#RelativeBlogs ul li a {background:url('a2.gif') no-repeat left center; padding-left:15px;font-size:10pt;text-decoration:none;}
#RelativeBlogs ul li .date {float:right; font-size:12px; color:lighten(#333,20%);-webkit-text-size-adjust:none;}

还有一个小图标：