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 在现在的Web开发项目中扮演着重要角色，jQuery 让网站有更好的可用性和用户体验，让访问者对网站留下非常好的印象2012-03-03
打造基于jQuery的高性能TreeView(asp.net)
项目中经常会遇到树形数据的展现，包括导航，选择等功能，所以树控件在大多项目中都是必须的。那一个实用的树应该具备什么功能呢？2011-02-02
早上打开邮箱，一位朋友问我之前JQuery-Easyui 怎么做可以实现多级菜单2012-01-01
本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似，详细的实现可以直接查看源代码.所有的代码都在一个sidebar.html文件中2013-09-09
Ztree是一个使用jQuery实现的JSP页面的各种功能树，本文介绍一个异步获取数据到下拉树的实现方式,感兴趣的朋友可以了解下，或许对你学习ztree有所帮助2013-02-02
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
腾讯微博提供两种加载数据的方式，一种是分页，一种是滚动浏览器滚动条加载数据，分页功能我想大家都做得太多了，今天我与大家分享一下我用滚动条滚动加载数据2012-03-03
这篇文章主要给大家介绍了关于如何选择jQuery版本，是1.x? 2.x?还是3.x? 在选择使用jquery之前我们常常会考虑jQuery应该选择什么版本?现在jquery一般用什么版本以及jquery ie8的兼容版本和jquery什么版本稳定等问题，下面通过这篇文章来看看详细的介绍吧。2017-04-04
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleav
这篇文章主要介绍了快速移动鼠标所触发的问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave),非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
下面小编就为大家带来一篇一次$.getJSON不执行的简单记录。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了jquery+ajax实现注册实时验证的方法,结合实例形式较为详细的分析了jQuery基于ajax请求实现注册时无刷新验证的相关技巧,需要的朋友可以参考下2015-12-12
最新评论