该插件的效果为: 
以下为源代码: 欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
(function($){
//擴展:前臺clayer,針對常用項目使用
//$.clayer($(this));
//$.clayer("#id");
//onfocus="$.clayer(this);"
//onmouseover="$.clayer(this,29);"
//onmouseover="$.clayer(this,187,'line-height:24px;text-indent:30px;');"
//参数(初始對象或id,手柄的宽度,手柄的css)
$.clayer=function(_this,_width,_css){
$("#l_y").remove();
$("#c_y").remove();
$("#t_y").remove();
$("#p_y").remove();
if(typeof(_this)=='object'){_this=_this;}else{_this="#"+_this;}if(!_this){return;}
var _O,_H,_I;
try{
_O=$(_this).offset();
_width=(!_width)?(parseInt($(_this).css("width"))+6):parseInt(_width);
_H=parseInt($(_this).css("height"));
}catch(e){}
_I='<div id="c_y"><div class="close"></div><style type="text/css">';
_I+='#c_y{520px;top:'+parseInt(_O.top)+'px;left:'+(parseInt(_O.left)+_width)+'px;background-color:#FEFEEA;border:1px solid #627AAD;padding:1px;position:absolute;display:block;z-index:888;font-size:12px;box-shadow:1px 2px 3px #666;}';
_I+='#c_y .close{border:1px solid #FFF;padding:6px;position:absolute;right:0;cursor:pointer;background:url("img/ico.gif") no-repeat scroll -143px -69px #FFF;}';
_I+='#c_y ul,#c_y li{margin:0;padding:0;list-style:none;}#c_y input{vertical-align:middle;margin-top:0;}';
_I+='#c_y #_h{line-height:23px;text-indent:10px;'+_width+'px;height:'+_H+'px;background-color:#FEFEEA;position:absolute;z-index:889;border-1px;border-color:#627AAD;border-style:solid none solid solid;color:#183451;'+_css+'}';
_I+='#c_y .f{word-wrap:break-word;line-height:20px;color:#555;}';
_I+='#c_y .ml{word-wrap:break-word;float:left;100px;height:auto !important;height:100px;min-height:100px;border-right:1px solid #C4C6C7;}';
_I+='#c_y .ml li{background-color:#F7F3F7;border:1px solid #C4C6C7;border-right:none;color:#989898;margin:3px 0 3px 5px;text-align:center;padding:1px 0;}';
_I+='#c_y .ml li.on{cursor:pointer;background-color:#FFF;border-color:#999;border-left:3px solid #AAAA00;color:#435986;}';
_I+='#c_y .ml li.c{color:#435986;}';
_I+='#c_y .mr{word-wrap:break-word;419px;float:left;line-height:20px;}';
_I+='#c_y .mr .loading{background:url("img/loading.gif") no-repeat scroll 1px 5px transparent;font-size:11px;color:#9EACCB;margin:10px 20px;padding:0 0 0 20px;}';
_I+='#c_y .mr li{padding:1px 0;139px;float:left;}';
_I+='#c_y .mr .b{line-height:23px;}';
_I+='#c_y .mr fieldset{border-1px;border-color:#CCC #FFF #FFF #FFF;border-style:dotted;}';
_I+='#c_y .mr fieldset legend{font-weight:bold;cursor:pointer;color:#496C92;}';
_I+='#c_y .mr fieldset ul{}';
_I+='</style>';
_I+='<div class="f"><ul class="ml"></ul><ul class="mr"><div class="loading">Loading...</div></ul></div><div id="_h"></div></div>';
$("body").prepend(_I);
//手柄內容插入及樣式控制
$("#c_y #_h").html($(_this).html()).css({top:(parseInt(_O.top)-parseInt($("#c_y").css("top"))-1),left:(parseInt(_O.left)-parseInt($("#c_y").css("left"))-1)});
//讀取缓存將左右側項目放入
$.getScript("./bind.js",function(){
_leng=($.browser.msie)?(itmBind.length-1):itmBind.length;
//遍歷一遍Json,取得所有一級分類和詳細項目,arrCid存放pid,arrCna存放pna,arrItm存放所有詳細項目(pid作為數組索引)
var arrCid=new Array(),arrCna=new Array(),arrItm=new Array(),_L='';
for(var i=0;i<_leng;i++){
_pid=itmBind[i].pid;_arrCid=','+arrCid+',';
if(_arrCid.indexOf(","+_pid+",")==-1){
arrCid.push(_pid);arrCna.push(itmBind[i].pna);
}
//判斷是否有選擇過
isServ=$('#chk_serv').val();if(!isServ || !isServ.length){isServ=',';}
if(isServ.indexOf(','+itmBind[i].itm+'-')!=-1){_chk=' checked'}else{_chk=''}
_L+='<fieldset id="f_'+itmBind[i].itm+'"><legend><input type="checkbox" id="'+itmBind[i].itm+'_" value="'+itmBind[i].itm+'" onclick="if(this.checked){$.ToHidEx(\'chk_serv\',\''+itmBind[i].itm+'\',\'add\',\'1\')}else{$.ToHidEx(\'chk_serv\',\''+itmBind[i].itm+'\',\'\',\'\')}"'+_chk+'>'+itmBind[i].itn+'</legend><ul style="display:none;">';
_leng1=($.browser.msie)?(itmBind[i].lst.length-1):itmBind[i].lst.length;
for(var r=0;r<_leng1;r++){
//判斷是否有選擇過
var Arr=new Array();Arr=itmBind[i].lst[r].split("|");isServ=$('#chk_serv').val();
if(isServ.indexOf(','+Arr[0]+'-')!=-1){_chk=' checked';}else{_chk='';}
_L+='<li><input type="checkbox" id="'+Arr[0]+'_" value="'+Arr[0]+'" onclick="if(this.checked){$.ToHidEx(\'chk_serv\',\''+Arr[0]+'\',\'add\',\'1\')}else{$.ToHidEx(\'chk_serv\',\''+Arr[0]+'\',\'\',\'\')}"'+_chk+'>'+Arr[1]+'</li>';
}
_L+='</ul></fieldset>';
if(typeof(arrItm[_pid])!='undefined' && arrItm[_pid]!=''){
arrItm[_pid]=arrItm[_pid]+_L;
}else{
arrItm[_pid]=_L;//.replace('<ul style="display:none;">','<ul style="display:;">');
}
_L='';
}
//循環大分類數組顯示小分類及項目
var _L1=_L2=_L2_='';
for(var i=0;i<arrCid.length;i++){
var _L2_='';
//左側
if(_L1.length<1){_on=' class="on"';}else{_on='';}
_L1+='<li'+_on+' id="c_y_l_'+arrCid[i]+'">'+arrCna[i]+'</li>';
//右側盒子
_L2+='<div id="c_y_l_'+arrCid[i]+'_" class="b" style="display:none;">';
//放入右側詳細
_L2+=arrItm[arrCid[i]];
_L2+='</div>';
}
$("#c_y .ml").html(_L1);
$("#c_y .mr").html(_L2);
$("#c_y .mr div.b").first().css('display','block');
$("#c_y .mr div fieldset ul").first().css('display','block');
itmBind=_leng=_leng1=isServ=Arr=_L1=_L2=arrCid=arrCna=arrItm=null;
//關掉層
$('#c_y .close').click(function(){$("#c_y").remove();return;})
//關閉氣泡提示
$("#c_y").click(function(){})
//滑鼠移到左側Tab則右側對應打開
$("#c_y .ml li").mouseover(function(){
$("#c_y .mr div").each(function(i){$(this).css("display","none");});
$("#c_y .ml li").each(function(i){$(this).removeClass("on");});
$(this).addClass("on");
$("#c_y .mr #"+$(this).attr("id")+"_").css("display","");
$("#c_y .mr #"+$(this).attr("id")+"_ fieldset ul").first().css('display','block');
});
//控制顯示隱藏
$("#c_y .mr fieldset legend").click(function(){
_i=$("#c_y .mr fieldset legend").index($(this));
$("#c_y .mr fieldset ul").css("display","none");
$("#c_y .mr fieldset ul:eq("+_i+")").css("display","");
});
})
}
})(jQuery)
</script>
</head>
<body id="index">
<table border='1' cellspacing='1' cellpadding='2' width='100%'>
<tr><input type='hidden' id='chk_serv'>
<td onmouseover="$.clayer(this,187,'line-height:24px;text-indent:30px;');">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Bind.jsd的代碼為Json格式,如下:
var itmBind=[
{"pid":100,"pna":"食","itm":14,"itn":"酒吧","lst":["14|酒吧","35|飲酒/酒吧"]},
{"pid":100,"pna":"食","itm":29,"itn":"早餐","lst":["2|西餐廳","3|日式餐廳"]},
{"pid":100,"pna":"食","itm":34,"itn":"素食","lst":["34|素食","51|全素","52|奶蛋素"]},
{"pid":101,"pna":"衣","itm":16,"itn":"露營野炊區","lst":["16|露營野炊區","249|露營區"]},
{"pid":101,"pna":"衣","itm":155,"itn":"洗衣機","lst":["154|洗衣房","155|洗衣機"]},
{"pid":106,"pna":"樂","itm":332,"itn":"泛舟","lst":["333|竹筏","334|划船"]},
{"pid":106,"pna":"樂","itm":35,"itn":"飲酒/酒吧","lst":["35|飲酒/酒吧","14|酒吧"]},
];