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提示效果(仿腾讯弹出层)
Feb 05 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python subprocess库的使用详解
2018/10/26 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
师德先进个人材料
2014/12/20 职场文书
实习单位指导教师评语
2014/12/30 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python