欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 工具类 > jQuery标签输入插件

jQuery标签输入插件

jQuery标签输入插件

关键词:tags,标签,标签输入,jquery标签,jquery标签插件,标签输入插件,jquerytags,jquery库,gongjulei

描述:这是一款带自动完成功能的jQuery标签输入插件。该jQuery标签输入插件还能实现简单的验证功能,并且采用响应式设计,十分实用。

简要教程

这是一款带自动完成功能的jQuery标签输入插件。该jQuery标签输入插件还能实现简单的验证功能,并且采用响应式设计,十分实用。

使用方法

在页面中引入jquery和jqueryui文件,以及jquery.tagsinput-revisited.css和jquery.tagsinput-revisited.js文件。

<link href="css/jquery-ui.css" rel="stylesheet"> 
<link href="css/jquery.tagsinput-revisited.css" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery.min.js"></script>             
<script type="text/javascript" src="js/jquery-ui.min.js"></script>             
<script type="text/javascript" src="js/jquery.tagsinput-revisited.js"></script>             
                
HTML

使用一个input标签作为输入标签的容器,value中设置的值可以作为预定义标签使用。

<input id="example" name="example" type="text" value="jQuery,Script,Net">
                
初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery标签输入插件。

$("#example").tagsInput();        
                

配置参数

该jquery标签输入插件的可用配置参数有:

$(".tagsinput#tags").tagsInput({
  interactive: true,
  placeholder: "Add a tag",
  minChars: 2,
  maxChars: 20, // if not provided there is no limit
  limit: 5, // if not provided there is no limit
  validationPattern: new RegExp("^[a-zA-Z]+$"), // a pattern you can use to validate the input
  width: "300px", // standard option is "auto"
  height: "100px", // standard option is "auto"
  autocomplete: { option: value, option: value},
  hide: true,
  delimiter: [",",";"], // or a string with a single delimiter
  unique: true,
  removeWithBackspace: true,
  onAddTag: callback_function,
  onRemoveTag: callback_function,
  onChange: callback_function
});     
                

该jquery标签输入插件的github地址为:https://github.com/underovsky/jquery-tagsinput-revisited

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_gongjulei/9343.html

 在线演示  免费下载
编号:201809250000009343
大小:0.11MB
上传时间:2018-11-08 07:01
素材由用户"byz521521"上传分享。

标签

最新推荐素材

与jQuery标签输入插件相关的素材

.