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