jQuery tagsinput在h5邮件客户端中应用详解
更新时间：2016年09月26日 11:05:02 作者：wolfy
为了保证在pc，ios，android端都可以使用，所以使用H5页面的方式嵌入app的webview中。接下来通过本文给大家介绍jquery tagsinput在h5邮件客户端中应用详解，感兴趣的朋友一起看看吧
摘要
最近一直在折腾邮件的h5应用，为了保证在pc，ios，android端都可以使用，所以使用H5页面的方式嵌入app的webview中。
页面
UI大概是这样的
Jquery tagsinput下载：http://xoxco.com/projects/code/tagsinput/
首先引入js和css
输入框
<input name="tags" id="tags" value="wolfy,wolfy2" />
上面的输入框，有默认的value，你可以直接调用tagsInput方法，使其变为tags
$('#tags').tagsInput();
如果想添加自动完成功能，可以添加如下参数
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete'
});
你可以通过addTag和removeTag方法添加和删除标签
$('#tags').addTag('foo');
$('#tags').removeTag('bar');
你可以通过下面的方法，一次添加多个tag
$('#tags').importTags('foo,bar,baz');
注意：该方法如果传入空，则会清空input内容。
可以判断是否已经存在某个tag
if ($('#tags').tagExist('foo')) { ... }
如果你希望在添加或者删除后，有其他的操作，该插件也提供了添加和删除的回调函数。
//$("#tags").tagsInput({
// //'autocomplete_url': url_to_autocomplete_api,
// //'autocomplete': { option: value, option: value },
// 'height': '100px',
// 'width': '300px',
// 'interactive': true,
// 'defaultText': 'add a tag',
// 'onAddTag': function (tag) {
// console.log('添加了', tag);
// },
// 'onRemoveTag': function (tag) {
// console.log('移除了', tag);
// },
// 'onChange': function (tag) {
// console.log('变化了', tag);
// },
// 'delimiter': [',', ';'], // Or a string with a single delimiter. Ex: ';'
// 'removeWithBackspace': true,
// 'minChars': 0,
// 'maxChars': 0, // if not provided there is no limit
// 'placeholderColor': '#666666'
//});
您可能感兴趣的文章:
相关文章
本文主要是介绍了jQuery中on方法及trigger方法，以及围绕这个方法来体验的观察者模式，是篇非常不错的文章，对我们理解观察者模式很有帮助。2014-12-12
今天与大家分享一下，自己写的滑动门。在网上也搜索了一下，没发现比较好的，于是乎自己写一吧~写起来也很简单，为了方便使用，我已经尽量封装好了。好吧，闲话少说，直接上代码吧2012-10-10
jquery追加元素的所有方法全面深入实例讲解（append、prepend、after、before、wrap等等）
几乎所有网站的开发都离不开jQuery，jQuery可以很方便的实现网页中的一些效果，也很轻松的对网页中的一些DIV元素进行添加，修改或删除的操作。由于不同位置追加元素的代码不一样，本文实例讲解如何对网页中某个指定的DIV进行元素的追加操作。2023-03-03
这里给大家分享几段JQuery提示效果的代码，非常的简单实用，有需要的小伙伴直接拿走吧2014-11-11
这篇文章主要介绍了jQuery实现判断控件是否显示的方法,涉及jQuery针对页面元素属性相关操作技巧,需要的朋友可以参考下2017-01-01
这里给大家介绍一款兼容各大浏览器的jQuery处理cookies的插件jQuery.cookie，有需要的小伙伴们可以参考下2014-11-11
本节主要介绍了jquery如何获取一个元素下面相同子元素的个数代码,需要的朋友可以参考下2014-07-07
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
这篇文章主要介绍了jQuery头像裁剪工具jcrop用法,结合实例形式分析了jQuery头像裁剪工具jquery.jcrop.js具体使用技巧,并附带了完整的demo源码供读者下载参考,需要的朋友可以参考下2016-01-01
通过电商购买过电影票的朋友都很熟悉此功能，那么在线选座订座使用程序怎么实现的呢，接下来，给大家分享基于jquery实现在线选座订座之影院篇，感兴趣的朋友快来围观2015-08-08
这篇文章主要为大家详细介绍了jquery结合html实现中英文页面切换,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论