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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
详解javascript高级定时器
Dec 31 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
Vue分页插件的前后端配置与使用
Oct 09 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
详解php反序列化
2020/06/10 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
js下弹出窗口的变通
2007/04/18 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
浅谈js闭包理解
2019/04/01 Javascript
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python小程序实现刷票功能详解
2019/07/17 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
小学节能减排倡议书
2014/05/15 职场文书
应届毕业生自荐信
2014/05/28 职场文书
布达拉宫的导游词
2015/02/02 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
民事调解协议书
2016/03/21 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA