请自己下载最新版本的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>
分享到：
相关推荐
仿微信添加标签效果 我的博客：http://blog.csdn.net/xiaoyuan511
最近项目里面要增加个类似电脑端QQ添加标签的效果,百度了很久发现没有类似的,只好自己写定义控件,关键是LinearLayout自动换行找了好久才找到相关有用的博客.最后效果输入关键词,点击添加可以动态的添加上标签,点击...
在 `Window_1` 的构造方法中，我们创建了一个按钮和一个标签，并将它们添加到窗口中。我们还将按钮的监听器设置为当前对象，即 `this`。 在 `actionPerformed` 方法中，我们检查了按钮的单击事件，并根据标签当前的...
jQuery自定义添加标签 仿新浪 仿大街网的添加自定义标签和换一换 收起展开推荐标签效果
TagTextView 每一行添加多个活动标签 效果可以看 https://blog.csdn.net/jingerlovexiaojie/article/details/80833155
仿小红书添加标签（）
标签无限添加，自动效验重复 插件添加标签 标签无限添加，自动效验重复
jQuery自定义标签添加删除代码是一款简单实用的自定义添加标签跟删除特效。
jQuery动态添加删除编辑标签代码是一款自定义选项卡，添加选项卡，删除选项卡，编辑选项卡内容等。 jQuery动态添加删除编辑标签代码截图
一款实用的jQuery多功能标签添加筛选插件，点击设定好的tag标签进行添加等有多种效果，具体请看演示。
关于maptalks标签跳动效果： 动画效果：maptalks.animation.Animation.animate(styles, options, step)中，options：easing属性设置为upAndDown；repeat属性设置为true； easing其他效果值：in, out, inAndOut, ...
这时候等侯一下，会出现一个运行的figure和一个小面板，在面板上有几项分别是（从上到下从左到右）添加标签、编辑标签、更新标签、当前标签前移、当前标签后移、设置、信息。这是点击第一个，就可以添加标签页了，...
网易新闻手机端首页,添加,删除标签,滑动标签动态下标效果,图片循环自动切换,手动左右循环切换UIScrollView图片
jQuery添加删除标签代码是一款点击按钮将选中标签添加到面板上；再次选中标签，点击按钮可删除面板中的标签。
双击输入框，输入文字后点击添加，输入框上方即可显示输入的文字标签，也可选择常用标签
点击ext中的treepanel，在右边显示不同的tabpanel，就像浏览器点击标签后打开一个新的标签页一样！第一次点击添加一个新的tabpanel，如果tab已经存在则自动跳转到该tab！
jQuery实现输入框回车添加标签代码，可以在输入框输入关键词后回车键入标签，也可以选择预设的标签，选择后的标签会显示在输入框的上方，也可以删除，支持过滤重复标签。
安装了Office Tab后能够轻松实现给Office添加标签页效果，它并不是一个独立的应用程序，而是一款Office的扩展插件，支持Office 2003、2007、2013实现多窗口标签式浏览，还支持自定义标签外观、标签显示位置、标签...
可修改或添加标签，最多可添加5个标签