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 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
vue实现简单跑马灯效果
May 25 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
php实现复制移动文件的方法
2015/07/29 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
JS交换变量的方法
2015/01/21 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
canvas知识总结
2017/01/25 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python如何统计序列中元素
2020/07/31 Python
Django csrf 验证问题的实现
2018/10/09 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
pandas分批读取大数据集教程
2020/06/06 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
本科生学习总结的自我评价
2013/10/02 职场文书
优秀员工获奖感言
2014/03/01 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
2014年教学工作总结
2014/11/13 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL
Python使用DFA算法过滤内容敏感词
2022/04/22 Python