自己写的TagBOX---随机变换的字体颜色和大小

最新推荐文章于 2020-12-22 04:58:23 发布

最新推荐文章于 2020-12-22 04:58:23 发布 · 435 阅读

文章标签：

#jQuery #CSS #JavaScript #Mootools #Dojo #ViewUI

JavaScript练习专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的标签框插件，该插件能够动态加载并展示多个JavaScript库名称作为标签，并具备打开/关闭功能。通过随机颜色和字体大小增强了视觉效果。

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				var config = {
					renderTo : "foo" ,
					tags : [
						"JQuery","Prototype","ExtJS","Dojo","Yahoo-YUI","MooTools",
						"Script.Aculo.Us","MochiKit","Rialto","Spry Framework","QooXdoo","Zepo"
					]
				} ;
				TagBOX.load(config) ;
			}) ;
			var TagBOX = function(){
				function load(config){
					var renderTo = $(document.getElementById(config.renderTo)) ;
					var tags = config.tags ;
					_render(renderTo,tags) ;
				} ;
				function _render(renderTo,tags){
					var tagBox = $("<div></div>")
								.addClass("tag-box")
								.appendTo(renderTo) ;
					var close = $("<div></div>")
								.addClass("close")
								.appendTo(tagBox) ;
					var _a = $("<a href='#'></a>")
							.html("打开/关闭")
							.appendTo(close)
							.click(function(){
								var jq = $(this).parent().next().slideToggle() ;
							}) ;
					var _ul = $("<ul></ul>").appendTo(tagBox) ;
					for(var i=0;i<tags.length;i++){
						var tag = tags[i] ;
						var _css = _getStyle() ;
						
						var _li = $("<li></li>").appendTo(_ul) ;
						var _a_ = $("<a href=''></a>")
								.html(tag)
								.css(
									{
										color : _css.color ,
										fontSize : _css.size
									}
								)
								.appendTo(_li) ;
					}
				} ;
				function _getStyle(){
					var sizes = ["11","12","13","14","15","16","18"] ;
					var colors = ["#000","#ff0033","#336699","brown","green","puple","#ffcc00"] ;
					var _style = new Object() ;
					_style.color = colors[parseInt(Math.random() * colors.length)] ;
					_style.size = parseInt(sizes[parseInt(Math.random() * sizes.length)]) ;
					return _style ;
				} ;
				return {
					load : load
				} ;
			}() ;
		</script>