`
ziyuewang
  • 浏览: 40302 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

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

阅读更多
<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>

 

分享到:
评论

相关推荐

    TagBox-开源

    用Java实现的动态XML生成。 具有可扩展的,符合XML的程序脚本语言。

    jquery easyui TagBox with Autocomplete ajax请求方式自动填充

    3. **Ajax请求配置**:在TagBox的选项中,可以设定`onSearch`事件,这是一个在用户输入变化时触发的方法,可以在这里构造和发送ajax请求。 4. **数据处理**:服务器返回的数据需要在前端进行解析,然后调用TagBox的...

    jQuery快速添加标签插件Tagbox.zip

    开发者可以通过自定义CSS样式来调整标签的外观,如颜色、字体、边距等。 2. **整合在下拉菜单中** 对于需要更多选择控制的场景,Tagbox提供了下拉菜单集成方案。用户可以在下拉菜单中浏览和选择已有的标签,或者...

    jquery tagbox插件

    jQuery Tagbox插件就是这样一款工具,它为网页提供了强大的标签输入功能,使得用户可以方便地输入、编辑和管理一系列标签。这款插件基于流行的JavaScript库jQuery构建,为开发者提供了简洁、高效的API来实现自定义...

    [聊天留言]tagBox v1.4.1 Released! 中文版_tagbox141.zip

    这对于程序员和开发者而言尤其有价值,因为他们可以查看、学习、修改或扩展软件的功能,甚至为项目贡献自己的代码。 3. **Python和C语言**:这两种编程语言被提及,暗示tagBox可能支持这两种语言的接口或库。Python...

    Tagbox插件快速添加标签

    【描述】提到的"Tagbox插件快速添加标签"可能是指该插件具有快速创建和管理标签的功能。它可能提供了一个用户友好的界面,允许用户即时输入标签并实时显示,同时可能还包含了自动补全、多选、删除等便捷操作。此外,...

    jQuery Tagbox插件实现的快速添加标签在下方的可删除特效源码

    jQuery Tagbox插件是一款在网页开发中常用的工具,主要用于创建具有动态添加和删除功能的标签系统。这个插件使得用户可以在输入框中输入文本后,将其自动转化为标签,并且允许用户方便地删除这些标签。这样的功能在...

    jQuery TagBox Plugin 1.0.1

    jQuery TagBox是一个jQuery标签盒插件,可以帮助我们用输入表单快速添加标签。jQuery TagBox 1.0.1 增加功能:“enableDropdown”- 用来启用标签inpu下拉选择(默认:“false”)“dropdownSource”- 返回的源标签框...

    tagbox:一种将标签添加到具有零依赖关系的表单的简单方法

    正在安装$ bower install tagbox 或在您的bower.json文件中添加"tagbox" : "~0.0.5" 。用法这将改变! 但现在可以像这样使用: tagbox . init ( 'my-div' ) ; my-div是要在其中创建输入的div的ID。 Tagbox带有一个...

    tagbox_python:教MachineboxTagbox的python脚本

    tagbox_python python脚本,用于从包含带有标签图像文件夹的目录的目录中教授Machinebox / Tagbox,其中文件夹名称是要教授的标签。 该目录必须包含具有以下结构的图像文件夹: tag_1/ img1.jpg img2.jpg ...........

    tagbox:使用 dropsync (Dropbox) 轻松控制项目列表和同步应用程序

    "tagbox:使用 dropsync (Dropbox) 轻松控制项目列表和同步应用程序" 这个标题表明我们正在讨论一个名为 "tagbox" 的工具或项目,它利用了 Dropbox 的功能来方便地管理和同步项目列表。Dropbox 是一个流行的云存储...

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

    **jQuery快速添加标签插件Tagbox特效代码详解** 在网页开发中,标签(Tag)功能是一种常见的用户...通过深入理解其工作原理和API,开发者可以将Tagbox无缝地融入到自己的项目中,创造出更加生动和个性化的网页应用。

    [聊天留言]tagBox v1.4.1 Released! 中文版_tagbox141.rar

    对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步...

    jQuery EasyUI 1.55API 中文版

    tagbox:修复tagbox框和label标签不在一条直线上的问题。 Improvement(改进) combo:'inputEvents'属性自带'blur'事件处理器; numberbox:'cloneFrom'方法可用; slider:'step'属性可以设置为浮点数; menu...

    jQuery Tagbox插件实现的快速添加标签在下方的可删除特效

    jQuery Tagbox插件实现的快速添加标签在下方的可删除特效源码,是一款可以实现输入添加标签机下拉框选择添加标签的两种效果代码,其中,不论是输入添加标签还是选择添加的标签都是可以删除的,需要此款代码的朋友们...

    visualsearch:视觉搜索是一个使用Tagbox查找和聚类相似图像的小应用程序

    一旦运行了Tagbox,就可以执行操作。 $ make run visualsearch by Machine Box - https://machinebox.io/ Loading data from csv Done! Wating for Tagbox to be ready... Done! Setup tagbox state Done! Go to: ...

    【php+mysql+毕业设计源代码】tagBoxReleased! 中文版_tagbox.rar

    资源内容:项目全套源码+完整文档 源码说明: 全部项目源码都是经过测试校正后百分百成功运行。 SpringBoot 毕业设计,SpringBoot 课程设计,基于SpringBoot+Vue开发的,含有代码注释,新手也可看懂。...

    jquery-easyui-EDT-1.5.5.7z

    tagbox:修复tagbox框和label标签不在一条直线上的问题。 Improvement(改进) combo:'inputEvents'属性自带'blur'事件处理器; numberbox:'cloneFrom'方法可用; slider:'step'属性可以设置为浮点数; menu:'...

    easyui验证框使用方法

    `min="5.5"`和`max="20"`定义了允许输入的最小和最大值;`precision="2"`表示小数点后保留2位数字。 ##### 3.4 日期格式验证 - **代码示例**: ```html $.fn.datebox.defaults.formatter = function(date) { ...

    jQuery插件EasyUI校验规则 validatebox验证框

    该框架专为数据驱动的业务而设计,提供数据网格、下拉列表、日期选择器、面板、按钮等多种控件,并且这些控件都是可插拔式的,易于使用和定制。 2. validatebox验证框功能: validatebox是jQuery EasyUI中用于表单...

Global site tag (gtag.js) - Google Analytics