js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 表单按钮

jQuery标签输入特效,自带删除标签功能

发布时间:2015-08-29 13:20:44    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery标签输入特效,自带删除标签功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
	<title>jQuery标签输入特效,自带删除标签功能 - js特效代码网</title>    
	<script type="text/javascript" src="js/jquery.min.js"></script>    
	<script type="text/javascript" src="js/tabControl.js"></script>    
	<style type="text/css">    
		*{margin:0;padding:0;list-style:none;border:none;outline:none;}    
		#tag{width:700px; height:30px; text-align:left; padding:10px; border:2px #E0E0E0 solid; line-height:25px;}    
		/*input post tab*/    
		div.radius_shadow{border:1px solid #DBDBDB;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius: 5px;padding:5px;font-size:12px;background:#fff;}    
		span#radius{display:inline-block;float:none;font-size:12px;padding:2px 5px;margin:-2px 5px 15px;border:1px solid #E0E0E0; background-color:#F0F0F0;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius: 5px;color:#000;}    
		.tabinput{margin-left:5px;border:1px solid #eee;border-radius:3px;padding:5px;}    
		.tabinput:focus{border-color:#ddd;}    
		a#deltab{cursor:pointer;display:inline-block;color:#808080;margin-left:5px;font-weight:bold;}    
		a#deltab:hover{color:#D2D2D2;text-decoration:none;}    
		#getTab{ margin-top:10px;border:1px solid #E0E0E0; background-color:#F0F0F0; padding:5px 10px; cursor:pointer;}    
	</style>    
	<script type="text/javascript">    
		$(function(){    
			$("#tag").tabControl({maxTabCount:10,tabW:80,tabMaxLen:12},"js代码网,免费素材,js代码,jsdaima");    
			$("#getTab").click(function(){    
				var sucaijiayuan = $("#tag").getTabVals();    
				alert(sucaijiayuan.join(","));    
			});    
		});    
	</script>    
</head>    
<body>    
	<div style="width:760px;margin:40px auto 0 auto;text-align:center;">    
		<div id="tag"></div>    
		<input id='getTab' type="button" value=" 提 交 ">    
	</div>    
</body>    
</html>



标签

jQuery标签输入特效,自带删除标签功能

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

JS鼠标滑过文字标签改变标签显示内容

jquery鼠标滑过标签选项卡切换特效

jquery.caroufredsel按钮控制图片滚动,点击标签分类筛选特效

jquery实现在输入框回车添加标签特效

jquery实现文字标签滑动显示特效,带标签数量

js实现球形滚动标签云文字特效代码

jQuery实现tab选项卡标签自动切换特效

jquery实现鼠标悬停图片突出显示大图,另外带标签关键词功能

jQuery实现带标签选项卡图片左右切换特效代码

jquery实现彩色标签图片tab选项卡滑动切换特效代码

jQuery Tagbox插件实现快速添加标签特效代码

js自适应宽度的标签导航

横向(纵向)时间轴tab标签切换和水平(垂直)切换幻灯片效果 demo1# 横向滚动

js flash 实现标签风格焦点图幻灯片轮换特效代码

js实现可暂定、可以开始、自动滚动的TAB标签特效代码

jQuery tab标签选项卡切换特效代码带缩略图列表效果

友荐云推荐
大家说 此评论不代表本站观点