jquery实现标签输入功能
类别:Web前端 浏览量:1481
时间:2014-12-27 jquery实现标签输入功能
jquery实现标签输入功能一、标签输入功能效果图
二、tagsinput.css 样式
.clearfix:after
{
clear: both;
content: " ";
display: block;
height: 0;
}
.tags-wrapper
{
width: 500px;
position:relative;
}
#addTagWrap
{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D9D9D9;
padding: 0 5px;
}
#addTagWrap .inner-tag-wrapper,.layer-tag-name
{
background: none repeat scroll 0 0 #40A8CD;
border-radius: 3px;
color: #FFFFFF;
float: left;
height: 26px;
line-height: 26px;
margin: 4px 6px 0 0;
padding: 0 5px 0 10px;
white-space: nowrap;
}
#addTagWrap .inner-tag-close
{
color: #A0D4E6;
font-family: "宋体" ,sans-serif;
margin-left: 4px;
text-decoration: none;
}
#tagInput
{
background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
margin: 0;
height: 24px;
line-height: 24px;
overflow: hidden;
padding: 5px;
width: 215px;
}
#tagInput:focus{ outline:none }
.layer-tags-wrapper
{
border: 1px solid #DADADA;
border-top:0;
overflow: auto;
position:absolute;
left:0;
right:0;
display:none;
background: none repeat scroll 0 0 #FFFFFF;
}
.layer-tags-wrapper .layer-tags-box
{
padding: 0 5px;
}
.layer-tags-wrapper .layer-tags-left
{
float: left;
text-align: center;
padding-right: 5px;
margin-top: 4px;
height: 26px;
line-height: 26px;
}
.layer-tags-wrapper .layer-tags-right
{
overflow: auto;
}
.layer-tags-wrapper .layer-tag-name
{
padding-right: 10px;
text-decoration: none;
}
.layer-tags-foot
{
height: 30px;
line-height: 30px;
color: #999999;
padding-left:5px;
}
.layer-tags-foot-top
{
margin-top:5px;
border-top:1px dotted #C9C9C9;
}
.message-box
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.35);
color: #FFFFFF;
width: 300px;
min-height: 50px;
line-height: 50px;
top: 50%;
left: 50%;
margin-top: -50px; /*注意这里必须是li高度的一半*/
margin-left: -150px; /*这里是li宽度的一半*/
position: fixed !important; /*FF IE7*/
position: absolute; /*IE6*/
z-index: 999;
text-align: center;
border-radius: 5px;
}
三、jquery.tagsinput.js 脚本
(function ($) {
$.fn.TagsInput = function (options) {
//默认参数
var defaults = {
usedTags: "",
hotTags: "",
tagNum: 0,
maxWords: 0
};
//用传入参数覆盖了默认值
var opts = $.extend(defaults, options);
//对象
var $this = $(this);
$this.hide();
var arrayTags;
var strHtml;
strHtml = "<li class=\"tags-wrapper clearfix\">";
strHtml += "<li id=\"addTagWrap\" ><li class=\"added-tags-wrapper\"></li>";
strHtml += "<input id=\"tagInput\" type=\"text\" placeholder=\"添加标签,以逗号、分号或空格隔开\" autocomplete=\"off\">";
strHtml += "</li><li class=\"layer-tags-wrapper\">";
if (opts.usedTags != "") {
strHtml += "<li class=\"clearfix layer-tags-box\"><li class=\"layer-tags-left\">记忆标签</li><li class=\"layer-tags-right\">";
arrayTags = opts.usedTags.split('|');
for (i = 0; i < arrayTags.length; i++) {
strHtml += "<a class=\"layer-tag-name\" href=\"javascript:;\">" + arrayTags[i] + "</a>";
}
strHtml += "</li></li>";
}
if (opts.hotTags != "") {
strHtml += "<li class=\"clearfix layer-tags-box\"><li class=\"layer-tags-left\">热门标签</li><li class=\"layer-tags-right\">";
arrayTags = opts.hotTags.split('|');
标签:jquery
您可能感兴趣
- Jquery实现table表格行的添加、删除
- javascript和jquery的区别详解(JavaScript与JQuery框架基础入门教程)
- jquery图片轮播代码
- jquery实现聚光灯效果
- jquery实现在光标位置插入内容
- jquery弹出窗口过渡效果(jQuery实现大屏滚动播放效果)
- jquery插件开发
- jquery中is()
- JQuery中serialize与serializeArray
- jquery判断是否显示或隐藏
- jquery实现页面滚动时自动加载内容
- jQuery实现tab切换
- jqueryajax实现部分刷新(php+jQuery ajax实现的实时刷新显示数据功能示例)
- jQuery中noConflict()的用法
- jquery中find()与filter()的区别
- jquery左右选择框
- 《道德经》:功成不局,泰而不骄(道德经:功成不局)
- 每日一典 过江之鲫(每日一典过江之鲫)
- 红色代表什么(红色代表什么意义和象征)
- 菲律宾安全吗(菲律宾安全吗2023)
- 彩礼重要吗()
- 写信告诉我今天海是什么颜色(写信告诉我今天海是什么颜色回答)
热门推荐
- jenkins回滚docker容器(关于docker部署的jenkins跑git上的程序的问题)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- laravel架构设置(Laravel框架查询构造器 CURD操作示例)
- windows服务器安全设置经验(Windows 2016 服务器安全设置)
- mysql创建数据库基本指令(MySql 新建用户与数据库的实际操作步骤)
- C#静态变量、静态方法、静态类
- php闰年计算公式(php判断/计算闰年的方法小结三种方法)
- redhat6.5安装mysql(Redhat7.3安装MySQL8.0.22的详细教程二进制安装)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- C#中Serializable序列化