jQuery tagsinput在h5郵件客戶端中應(yīng)用詳解
更新時間：2016年09月26日 11:05:02 作者：wolfy
為了保證在pc，ios，android端都可以使用，所以使用H5頁面的方式嵌入app的webview中。接下來通過本文給大家介紹jquery tagsinput在h5郵件客戶端中應(yīng)用詳解，感興趣的朋友一起看看吧
摘要
最近一直在折騰郵件的h5應(yīng)用，為了保證在pc，ios，android端都可以使用，所以使用H5頁面的方式嵌入app的webview中。
頁面
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();
如果想添加自動完成功能，可以添加如下參數(shù)
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete'
});
你可以通過addTag和removeTag方法添加和刪除標(biāo)簽
$('#tags').addTag('foo');
$('#tags').removeTag('bar');
你可以通過下面的方法，一次添加多個tag
$('#tags').importTags('foo,bar,baz');
注意：該方法如果傳入空，則會清空input內(nèi)容。
可以判斷是否已經(jīng)存在某個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 在現(xiàn)在的Web開發(fā)項目中扮演著重要角色，jQuery 讓網(wǎng)站有更好的可用性和用戶體驗，讓訪問者對網(wǎng)站留下非常好的印象2012-03-03
打造基于jQuery的高性能TreeView(asp.net)
項目中經(jīng)常會遇到樹形數(shù)據(jù)的展現(xiàn)，包括導(dǎo)航，選擇等功能，所以樹控件在大多項目中都是必須的。那一個實用的樹應(yīng)該具備什么功能呢？2011-02-02
jQuery-Easyui 1.2 實現(xiàn)多層菜單效果的代碼
早上打開郵箱，一位朋友問我之前JQuery-Easyui 怎么做可以實現(xiàn)多級菜單2012-01-01
仿當(dāng)當(dāng)網(wǎng)淘寶網(wǎng)等主流電子商務(wù)網(wǎng)站商品分類導(dǎo)航菜單
本文實現(xiàn)了一個分類導(dǎo)航的菜單,和大多數(shù)流行的電子商務(wù)網(wǎng)站類似，詳細(xì)的實現(xiàn)可以直接查看源代碼.所有的代碼都在一個sidebar.html文件中2013-09-09
Ztree是一個使用jQuery實現(xiàn)的JSP頁面的各種功能樹，本文介紹一個異步獲取數(shù)據(jù)到下拉樹的實現(xiàn)方式,感興趣的朋友可以了解下，或許對你學(xué)習(xí)ztree有所幫助2013-02-02
asp.net網(wǎng)站開發(fā)中用jquery實現(xiàn)滾動瀏覽器滾動條加載數(shù)據(jù)(類似于騰訊微博)
騰訊微博提供兩種加載數(shù)據(jù)的方式，一種是分頁，一種是滾動瀏覽器滾動條加載數(shù)據(jù)，分頁功能我想大家都做得太多了，今天我與大家分享一下我用滾動條滾動加載數(shù)據(jù)2012-03-03
這篇文章主要給大家介紹了關(guān)于如何選擇jQuery版本，是1.x? 2.x?還是3.x? 在選擇使用jquery之前我們常常會考慮jQuery應(yīng)該選擇什么版本?現(xiàn)在jquery一般用什么版本以及jquery ie8的兼容版本和jquery什么版本穩(wěn)定等問題，下面通過這篇文章來看看詳細(xì)的介紹吧。2017-04-04
快速移動鼠標(biāo)觸發(fā)問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleav
這篇文章主要介紹了快速移動鼠標(biāo)所觸發(fā)的問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
下面小編就為大家?guī)硪黄淮?.getJSON不執(zhí)行的簡單記錄。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了jquery+ajax實現(xiàn)注冊實時驗證的方法,結(jié)合實例形式較為詳細(xì)的分析了jQuery基于ajax請求實現(xiàn)注冊時無刷新驗證的相關(guān)技巧,需要的朋友可以參考下2015-12-12