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

小菜大用

已于 2022-03-11 11:42:30 修改

阅读量113

点赞数

分类专栏： JavaScript 文章标签： JavaScript

于 2012-10-18 11:03:32 首次发布

本文链接：https://blog.csdn.net/jianghao19890829/article/details/84319376

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

请自己下载最新版本的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>