jQuery tagsinput在h5邮件客户端中应用详解


Posted in Javascript onSeptember 26, 2016

摘要

最近一直在折腾邮件的h5应用,为了保证在pc,ios,android端都可以使用,所以使用H5页面的方式嵌入app的webview中。

页面

UI大概是这样的

jQuery tagsinput在h5邮件客户端中应用详解

Jquery tagsinput下载:http://xoxco.com/projects/code/tagsinput/

首先引入js和css

jQuery tagsinput在h5邮件客户端中应用详解

输入框

<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'
//});
Javascript 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 #Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 #Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 #Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 #Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 #Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 #Javascript
关于js原型的面试题讲解
Sep 25 #Javascript
You might like
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
javascript静态的url如何传递
2007/05/03 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Django内容增加富文本功能的实例
2017/10/17 Python
基于Python log 的正确打开方式
2018/04/28 Python
使用python爬取B站千万级数据
2018/06/08 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
详解python中__name__的意义以及作用
2019/08/07 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
个人自我评价分享
2013/12/20 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
毕业证委托书范文
2014/09/26 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server
python双向链表实例详解
2022/05/25 Python