请自己下载最新版本的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`在每一行中添加多个活动标签，并提供一个示例项目`TagTextViewDemo`来帮助理解。 `TagTextView`通常是一个可定制的TextView，它支持显示多行标签，每个标签都可以设置为可...
在Android开发中，添加和删除标签是常见的交互功能，尤其在构建用户界面（UI）时。标签可以帮助用户更好地理解和组织信息。在这个“android添加标签与删除标签”的项目中，我们可能会涉及以下关键知识点： 1. **...
在本文中，我们将深入探讨如何使用jQuery来实现一个动态的标签添加与删除功能。这个功能允许用户通过点击按钮，将选定的标签添加到显示面板上，同时也可以删除已添加到面板上的标签。这个功能在很多现代Web应用中...
本篇文章将深入探讨如何仿照小红书的模式来实现一个“添加标签”的功能。 首先，我们需要理解标签系统的基本原理。标签通常是用来分类或标记内容的关键词，用户可以通过标签快速找到感兴趣的主题。在技术实现上，...
2. **绘制标签**：自定义一个`View`，重写`onDraw()`方法，在其中根据每个标签的权重调整字体大小，然后使用`Canvas`绘制标签文本。权重越高，字体越大。 3. **布局管理**：由于标签是动态变化的，需要考虑它们之间...
这些标签可能以按钮形式呈现，每个按钮都有一个唯一的ID或类名，方便JavaScript操作。 2. **CSS样式**： `css`文件包含插件的样式定义，如标签的颜色、字体、边框等。这些样式将决定标签的视觉效果，使其符合网站...
在网页设计中，JS标签页效果是一种...在提供的压缩包文件"JS标签页效果"中，很可能是包含了一个示例代码，用于演示如何实现上述功能。通过学习和研究这个示例，你可以更深入地理解这个过程，并将其应用到自己的项目中。
"jQuery添加删除标签插件"是基于这个强大的库开发的一个功能插件，专门用于实现标签功能的增强。这个插件旨在帮助开发者在网页应用中创建和管理用户友好的标签系统，使得用户能够方便地添加、删除和检查标签。 在...
通过以上步骤，你就可以创建一个能够动态添加标签的导航栏，用户可以根据需要添加任意数量的标签，且每个标签都是单选的。这个功能对于那些需要随着数据或用户行为改变导航选项的应用来说非常实用。记得在实际开发中...
一个典型的标签页系统包括一个容器，内部包含若干个可切换的“标签页”和对应的“内容区域”。每个标签页都有一个标题，点击时会显示相应内容区域的内容。标签页的设计应保持一致性和易用性，确保用户能直观地理解和...
JavaScript几何面添加客户端标签专题图是一种在Web地图应用中常用的技术，主要用于在地图上为几何图形（如区域、多边形等）附加信息标签。这种技术通常基于GIS（地理信息系统）平台，例如SuperMap iClient 7C，这是...
PDF标签添加工具FreePic2Pdf是一款实用的软件，专门用于为PDF文件添加元数据标签，以便于管理和检索。在PDF文档日益普及的今天，良好的标签系统对于组织和搜索大量PDF文件至关重要。FreePic2Pdf提供了批量处理功能，...
`UICollectionView`是一个高度可定制的视图，可以创建网格布局或者流式布局，适合用来展示数量不定的标签。 2. **滑动标签动态下标效果**： 当标签可以滑动时，动态下标需要跟随标签移动，这需要利用`...
本资源"jQuery自定义标签添加删除代码.zip"提供了一个简单的解决方案，用于在网页中实现自定义标签的动态添加与删除功能，这在诸如博客、论坛或者内容管理系统中非常常见。 在网页开发中，用户交互性是提升用户体验...
通过学习和实践这些知识点，你将能够创建出一个具有高度可定制性且视觉效果独特的标签系统，让用户在你的应用中自由添加和管理他们自己的标签。记得在实践中不断调试和优化，以提供最佳的用户体验。
标题“多标签页自适应页面，可以动态的添加删除”暗示了我们要讨论的核心知识点是关于如何实现一个灵活、自适应且可扩展的多标签页系统。 首先，让我们详细了解一下多标签页的自适应性。自适应设计是现代Web开发中...
本项目“ios-仿微博图片添加标签.zip”提供了一个名为“ZYTagView-master”的源码示例，旨在帮助开发者了解并实现这一功能。下面将详细阐述其主要知识点。 1. 自定义视图（Custom View）： - `ZYTagView` 类是这个...
在提供的“3d标签云效果”压缩包中，可能包含了一个.js文件，这是JavaScript代码，用于处理标签的显示和动画逻辑；同时，可能还包含了.css文件，用于定义标签的样式和3D效果。 实现3D标签云效果的步骤大致如下： 1...
在这个案例中，我们需要在ImageView上覆盖一个可移动的标签，这就涉及到事件拦截和分发的定制。我们可以重写ViewGroup的`onInterceptTouchEvent()`方法来拦截触摸事件，然后在子View中处理这些事件，实现标签的拖动...