欢迎访问WDPHP素材源码!今天是2024年07月21日 星期日,熬夜对身体不好,早点休息吧!
您好,游客 [ 马上登录 | 注册帐号 | 微信登录 | QQ登录]
当前位置:首页 > 特效 > 表单按钮 > jQuery制作tag标签添加和删除插件代码

jQuery制作tag标签添加和删除插件代码
栏目分类:表单按钮    发布日期:2018-09-01    浏览次数:6125次     收藏

jQuery标签插件tagsinput.js 您是否使用标签来整理网站上的内容?这个插件会将你无聊的标签列表变成一个神奇的输入,将每个标签变成一个具有自己删除链接的样式对象。该插件处理所有数据 - 您的表单只能看到以逗号分隔的标记列表!...
浏览次数:6125 文件大小:45.42KB 下载积分:3积分

使用方法

首先,将Javascript和CSS文件添加到您的标记中:

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

在表单中创建一个包含以逗号分隔的标记列表的实际输入。您可以在value属性中放置任何默认或现有标记,并且可以正确处理它们。

<input name="tags" id="tags" value="foo,bar,baz" />

然后,只需在任何应被视为标记列表的字段上调用tagsInput函数。

$('#tags').tagsInput();

如果要使用jQuery.autocomplete,可以使用自动完成URL传递参数。

$('#tags').tagsInput({
  autocomplete_url:'http://***.wdphp.com/api/autocomplete'
});

如果您正在使用带有额外参数的低音jQuery.autocomplete,您还可以将选项发送到自动完成插件,如此处所述。

$('#tags').tagsInput({
  autocomplete_url:'http://***.wdphp.com/api/autocomplete',
  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

您可以通过调用addTag()和removeTag()函数来添加和删除标记。

$('#tags').addTag('foo');
$('#tags').removeTag('bar');

您可以使用importTags()函数导入标签列表...

$('#tags').importTags('foo,bar,baz');

您还可以使用importTags()重置标记列表...

$('#tags').importTags('');

你可以使用tagExist()检查标签是否存在...

if ($('#tags').tagExist('foo')) { ... }

如果在添加或删除标记时需要其他功能,则可以通过onAddTagonRemoveTag参数指定回调函数。两个函数都应该接受单个标记作为参数。

如果您不想提供添加标记的方法,或者您希望提供用于向框添加标记的备用界面,则可以将false传递给可选的“interactive”参数。标签仍将按常规呈现,addTag和removeTag函数将按预期运行。

如果要在每次更新/删除标记时调用函数,请将其设置为“onChange”选项。

默认情况下,如果光标紧跟在标记之后,则按退格键将删除该标记。如果要覆盖它,请将“removeWithBackspace”选项设置为false。

申明:本站代码不提供任何技术服务,仅提供有偿服务。WDPHP素材源码所有资源都经过检测,请放心下载!

相关热词:

源码 模板 特效 素材 资源 教程 站长