<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>
分享到：
相关推荐
实现类似网易邮箱的TAB标签页功能，很多管理软件也在用，仅供参考
类似淘宝评价流式标签功能实现类似淘宝评价流式标签功能实现类似淘宝评价流式标签功能实现
********** TP自定义模板pc标签(Pctag:pc) ************ ...功能类似PHPcms的pc标签功能。模板标签主动的调用数据源，获取数据后再自行组织展示。支持取模板assign的赋值变量，支持$_GET,$_SERVER等
Android源码，一个小功能，类似nice打标签的功能 [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
1Flash标签云 index.html页面里有tagcloud.swf和tagcloud.xml两个文件的连接,但是测试只能使用http的方式,不能使用文件夹路径, 所以使用时把tagcloud.swf和tagcloud.xml两个文件放在IIS或网站服务器下,就可以正常...
类似firefox功能的标签页,代码简单易懂 只要有点功底1分钟会用 没功底的页一分钟会用 我搞了过再简单不过的demo了,加了这个功能你的项目提高一个级别 哈哈说笑的需求看项目而定
类似傲游浏览器多标签后台管理模板 无刷新，多标签管理
********** TP自定义模板pc标签(Pctag:pc) ************ 功能类似PHPcms的pc标签功能。模板标签主动的调用数据源，获取数据后再自行组织展示。
轻博客源代码 ，经过测试可以使用 轻博客，类似花瓣网，点点网的轻博客
Android源码，一个小功能，类似nice打标签的功能。
一款类似于开源中国发博客处的标签插件
Android流式TextView,类似文字标签。
类似百度搜索提示功能，类似百度搜索提示功能，类似百度搜索提示功能
类似于淘宝购物栏每个标签的分类,有等级分类,目前这个demo就类似于实现这个功能,根据传过来的数字选择标签
Clover 通过插件的形式集成到 Windows Explorer,保留您通常的使用习惯,无需学习新的文件管理操作
微信小程序 外卖点餐 外卖：实现类似锚点功能 （源代码+截图）微信小程序 外卖点餐 外卖：实现类似锚点功能 （源代码+截图）微信小程序 外卖点餐 外卖：实现类似锚点功能 （源代码+截图）微信小程序 外卖点餐 外卖：...
运用Vue实现的多条件筛选功能(类似京东和淘宝功能)，代码实现简单、容易理解
Duilib - 类似浏览器的标签页左右拖动实现
由于公司需求开发的一个类似地图拖拽功能，地图为一张图片，图片上有一些标注点，底图可以在可视框内任意拖拽，标注可以在底图上任意拖动。
在DELPHI中通过RZPAGECONTROL（开发环境需安装RAIZE组件）实现类似IE8及以上版本或傲游浏览器等的多标签窗口功能。压缩包中为完整代码。