设置标签云选项

标签云的设置：
1. 点击输入框时，弹出一个div
2. 点击链接，相应的值出现在标签后的input中。
3. 有多选，单选可以设置
4. 标签项可以通过json设置

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>title-jquery-tag</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;}
table{border-collapse:collapse;border-spacing:0;}
li{list-style:none;}
fieldset,img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
q:before,q:after{content:'';}
a:focus,input,textarea{outline-style:none;}
input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}
textarea{resize:none}
address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;}
legend{color:#000;}
abbr,acronym{border:0;font-variant:normal;}
a{color:#0a8cd2;text-decoration:none;}
a:hover{text-decoration:underline;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
.clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}
.none{display:none}
.tag-only{ z-index:2;}
.tag-only .tag-inner{ z-index:3;}
.demo-wrap{ width:700px;margin:20px auto 30px;}
.demo-wrap h1{ font-size:14px;}
.tag-wrap{position:relative;}
.taginput{ width:600px; height:18px; line-height:18px; padding:2px; border:1px solid #ccc;background:#fff;}
.tag-outer{ position:absolute; top:20px; left:42px; width:594px; padding:5px; display:none; border:1px solid #ccc;background:#fff; border-top:none; line-height:23px;}
.tag-outer strong{ color:#000; font-size:14px;}
.tag-outer a{ margin:0 4px; color:#0000ee;cursor:pointer;}
.tag-outer a:hover{ color:#f60;}
.close{ position:absolute; right:5px; top:5px; color:#666;cursor:pointer;}
.info{ color:#f00; padding-left:41px; height:25px; line-height:25px;}
</style>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="demo-wrap">
<h1>多项选择</h1>
<div class="info"></div>
<div class="tag-wrap tag-only">
<label class="tag" for="tagInput"><b>标签：</b></label>
<span id="tag01" class="tag-inner">
<input id="tagInput" class="taginput" type="text" />
<div class="tag-outer">
<p><b>温馨提示：</b>请选择下面的热门标签及使用过的标签，标签将自动排列至表单域。</p>
<span class="close">关闭</span>
</div>
</span>
</div>
</div>
<div class="demo-wrap">
<h1>单项选择</h1>
<div class="info"></div>
<div class="tag-wrap">
<label class="tag" for="tagInput"><b>标签：</b></label>
<span id="tag02" class="tag-inner">
<input id="tagInput2" class="taginput" type="text" />
<div class="tag-outer">
<p><b>温馨提示：</b>请选择下面的热门标签及使用过的标签，标签将自动排列至表单域。</p>
<span class="close">关闭</span>
</div>
</span>
</div>
</div>
<script type="text/javascript">
     (function($){
         $.fn.tagSuggest = function(options){
             var defaults = {
                     tagItems : 'li',
                     subName : '.tag-outer',
                     tagInput : '#tagInput',
                     one : false
                 },
                 opts = $.extend({}, defaults, options),
                 tagList = opts.tagItems,
                 html = '',
                 links = '',
                 subName = $(this).find(opts.subName),
                 tagInput = $(this).find(opts.tagInput),
                 one = opts.one,
                 tagName = '',
                 inputVal = null,
                 selectVal = '',
                 info = $(this).parent().prev(),
                 that = $(this);
             return this.each(function(){
                 for(var k in tagList){ // join items
                     var t = '<p><strong>', v = tagList[k];
                     t += k + '</strong>';
                     v = v.join('</a><a href="javascript:void(0)">');
                     html += t + '<a href="javascript:void(0)">' + v + '</a></p>';
                 }
                 subName.append(html);
                 that.hover(function(){ // show menu
                     tagInput.focus();
                     subName.slideDown();
                 }, function(){
                     subName.hide();
                     info.html('');
                 })
                 subName.find('a').on('click', function(){
                     inputVal = tagInput.val();
                     selectVal = $(this).html();
                     if(inputVal.indexOf(selectVal) != -1){
                         info.html('已选择,请重新选择！');
                         return false;
                     } else {
                         info.html('');
                     }
                     if(one){ // if only change
                         tagName = $(this).html();
                     } else {
                         tagName += tagName != '' ? ',' + $(this).html() : $(this).html();
                     }
                     tagInput.val(tagName);
                 });
                 // close
                 $('.close').on('click', function(){
                     subName.hide();
                 });
             });
         };
     }(jQuery));
     var data = {
         '热门标签:' : ['时光漫步', 'JavaScript', 'jQuery plugin'],
         '您使用过的标签：' : ['许巍', 'Sophie Zelmani', '王菲', '小娟&山谷里的居民']
     };
     // more selected
     $('#tag01').tagSuggest({
         tagItems : data
     });
     // one selected
     $('#tag02').tagSuggest({
         tagItems : data,
         tagInput : '#tagInput2',
         one : true
     });
</script></body>
</html>

posted @ 2013-03-11 21:24 豪情阅读(1804) 评论(0) 编辑收藏举报

刷新页面返回顶部

设置标签云选项

公告