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 相关文章推荐
JavaScript基本语法讲解
Jun 03 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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
记录mysql性能查询过程的使用方法
2013/05/02 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
vue实现购物车小案例
2019/09/27 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
办公室副主任职责范本
2014/03/08 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
战马观后感
2015/06/08 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
思想品德课教学反思
2016/02/24 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
pandas求平均数和中位数的方法实例
2021/08/04 Python