欢迎访问WDPHP素材源码!今天是2021年05月10日 星期一,记得吃早餐哦!
您好,游客 [ 马上登录 | 注册帐号 | QQ登录]
当前位置:首页 > 特效 > 表单按钮 > jQuery制作tag标签添加和删除插件代码

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

jQuery标签插件tagsinput.js 您是否使用标签来整理网站上的内容?这个插件会将你无聊的标签列表变成一个神奇的输入,将每个标签变成一个具有自己删除链接的样式对象。该插件处理所有数据 - 您的表单只能看到以逗号分隔的标记列表!...
浏览次数:3135 文件大小: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素材源码所有资源都经过检测,请放心下载!

相关热词:

评论5
头像 游客
友情提示:评论成功赠送5积分(每日前3次),刷评论扣8积分!
  • 头像 5楼
    2019年09月27日
    向日葵
    效果可以了 可以提个建议下吗 下载下来是不能用的 还得自己改js css的引入问题,还有路径问题。。总之感谢
  • 头像 4楼
    2019年09月27日
    向日葵
    很坑 好报错
  • 头像 板凳
    2019年09月27日
    向日葵
    我下载下来了 为啥没效果呢
  • 头像 椅子
    2018年12月30日
    knifeqiao
    特效不错
  • 头像 沙发
    2018年09月06日
    panli
    这个特效不错
Copyright © 2016-2020 wdphp.com 版权所有   本站由WDPHP网站管理系统强力驱动  陕ICP备16002142号
网站首页 | 交流社区 | 关于我们 | 仿站定制 | 积分获取 | 广告投放 | VPS/云主机 | 站点地图
源码 模板 特效 素材 资源 教程 站长