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 this 深入理解
Jul 30 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
js清空form表单中的内容示例
May 20 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
Angular2自定义分页组件
Apr 19 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
关于JavaScript轮播图的实现
Nov 20 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和ACCESS写聊天室(七)
2006/10/09 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
实例解析Array和String方法
2016/12/14 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
python动态监控日志内容的示例
2014/02/16 Python
让 python 命令行也可以自动补全
2014/11/30 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
学生宿舍管理制度
2014/01/30 职场文书
培训主管岗位职责
2014/02/01 职场文书
学党史心得体会
2014/09/05 职场文书
校运会宣传稿大全
2015/07/23 职场文书
中学音乐课教学反思
2016/02/18 职场文书