jQuery Tag文本标签特效js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery Tag文本标签特效js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html class="language-javascript" lang="en">
<head>
<title>jQuery Tag�ı���ǩ��Ч</title>
<meta charset="gb2312">
<link rel="stylesheet" href="css/jquery-tag-this.css">
<link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.min.css">
<link rel="stylesheet" href="css/style.css?v=5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<h1>jQuery Tag-This</h1>

<h3>Examples:</h3>

<div class="example">
<label for="simple-tags">Here's the simplest way to use Tag-This. Type some text and get a tag!</label>
<input type="text" id="simple-tags" name="simple-tags">
<button class="simple-clear-all-button small-button">clear all</button>
<button class="see-code-button small-button">see code</button>
<pre>
<code>//set up Tag-This on our input (just call this once on page load)
$('#simple-tags').tagThis()

//that's it! type in the input above to see it in action.</code>
</pre>

</div>


<div class="example">

<label for="email-tags">This example takes email addresses, and displays an error state when an invalid or duplicate email address was entered.</label>
<input name="email-tags" id="email-tags" />

<button class="email-clear-all-button small-button">clear all</button>
<button class="see-code-button small-button">see code</button>

</div>

<div class="example" id="autocomplete">

<label for="fruit-tags">Tag-This can use jQuery UI's <b>Autocomplete</b> functionality too! Try typing the first few letters of the name of a fruit and select an item from the list to create a tag. </label>
<input name="fruit-tags" id="fruit-tags" />

<button class="fruit-clear-all-button small-button">clear all</button>
<button class="see-code-button small-button">see code</button>
</div>




<div class="example">

<label for="user-tags">Below is an example of creating tags programmatically. Click an 'Add' button below to add tags, then click 'see code' to see how it's done.</label>

<input name="user-tags" id="user-tags" />

<button class="user-clear-all-button small-button">clear all</button>
<button class="see-code-button small-button">see code</button>

<br>
<div class="user cf" data-id="123">
<img src="avatar.png" alt="Generic avatar"/>
<span class="name">John Doe</span>
<button class="add-button small-button">Add</button>
</div>
<div class="user cf" data-id="1234">
<img src="avatar.png" alt="Generic avatar"/>
<span class="name">Jane Doe</span>
<button class="add-button small-button">Add</button>
</div>
<div class="user cf" data-id="12345">
<img src="avatar.png" alt="Generic avatar"/>
<span class="name">Dan Doe</span>
<button class="add-button small-button">Add</button>
</div>
<div class="user cf" data-id="123456">
<img src="avatar.png" alt="Generic avatar"/>
<span class="name">Danielle Doe</span>
<button class="add-button small-button">Add</button>
</div>
<div class="user cf" data-id="1234567">
<img src="avatar.png" alt="Generic avatar"/>
<span class="name">Mike Doe</span>
<button class="add-button small-button">Add</button>
</div>
<div class="user cf" data-id="12345678">
<img src="avatar.png" alt="Generic avatar"/>
<span class="name">Leah Doe</span>
<button class="add-button small-button">Add</button>
</div>
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery.tagthis.js?v=5"></script>
<script src="js/main.js?v=5"></script>
<script src="js/prism.js"></script>
</body>
</html>

JS代码(main.js):

function tagAdded(data){
	var val = data.addedInput.text;
	var input = data.context[0].id + ' input';
	ga('send','event',input,'addTag',val);
}
$('#simple-tags').tagThis({
	callbacks:{
	afterAddTag:tagAdded}
}
);
	$('#email-tags').tagThis({
	email:true,noDuplicates:true,callbacks:{
	afterAddTag:tagAdded}
}
);
	$('#user-tags').tagThis({
	interactive:false,noDuplicates:true,callbacks:{
	afterAddTag:tagAdded}
}
);
	$('#fruit-tags').tagThis({
	autocompleteSource:window.fruitList,callbacks:{
	afterAddTag:tagAdded}
}
);
	$('.add-button').on('click',function(){
	var tagData ={
	text:$(this).siblings('.name').text(),id:$(this).parent().data('id')}
;
	$('#user-tags').addTag(tagData);
	ga('send','event','add tag button','click','user example' );
}
);
	$('.see-code-button').on('click',function(){
	var pre = $(this).parent().find('pre');
	var txt = pre.is(':visible') ? 'see code':'hide code';
	$(this).text(txt);
	pre.toggle();
	ga('send','event','see/hide code button','click');
}
);
	$('.simple-clear-all-button').on('click',function(){
	$('#simple-tags').clearAllTags();
	ga('send','event','clear all button','click','simple example');
}
);
	$('.user-clear-all-button').on('click',function(){
	$('#user-tags').clearAllTags();
	ga('send','event','clear all button','click','user example');
}
);
	$('.email-clear-all-button').on('click',function(){
	$('#email-tags').clearAllTags();
	ga('send','event','clear all button','click','email example');
}
);
	$('.fruit-clear-all-button').on('click',function(){
	$('#fruit-tags').clearAllTags();
	ga('send','event','clear all button','click','autocomplete example');
}
);
	$('a').on('click',function(){
	var href = $(this).attr('href');
	ga('send','event','external link','click',href);
}
);

JS代码(prism.js):

/** * Prism:Lightweight,robust,elegant syntax highlighting * MIT license http://www.opensource.org/licenses/mit-license.php/ * @author Lea Verou http://lea.verou.me */
(function(){
	var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={
	util:{
	type:function(e){
	return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]}
,clone:function(e){
	var n=t.util.type(e);
	switch(n){
	case"Object":var r={
}
;
	for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));
	return r;
	case"Array":return e.slice()}
return e}
}
,languages:{
	extend:function(e,n){
	var r=t.util.clone(t.languages[e]);
	for(var i in n)r[i]=n[i];
	return r}
,insertBefore:function(e,n,r,i){
	i=i||t.languages;
	var s=i[e],o={
}
;
	for(var u in s)if(s.hasOwnProperty(u)){
	if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);
	o[u]=s[u]}
return i[e]=o}
,DFS:function(e,n){
	for(var r in e){
	n.call(e,r,e[r]);
	t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}
}
}
,highlightAll:function(e,n){
	var r=document.querySelectorAll('code[class*="language-"],[class*="language-"] code,code[class*="lang-"],[class*="lang-"] code');
	for(var i=0,s;
	s=r[i++];
	)t.highlightElement(s,e===!0,n)}
,highlightElement:function(r,i,s){
	var o,u,a=r;
	while(a&&!e.test(a.className))a=a.parentNode;
	if(a){
	o=(a.className.match(e)||[,""])[1];
	u=t.languages[o]}
if(!u)return;
	r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;
	a=r.parentNode;
	/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);
	var f=r.textContent;
	if(!f)return;
	f=f.replace(/&/g,"&amp;
	").replace(/</g,"&lt;
	").replace(/\u00a0/g," ");
	var l={
	element:r,language:o,grammar:u,code:f}
;
	t.hooks.run("before-highlight",l);
	if(i&&self.Worker){
	var c=new Worker(t.filename);
	c.onmessage=function(e){
	l.highlightedCode=n.stringify(JSON.parse(e.data),o);
	t.hooks.run("before-insert",l);
	l.element.innerHTML=l.highlightedCode;
	s&&s.call(l.element);
	t.hooks.run("after-highlight",l)}
;
	c.postMessage(JSON.stringify({
	language:l.language,code:l.code}
))}
else{
	l.highlightedCode=t.highlight(l.code,l.grammar,l.language);
	t.hooks.run("before-insert",l);
	l.element.innerHTML=l.highlightedCode;
	s&&s.call(r);
	t.hooks.run("after-highlight",l)}
}
,highlight:function(e,r,i){
	return n.stringify(t.tokenize(e,r),i)}
,tokenize:function(e,n,r){
	var i=t.Token,s=[e],o=n.rest;
	if(o){
	for(var u in o)n[u]=o[u];
	delete n.rest}
e:for(var u in n){
	if(!n.hasOwnProperty(u)||!n[u])continue;
	var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;
	a=a.pattern||a;
	for(var h=0;
	h<s.length;
	h++){
	var p=s[h];
	if(s.length>e.length)break e;
	if(p instanceof i)continue;
	a.lastIndex=0;
	var d=a.exec(p);
	if(d){
	l&&(c=d[1].length);
	var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];
	y&&w.push(y);
	var E=new i(u,f?t.tokenize(d,f):d);
	w.push(E);
	b&&w.push(b);
	Array.prototype.splice.apply(s,w)}
}
}
return s}
,hooks:{
	all:{
}
,add:function(e,n){
	var r=t.hooks.all;
	r[e]=r[e]||[];
	r[e].push(n)}
,run:function(e,n){
	var r=t.hooks.all[e];
	if(!r||!r.length)return;
	for(var i=0,s;
	s=r[i++];
	)s(n)}
}
}
,n=t.Token=function(e,t){
	this.type=e;
	this.content=t}
;
	n.stringify=function(e,r,i){
	if(typeof e=="string")return e;
	if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){
	return n.stringify(t,r,e)}
).join("");
	var s={
	type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{
}
,language:r,parent:i}
;
	s.type=="comment"&&(s.attributes.spellcheck="true");
	t.hooks.run("wrap",s);
	var o="";
	for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';
	return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"}
;
	if(!self.document){
	self.addEventListener("message",function(e){
	var n=JSON.parse(e.data),r=n.language,i=n.code;
	self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));
	self.close()}
,!1);
	return}
var r=document.getElementsByTagName("script");
	r=r[r.length-1];
	if(r){
	t.filename=r.src;
	document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}
}
)();
	;
	Prism.languages.clike={
	comment:{
	pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0}
,string:/("|')(\\?.)*?\1/g,"class-name":{
	pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{
	punctuation:/(\.|\\)/}
}
,keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{
	pattern:/[a-z0-9_]+\(/ig,inside:{
	punctuation:/\(/}
}
,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{
	1,2}
|!|&lt;
	=?|>=?|={
	1,3}
|(&amp;
	){
	1,2}
|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);
	/gi,punctuation:/[{
}
[\];
	(),.:]/g}
;
	;
	Prism.languages.javascript=Prism.languages.extend("clike",{
	keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|get|set|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}
);
	Prism.languages.insertBefore("javascript","keyword",{
	regex:{
	pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{
	0,3}
(?=\s*($|[\r\n,.;
}
)]))/g,lookbehind:!0}
}
);
	Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{
	script:{
	pattern:/(&lt;
	|<)script[\w\W]*?(>|&gt;
	)[\w\W]*?(&lt;
	|<)\/script(>|&gt;
	)/ig,inside:{
	tag:{
	pattern:/(&lt;
	|<)script[\w\W]*?(>|&gt;
	)|(&lt;
	|<)\/script(>|&gt;
	)/ig,inside:Prism.languages.markup.tag.inside}
,rest:Prism.languages.javascript}
}
}
);
	;

CSS代码(prism.css):

/** * prism.js default theme for JavaScript,CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou */
code[class*="language-"],pre[class*="language-"]{color:black;text-shadow:0 1px white;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}
pre[class*="language-"]::-moz-selection,pre[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection{text-shadow:none;background:#b3d4fc;}
pre[class*="language-"]::selection,pre[class*="language-"]::selection,code[class*="language-"]::selection,code[class*="language-"]::selection{text-shadow:none;background:#b3d4fc;}
@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none;}
}
/* Code blocks */
pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;}
:not(pre) > code[class*="language-"],pre[class*="language-"]{background:#f5f2f0;}
/* Inline code */
:not(pre) > code[class*="language-"]{padding:.1em;border-radius:.3em;}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray;}
.token.punctuation{color:#999;}
.namespace{opacity:.7;}
.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#905;}
.token.selector,.token.attr-name,.token.string,.token.builtin{color:#690;}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#a67f59;background:hsla(0,0%,100%,.5);}
.token.atrule,.token.attr-value,.token.keyword{color:#07a;}
.token.regex,.token.important{color:#e90;}
.token.important{font-weight:bold;}
.token.entity{cursor:help;}

CSS代码(style.css):

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html{background:#003050;}
body{max-width:520px;margin:0 auto;margin-bottom:100px;font-family:'Roboto Slab',serif;color:white;}
@media only screen and (max-width:540px){body{margin:0 20px 20px 20px;}
.tag-this{width:100%;}
.tag-this input{font-size:18px;width:100px;}
}
h1{font-size:65px;margin-top:40px;}
@media only screen and (max-width:540px){h1{font-size:35px;margin-top:20px;}
}
h2{font-size:25px;font-weight:500;}
@media only screen and (max-width:540px){h2{font-size:18px;}
}
h3{margin-top:60px;margin-bottom:0;font-weight:500;font-size:25px;}
@media only screen and (max-width:540px){h3{margin-top:35px;}
}
label{font-weight:300;color:white;font-size:16px;}
h5{font-weight:500;font-size:25px;margin:15px 0;}
a{color:white;}
p{font-weight:300;}
.example{padding:20px 0;}
.example pre{background:#fff;margin-top:45px;display:none;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.example code{background:#FFF;clear:both;position:relative;color:#000;font-family:Inconsolata,Consolas,Monaco,Menlo,Courier,monospace;font-size:14px;-webkit-font-smoothing:initial;}
.user{width:220px;clear:both;margin:20px 0;display:block;font-weight:500;}
.user:nth-of-type(1){margin-top:60px;}
.user .name{float:left;top:4px;font-size:14px;position:relative;font-weight:300;}
.user img{float:left;width:25px;height:25px;margin-right:10px;}
.user button{top:12px;background:#E54E4E;color:white;border:none;margin-right:8px;padding-left:20px;padding-right:20px;position:relative;float:right;outline-color:#003050;position:relative;z-index:1;}
.option-list{padding-left:20px;}
.option-list code{/* background-color:none !important;background:none !important;color:#fff;text-shadow:none;*/
 padding:4px 6px !important;}
.option-list li{margin:15px 0;font-size:14px;font-weight:300;line-height:1.9em;}
.option-list li span{}
.small-button{float:left;margin:-10px 10px 0 0;background:#E54E4E;position:relative;color:white;border:none;padding:4px 40px;outline-color:#003050;z-index:5;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.small-button:active{/* top:2px;right:-4px;*/
}
.small-button:active:after{display:none;}
.fork-me-link img{position:absolute;top:0;right:0;border:0;}
@media only screen and (max-width:600px){.fork-me-link img{top:-17px;right:-17px;}
}
@media only screen and (max-width:350px){.fork-me-link{display:none;}
}
.ui-autocomplete{color:#ccc;background:white;z-index:7 !important;}
.ui-autocomplete a{color:black;}
.ui-state-focus{background:#ccc;}
.ui-menu{border:1px solid black;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.ui-menu-item:not(:last-child){border-bottom:1px solid gray;}
.cf:before,.cf:after{content:" ";display:table;}
.cf:after{clear:both;}

附件:下载该文件资源,减少时间成本(增值服务)