jquery外掛jquery TagBox(建立標籤輸入框)教程
看標題,就知道這個外掛是做什麼的。使用步驟如下:
(一)引入相關檔案:
引入jquery.tagbox.css和jquery.tagbox.js,前提是引入jquery檔案。
(二)加入此控制元件:
<input type="text" id="jquery-tagbox-text" />
(三)初始化:
$(document).ready(function($) {
$("#jquery-tagbox-text").tagBox();
});
由於釋出此外掛的時候,其使用的jquery版本是1.5,在1.9以後的版本中會報一個錯:TypeError: jQuery(...).live is not a function
這是由於jquery1.9以後的版本廢除了live函式,所以要改原始碼
將jquery.tagbox.js裡的這句:$('.'+options.className+'-remove-'+uuid).live( "click", function () {
改為:$(document).on( "click",'.'+options.className+'-remove-'+uuid, function () {
就可以正常使用。輸入標籤按回車或者點選“ADD TAG”按鈕,標籤會顯示在輸入框下面,點選標籤上的關閉按鈕,可刪除該標籤。
預設它標籤的顏色是藍色,博主覺得太醜,就改了它的css,改成透明色
修改如下:
span.tagBox-item-content {
display: inline-block;
padding: 0.417em 0.417em;
font-size: 1em;
line-height: 1.4em;
text-shadow: 0.083em 0.083em 0.083em #888;
/* border: 0.083em solid #3C7BA8;
*/ color: #000000;
background: #FFF;
/*background: -webkit-gradient(linear, left top, left bottom, from(#4998CF), to(#FFF));
background: -moz-linear-gradient(top, #4998CF, #FFF);*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4998CF', endColorstr='#FFF');
-moz-border-radius: 0.5em;
-wekit-border-radius: 0.5em;
border-radius: 0.5em;
}
(四)獲取tag的值:
獲取文字框的值就可以了,多個值以英文的逗號分隔。
var tagValue=document.getElementById("jquery-tagbox-text").value;
要是編輯頁面的話,需要頁面載入完成顯示原來新增的標籤,在控制元件初始化之前賦值就ok了(多個值用英文逗號連線)。
$(document).ready(function($) {
document.getElementById("jquery-tagbox-text").value="人才,天才,英才";
$("#jquery-tagbox-text").tagBox();
});
相關文章
- 標籤輸入外掛
- jQuery Label Better – 友好的表單輸入框提示外掛jQuery
- Jquery 應用(清空輸入框)jQuery
- jQuery 模態框外掛 - iLightBoxjQuery
- jQuery文字框輸入內容同步jQuery
- jQuery不能修改input輸入框typejQuery
- jQuery外掛jQuery
- 推薦 15 個 jQuery 選擇框外掛jQuery
- jQuery文字框內容輸入同步功能jQuery
- JQuery模板外掛-jquery.tmpljQuery
- 你還不會建立jQuery外掛 ?薦jQuery
- jQuery A+ ,一款用於增強a元素標籤功能的外掛jQuery
- 實用的 jQuery下拉選擇框外掛集合jQuery
- jquery 外掛站jQuery
- jQuery限制文字框輸入長度詳解jQuery
- jQuery表單外掛jQuery.formjQueryORM
- 建立更好jQuery外掛的10個建議jQuery
- 實現輸入內容提示的功能(仿google_百度輸入框提示)jquery.ui.autocomplete.js外掛GojQueryUIJS
- jQuery入門筆記之(七)外掛jQuery筆記
- 郵箱輸入自動補全jquery外掛程式碼例項jQuery
- jQuery Mobile 自定義標籤jQuery
- jQuery的外掛列表jQuery
- JQuery蜂巢圖外掛jQuery
- jQuery外掛推薦jQuery
- jquery分頁外掛jQuery
- jquery外掛寫法jQuery
- 不定義 jQuery 外掛,不要說會 jQueryjQuery
- jQuery獲取各種input輸入框的值jQuery
- jQuery右鍵選單外掛jQuery ContextMenujQueryContext
- 10個很棒的 jQuery 外掛和製作教程jQuery
- jquery對標籤屬性操作jQuery
- Angular 實現輸入框中顯示文章標籤Angular
- jQuery擴充套件外掛jQuery套件
- jQuery外掛擴充套件jQuery套件
- jquery日曆外掛SimpleCalendarjQuery
- jQuery外掛開發模式jQuery模式
- jquery--uploadify 外掛jQuery
- 240個jquery外掛(轉)jQuery