类似点点网标签功能

dlcoco9999

浏览: 37797 次
性别:
来自: 福州

最近访客更多访客>>

tjliuchao

newerdragon

tuibo

男人50

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

<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>

分享到：

$在jquery和js中的冲突 | 列表拖拽功能

2011-09-23 15:24
浏览 1379
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论