jQuery标签编辑插件Tagit使用指南


Posted in Javascript onApril 21, 2015

一.Tagit插件功能

提高网站交互性,增加用户体验。至于其它的功能,还真没有。用一个input text就可以替换了它。但是text没有输入提示功能,而tagit拥有这个功能。官方示例如下图:

jQuery标签编辑插件Tagit使用指南

将关键词标签化,成为一个整体。方便删除与浏览。

二.Tagit官方地址

http://aehlke.github.io/tag-it/
官方地址上有使用说明,也有用例。用例的颜色搭配也可以选择。不过选来选去也就是这几种,Tagit插件使用jqueryui,所以jqueryui提供的样式也兼容。jqueryui也是jquery的插件,提供了功能非常的界面元素。jqueryui也提供了一些样式供我们选择,但是选来选取就那些。想修改点,却发现有些元素的样式修改挺难的,改一处,不经意间就改了其它的地方。有些地方也提供jqueryui插件的免费样式,当然也有收费的。我们所说的tagit插件式jqueryui的扩展。

tagit的样式修改回简单些,在测试中我会简单的修改tagit样式,只是演示一下怎么修改。修改样式的方式有很多种,这只是其中之一。

jQuery标签编辑插件Tagit使用指南

Tagit支持事件操作,如编辑前、编辑后、删除前、删除后都可以触发事件。

三.Tagit使用方法

Tagit的使用非常简单,但是引用的文件却比较多。因为Tagit是jqueryui的扩展,所以我们在引用jquery的同时,还要引用jqueryui,还有jqueryui的样式。然后再加上自身。
1.引用文件

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script src="tag-it.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">

2.自定义样式

#container{
width:400px;
}
input[type=submit]{
padding:8px;
}
/*定义边框*/
#singleFieldTags{
border:1px solid #b1c9dc;
background:#e7e3ca;
}
/*定义输入元素text*/
#singleFieldTags input{
background:#e7e3ca;
color:blue;
}
/*定义标签样式*/
#singleFieldTags li{
background:#e7e3ca;
border:1px solid #930;
color:red;
}
/*第一输入元素的父元素*/
#singleFieldTags .tagit-new{
border:none;
}

3.js代码

$(function(){
var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
$('#myTags').tagit({
singleField: true, 
singleFieldNode: $('#myTagsValues')
});
$('#singleFieldTags').tagit({
//输入提示
availableTags: sampleTags,
// 与赋值操作有关
singleField: true,
allowSpaces: true, //标签中是否允许空格
singleFieldNode: $('#mySingleField') //将值保存到mySingleField元素
});
$('#submit1').click(function(){
alert($('#myTagsValues').val());
});
$('#submit2').click(function(){
alert($('#mySingleField').val());
});
});

4.使用的html

<div id="container">
<p><b>测试用例1</b></p>
<ul id="myTags">
</ul>
<input type="hidden" id="myTagsValues" />
<input type="submit" value="获取输入信息" id="submit1"/>
<P><b>测试用例2</b></P>
<p><b>绑定默认关键词,在添加关键词时允许空格</b></p>
<p>修改后的样式</p>
<ul id="singleFieldTags">
</ul>
<input name="tags" id="mySingleField" value="CSharp, jQuery" disabled="true">
<br />
<input type="submit" value="获取输入信息" id="submit2" />
</div>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
javascript实现Table排序的方法
May 15 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
Vue.js学习示例分享
Feb 05 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
jQuery背景插件backstretch使用指南
Apr 21 #Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 #Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 #Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 #Javascript
jQuery验证插件validation使用指南
Apr 21 #Javascript
jQuery拖拽插件gridster使用指南
Apr 21 #Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 #Javascript
You might like
php实现阳历阴历互转的方法
2015/10/28 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
Vue程序调试的方法
2019/06/17 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python保存网页图片到本地的方法
2018/07/24 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python 硬币兑换问题
2019/07/29 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
会计出纳岗位职责
2013/12/25 职场文书
银行实习生的自我评价
2014/01/13 职场文书
愚人节活动策划方案
2014/03/11 职场文书
怀念母亲教学反思
2014/04/28 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
中秋晚会致辞
2015/07/31 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis