`

拔了一个德问的一个添加标签效果

阅读更多
请自己下载最新版本的Jquery。附件是一个完整小例子。
水平有限多多批评。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>muselect Test</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
   <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="muselect.js"></script>
 </head>
<style>
a.addt {background:#F2F2F2;color:#666;padding:2px 5px;margin-left:2px;}
a.addt:hover {background:#c6401b;color:#fff;}
a.sel {background:#F2F2F2;color:#666;padding:2px 7px;}
a.sel:hover {background:#c6401b;color:#fff;}
.box{background:#FFF;height:auto;overflow:visible;position:relative;z-index:100;}
.box{float:left;border:1px solid #DFDFDF;width:539px;font:12px '微软雅黑';color:#858384;height:36px;line-height:36px;padding:0px 2px;overflow:hidden;border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;position:relative;}
.box{background:#fff;height: auto; overflow: visible; position: relative;  z-index: 100;  border: 1px solid #DFDFDF; border-radius: 3px 3px 3px 3px;color: #858384;float: right; font: 12px/36px '微软雅黑'; padding: 0 2px;width: 537px;}
.mu_select_item input{color:#D5D5D5; border:none; height:22px; margin:0; padding:5px; width:140px; background:#FFF;}
.mu_select_item input{outline:none;margin:5px 0 5px 2px; padding:1px 4px;height:18px;line-height:18px;overflow:hidden;border-radius:2px; -moz-border-radius:2px;-webkit-border-radius:2px;background:#EEEEEE; color:#353535; display:inline-block; vertical-align:middle;}
.mu_select_item_arrow,.mu_select_item_arrow_up{background: url("./tiparrow.png") no-repeat scroll 0 0 transparent;cursor: pointer;display: inline-block;height: 18px; position: absolute; right: 5px;top: 7px;width: 18px;z-index: 50;}
.mu_select_item_arrow,.mu_select_item_arrow_up{display:inline-block;width:18px;height:18px;background:url(./tiparrow.png) no-repeat;position:absolute;right:5px;top:7px;z-index:500;cursor:pointer;}
.mu_select_item_arrow_up {background-position: 0 -18px;}
span.input_arrow {position:absolute;top:-6px;background:url(./arrowtopic.gif) no-repeat left top;text-indent:-1000em;width:10px;height:10px;}
.sel_mu_select_item{position:absolute;top:32px;left:-1px;border:1px solid #CCC;background:#FFF;width:100%;}
.sel_mu_select_item .mu_select_item_value{padding:10px 6px;min-height:30px;max-height:220px;overflow-y:auto;}
.sel_mu_select_item .mu_select_listcnt,.sel_mu_select_item .mu_select_list{overflow:auto;zoom:1;padding-bottom:5px;}
.sel_mu_select_item .mu_select_list_all .mu_select_listcnt{display:none;}
.mu_select_item .sel_mu_select_item .mu_select_listcnt p.on a:hover {color:#000;}
.sel_mu_select_item .mu_select_list dd{float:left;_display:inline;margin:0px 15px 0px 5px;color:#004B73;cursor:pointer;}
.sel_mu_select_item .mu_select_list dd .f{padding:1px 8px;}
.sel_mu_select_item .mu_select_list dd .active{background:#555;color:#FFF;font-size:11px;font-weight:bold;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}
.dis_blo{display:block;}
.dis_blo{display:block !important;}
</style>
 <body>
  <script type="text/javascript">
  <!--
  $(function(){
	var list = {
			ALL : Array({id:1,name:'aaa'},{id:2,name:'bbb'})
			,SEE : Array({id:1,name:'aaa'},{id:2,name:'bbb'})
		}
	var me = new MUSELECT();
	me.loadData(list);
	me.insertIn("mu");
	me.popBtnInit();
  //-->
  });
  </script>
 <div id="mu"></div>
 </body>
</html>

分享到:
评论

相关推荐

    TagTextView 每一行添加多个活动标签

    本篇文章将深入讲解如何使用`TagTextView`在每一行中添加多个活动标签,并提供一个示例项目`TagTextViewDemo`来帮助理解。 `TagTextView`通常是一个可定制的TextView,它支持显示多行标签,每个标签都可以设置为可...

    android添加标签与删除标签

    在Android开发中,添加和删除标签是常见的交互功能,尤其在构建用户界面(UI)时。标签可以帮助用户更好地理解和组织信息。在这个“android添加标签与删除标签”的项目中,我们可能会涉及以下关键知识点: 1. **...

    仿小红书添加标签()

    本篇文章将深入探讨如何仿照小红书的模式来实现一个“添加标签”的功能。 首先,我们需要理解标签系统的基本原理。标签通常是用来分类或标记内容的关键词,用户可以通过标签快速找到感兴趣的主题。在技术实现上,...

    Android标签云效果

    2. **绘制标签**:自定义一个`View`,重写`onDraw()`方法,在其中根据每个标签的权重调整字体大小,然后使用`Canvas`绘制标签文本。权重越高,字体越大。 3. **布局管理**:由于标签是动态变化的,需要考虑它们之间...

    点击添加标签

    在EXT JS这个强大的JavaScript框架中,"点击添加标签"是一个常见的功能需求,特别是在构建富客户端应用时。EXT JS提供了一种高效的方式,通过其组件化的设计来实现这样的交互。在这个场景中,`TreePanel` 和 `...

    JS标签页效果

    在网页设计中,JS标签页效果是一种...在提供的压缩包文件"JS标签页效果"中,很可能是包含了一个示例代码,用于演示如何实现上述功能。通过学习和研究这个示例,你可以更深入地理解这个过程,并将其应用到自己的项目中。

    jQuery添加删除标签插件.zip

    "jQuery添加删除标签插件"是基于这个强大的库开发的一个功能插件,专门用于实现标签功能的增强。这个插件旨在帮助开发者在网页应用中创建和管理用户友好的标签系统,使得用户能够方便地添加、删除和检查标签。 在...

    jQuery自定义添加删除标签代码.zip

    在添加标签时,可能有一个按钮或者按下回车键的事件触发函数,该函数获取输入框中的值,并将其转化为新的标签元素插入到页面上。同时,为了防止重复添加,可能还需要对已添加的标签进行检查。 在删除标签的实现中,...

    标签页切换效果

    一个典型的标签页系统包括一个容器,内部包含若干个可切换的“标签页”和对应的“内容区域”。每个标签页都有一个标题,点击时会显示相应内容区域的内容。标签页的设计应保持一致性和易用性,确保用户能直观地理解和...

    JavaScript几何面添加客户端标签专题图

    JavaScript几何面添加客户端标签专题图是一种在Web地图应用中常用的技术,主要用于在地图上为几何图形(如区域、多边形等)附加信息标签。这种技术通常基于GIS(地理信息系统)平台,例如SuperMap iClient 7C,这是...

    网易新闻手机端首页,添加,删除标签,滑动标签动态下标效果,图片循环自动切换,手动左右循环切换UIScrollView图片

    `UICollectionView`是一个高度可定制的视图,可以创建网格布局或者流式布局,适合用来展示数量不定的标签。 2. **滑动标签动态下标效果**: 当标签可以滑动时,动态下标需要跟随标签移动,这需要利用`...

    jQuery自定义标签添加删除代码.zip

    本资源"jQuery自定义标签添加删除代码.zip"提供了一个简单的解决方案,用于在网页中实现自定义标签的动态添加与删除功能,这在诸如博客、论坛或者内容管理系统中非常常见。 在网页开发中,用户交互性是提升用户体验...

    Python给html文件的a标签添加属性

    这将会创建一个新的HTML文件`output_html_file.html`,其中a标签已经添加了指定的属性。在实际应用中,你可能需要根据不同的需求来筛选或定位特定的a标签,例如,通过class或id来查找特定的链接。BeautifulSoup提供...

    Android添加个人标签.zip_android_任意可以添加自己的标签

    通过学习和实践这些知识点,你将能够创建出一个具有高度可定制性且视觉效果独特的标签系统,让用户在你的应用中自由添加和管理他们自己的标签。记得在实践中不断调试和优化,以提供最佳的用户体验。

    PPT标签切换效果动画.pptx

    同时,还可以设置触发方式,如单击鼠标时或在上一个动画结束后自动切换。这样,当观众点击标签时,相关的内容就会以预设的动画形式出现。 另一种方法是利用"自定义动画"功能。在“动画”选项卡中,可以为每段文本或...

    标签动态添加,点击添加到上面,点击上面标签,添加到下面

    为了实现动态添加标签,你可以在需要添加标签的地方调用`FlowLayout`的`addView`方法,传入一个表示标签的`TextView`或者其他自定义视图。这样,新的标签就会被添加到布局中,并根据`FlowLayout`的规则自动排列。 ...

    3d标签云效果

    在提供的“3d标签云效果”压缩包中,可能包含了一个.js文件,这是JavaScript代码,用于处理标签的显示和动画逻辑;同时,可能还包含了.css文件,用于定义标签的样式和3D效果。 实现3D标签云效果的步骤大致如下: 1...

    Android在Image图片上面任意添加标签,并且支持移动

    在这个案例中,我们需要在ImageView上覆盖一个可移动的标签,这就涉及到事件拦截和分发的定制。我们可以重写ViewGroup的`onInterceptTouchEvent()`方法来拦截触摸事件,然后在子View中处理这些事件,实现标签的拖动...

    使用Azure资源策略为资源组中的资源强制添加标签-qi1

    例如,我们可以定义一个策略添加 "Dept" 标签,另一个策略添加 "Location" 标签。这样,我们可以根据需要灵活地管理资源的配置和安全性。 Azure 资源策略强制添加标签是一种非常有用的技术。它可以帮助我们统一管理...

Global site tag (gtag.js) - Google Analytics