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插件简单实现代码
Apr 19 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 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 json_encode中文乱码问题的解决办法
2013/09/09 PHP
php的sso单点登录实现方法
2015/01/08 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
pytorch实现查看当前学习率
2020/06/24 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
开学典礼决心书
2014/03/11 职场文书
房产委托公证书
2014/04/08 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
大学生自荐信范文
2015/03/05 职场文书
年终工作总结范文
2019/06/20 职场文书
导游词之广西漓江
2019/11/02 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python