jQuery tagsinput在h5郵件客戶端中應(yīng)用詳解
摘要
最近一直在折騰郵件的h5應(yīng)用,為了保證在pc,ios,android端都可以使用,所以使用H5頁(yè)面的方式嵌入app的webview中。
頁(yè)面
UI大概是這樣的
Jquery tagsinput下載:http://xoxco.com/projects/code/tagsinput/
首先引入js和css
輸入框
<input name="tags" id="tags" value="wolfy,wolfy2" />
上面的輸入框,有默認(rèn)的value,你可以直接調(diào)用tagsInput方法,使其變?yōu)閠ags
$('#tags').tagsInput();
如果想添加自動(dòng)完成功能,可以添加如下參數(shù)
$('#tags').tagsInput({ autocomplete_url:'http://myserver.com/api/autocomplete' });
你可以通過addTag和removeTag方法添加和刪除標(biāo)簽
$('#tags').addTag('foo'); $('#tags').removeTag('bar');
你可以通過下面的方法,一次添加多個(gè)tag
$('#tags').importTags('foo,bar,baz');
注意:該方法如果傳入空,則會(huì)清空input內(nèi)容。
可以判斷是否已經(jīng)存在某個(gè)tag
if ($('#tags').tagExist('foo')) { ... }
如果你希望在添加或者刪除后,有其他的操作,該插件也提供了添加和刪除的回調(diào)函數(shù)。
//$("#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' //});
相關(guān)文章
jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-06-06BootStrap的table表頭固定tbody滾動(dòng)的實(shí)例代碼
本文給大家分享一段關(guān)于BootStrap的table表頭固定tbody滾動(dòng)的實(shí)例代碼,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2016-08-08jquery與prototype框架的詳細(xì)對(duì)比
這篇文章主要是對(duì)jquery與prototype框架進(jìn)行了詳細(xì)的對(duì)比介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11如何使用jquery動(dòng)態(tài)加載js,css文件實(shí)現(xiàn)代碼
在jquery中要實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法有很多種,最簡(jiǎn)單的我們可以直接利用$.include()方法來實(shí)現(xiàn),感興趣的朋友可以參考下哈2013-04-04jQuery實(shí)現(xiàn)三級(jí)菜單的代碼
上周新接手一個(gè)網(wǎng)站建設(shè)的活兒,其中有需要要jquery代碼實(shí)現(xiàn)三級(jí)菜單的需求,其實(shí)說難也不難,下面小編把代碼分享給大家,供大家參考2016-05-05jquery實(shí)現(xiàn)簡(jiǎn)單的二級(jí)導(dǎo)航下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的二級(jí)導(dǎo)航下拉菜單效果,涉及jquery鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式及Ajax調(diào)用的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09基于jquery實(shí)現(xiàn)拆分姓名的方法(純JS版)
jquery拆分姓名處理程序如下,純js實(shí)現(xiàn)的,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05jQuery.datatables.js插件用法及api實(shí)例詳解
這篇文章主要介紹了jquery插件之jQuery.datatables.js用法及api實(shí)例詳解,本文給大家介紹的非常詳細(xì)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10jQuery實(shí)現(xiàn)垂直半透明手風(fēng)琴特效代碼分享
這是一款jquery hover抽屜式導(dǎo)航圖片展開收縮切換特效代碼,用戶還可以自定義對(duì)應(yīng)幻燈片的標(biāo)題與文字說明,是一款非常實(shí)用的幻燈片特效源碼。2015-08-08