类似点点网标签功能

最新推荐文章于 2024-07-22 15:13:59 发布

dlcoco9999

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量98

点赞数

分类专栏： js 文章标签： javascript ViewUI

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>

<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>

body{
font-size:12px;
}

div.tags_com{
border:1px solid black;
position:static;
width:200px;
min-height:100px;
float:left;
margin:2px;
}
.input{
margin-top: -32px;
padding: 0;
}
.write{
border:0 none;
width:188px;
padding: 0 5px 5px;
outline: medium none;
color: #999999;
}
.tags_com{
overflow:hidden;
}
.tags{
margin-left:0px;
list-style:none outside none;
padding:5px;
}
.tags li{
display:inline-table;
border:1px solid #B7C963;
background-color: #C7DA76;
color:#666666;
padding: 0 5px;
margin:0 5px 5px 0;
line-height:20px;
}
.tags li span{
padding: 2px;
-moz-border-radius:2px 2px 2px 2px;
}
.tags a{
color:#003640;
cursor:pointer;
text-decoration:none;
}
.tags li a:link{
color:#003640;
cursor:pointer;
text-decoration:none;
}
.tags li a:visited{
color:#003640;
cursor:pointer;
text-decoration:none;
}
.tags li a:hover{
color:#FF0000;
text-decoration:underline;
}
.tags li a:active{
color:#003640;
text-decoration:none;
}
</style>
<script src="http://192.168.1.36/cdms/vendors/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".drag").live("click",function(){
$(".write").attr("value","");
$(".write").focus();
});

$('.write').live("keydown",function(event){
var e = event || window.event; //浏览器兼容
//处理逗号和回车事件
if(e.keyCode == 188 || e.keyCode == 13){
if($(".write").val()!="")
{
$(".tags").css("margin-top","0px");
$(".input").css("margin-top","-20px");
setli($(".write").val());
}
$(".write").attr("value","");
}

});
$('.write').live("blur",function(){
if($(".write").val()!="")
{
$(".tags").css("margin-top","0px");
$(".input").css("margin-top","-20px");
setli($(".write").val());

}
$(".write").attr("value","");

});
$('.write').live("keyup",function(event){
var e = event || window.event; //浏览器兼容
//处理逗号和回车事件
if(e.keyCode == 188){
$(".write").attr("value","");
}

});
$(".tag_del").live("click",function(){
$(this).parent().remove();
});
function setli(txt)
{
var txts=txt.split("\,");
for(var i=0;i<txts.length;i++)
{
if(txts[i]!="")
$(".tags").append("<li class=tag><span>"+txts[i]+"</span><a class=tag_del>x</a></li>");
}
}

</script>
</HEAD>

<BODY>
<div class="drag">
<div class="tags_com">
<ul class="tags">
</ul>
<div class="input">
<input type="text" class="write" name="write" value="添加标签，用逗号或回车分割"/>
</div>
</div>
</div>
</BODY>
</HTML>

dlcoco9999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似点点网标签功能

New Document body{ font-size:12px;}div.tags_com{border:1px solid black;position:static;width:200px;min-height:100px;float:left;margin:2px;}.input{ ma...
复制链接

扫一扫

专栏目录