select area
/** * create category widget * * @param target {WAPIObject} default value is body. * @param selected {Array} the options show in left box. * @param data {JSON} the data of category widget. * @param optionName {String} option name which will be submit by post method. * @param space {Int} center space which around add&delete button. * @param width {Int} widget width. * @param height {Int} widget height. * @param boxCss {String} * @param areaCss {String} * @param leftAreaCss {String} * @param rightAreaCss {String} * @param norOptionCss {String} * @param curOptionCss {String} * @param btnCss {String} * @param addBtnCss {String} * @param deleteBtnCss {String} * @param addBtnText {String} * @param deleteBtnText{String} * */ var categoryOptions = function(params){ this.options = { target:wapi("body"), selected:[], data:{}, optionName:"categoryId[]", space:20, width:600, height:360, boxCss:"", areaCss:"height:100%; overflow:auto; border:1px solid #3366FF; border-radius:5px; box-shadow:#8f8f8f 0 0 5px; -moz-border-radius:5px; -moz-box-shadow:#8f8f8f 0 0 5px; -webkit-border-radius:5px; -webkit-box-shadow:#8f8f8f 0 0 5px;", leftAreaCss:"", rightAreaCss:"", norOptionCss:"padding:5px; min-height:15px; background-image:none; background:#FFFFFF; color:#086CAF;", curOptionCss:"padding:5px; min-height:15px; background:url(images/bg_03.png) #086CAF repeat-x left bottom; color:#FFFFFF;", btnCss:"background:url(images/bg_05.png) #dddddd repeat-x left bottom; color:#333; display:block; width:80px; height:25px; line-height:25px; text-align:center; border:1px solid #aaaaaa;", addBtnCss:"top:30px;", deleteBtnCss:"top:60px;", addBtnText:"<b><<</b>", deleteBtnText:"<b>>></b>" }; wapi.extend(this.options, params); this.addOption = []; this.delOption = []; this.init(); } categoryOptions.prototype = { init:function(){ var optionHandler = wapi.bindScope(this, this.optionHandler); var addHandler = wapi.bindScope(this, this.addHandler); var deleteHandler = wapi.bindScope(this, this.deleteHandler); this.box = wapi("<div>").attr("style", this.options.boxCss).css({width:this.options.width, height:this.options.height, position:"relative"}); this.area1 = wapi("<div>").attr({id:"area1", style:this.options.areaCss + this.options.leftAreaCss}).css({position:"absolute"}); this.area2 = wapi("<div>").attr({id:"area2", style:this.options.areaCss + this.options.rightAreaCss}).css({position:"absolute"}); this.addBtn = wapi("<a>").attr("style",this.options.btnCss + this.options.addBtnCss).html(this.options.addBtnText).css({position:"relative", cursor:"pointer"}).click(addHandler); this.deleteBtn = wapi("<a>").attr("style",this.options.btnCss+ this.options.deleteBtnCss).html(this.options.deleteBtnText).css({position:"relative", cursor:"pointer"}).click(deleteHandler); this.options.target.append(this.box.append(this.area1).append(this.area2).append(this.addBtn).append(this.deleteBtn)); var areaWidth = parseFloat(this.options.width)/2 - parseFloat(this.addBtn.css("width"))/2 - parseFloat(this.options.space); this.area1.css("width", areaWidth + "px"); this.area2.css({width:areaWidth + "px", left:parseFloat(this.area1.css("width")) + parseFloat(this.addBtn.css("width")) + this.options.space*2 + "px"}); var btnLeft = parseFloat(this.area1.css("width")) + this.options.space; this.addBtn.css({left: btnLeft + "px"}); this.deleteBtn.css({left: btnLeft + "px"}); wapi.each(this.options.data, optionHandler); }, optionHandler:function(id, content){ var option = wapi("<div>").attr({id:this.options.optionName + id, style:this.options.norOptionCss}).html(content).mouseover(function(){ this.style.cssText = curCss + "cursor:pointer;"; window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); }).mouseout(function(){ this.style.cssText = norCss; }); option[0].data = wapi("<input>").attr({name:this.options.optionName, type:"hidden", value:id}); var selected = false; var curCss = this.options.curOptionCss; var norCss = this.options.norOptionCss; var clickHandler = wapi.bindScope(this, this.clickHandler); wapi.each(this.options.selected, function(i, index){ if(id == index) { selected = true; return false; } }); if(selected) this.area1.append(option.append(option[0].data).click(function(){ clickHandler(this, false, false); }).dblclick(function(){ clickHandler(this, false, true); })); else this.area2.append(option.click(function(){ clickHandler(this, true, false); }).dblclick(function(){ clickHandler(this, true, true); })); }, clickHandler:function(elem, isAdd, isdbl){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var norCss = this.options.norOptionCss; var clickHandler = wapi.bindScope(this, this.clickHandler); if(isdbl){ if(isAdd) this.area1.append(wapi(elem).append(elem.data).attr({"class":"", style:norCss}).mouseout(function(){ this.style.cssText = norCss; }).click(function(){ clickHandler(this, false); }).dblclick(function(){ clickHandler(this, false, true); })); else{ this.area2.append(wapi(elem).attr({"class":"", style:norCss}).mouseout(function(){ this.style.cssText = norCss; }).click(function(){ clickHandler(this, true); }).dblclick(function(){ clickHandler(this, true, true); })); elem.data.remove(); } }else{ if(wapi(elem).attr("class") == "selected_option"){ var _array = []; wapi(elem).attr("class", ""); elem.onmouseout = function(){this.style.cssText = norCss;}; wapi.each((isAdd ? this.addOption : this.delOption), function(i, option){ if(option.id != elem.id) _array.push(option); }); isAdd ? this.addOption = _array : this.delOption = _array; }else{ isAdd ? this.addOption.push(elem) : this.delOption.push(elem); wapi(elem).attr("class", "selected_option"); elem.onmouseout = function(){}; } } }, addHandler:function(){ var area1 = this.area1; var norCss = this.options.norOptionCss; var clickHandler = wapi.bindScope(this, this.clickHandler); if(this.addOption.length > 0) wapi.each(this.addOption, function(i, elem){ area1.append(wapi(elem).append(elem.data).attr({"class":" ", style:norCss}).mouseout(function(){ this.style.cssText = norCss; }).click(function(){ clickHandler(this, false); }).dblclick(function(){ clickHandler(this, false, true); })); }); this.addOption = []; }, deleteHandler:function(){ var area2 = this.area2; var norCss = this.options.norOptionCss; var clickHandler = wapi.bindScope(this, this.clickHandler); if(this.delOption.length > 0) wapi.each(this.delOption, function(i, elem){ area2.append(wapi(elem).attr({"class":" ", style:norCss}).mouseout(function(){ this.style.cssText = norCss; }).click(function(){ clickHandler(this, true); }).dblclick(function(){ clickHandler(this, true, true); })); elem.data.remove(); }); this.delOption = []; } }
-------------------------------------------------------------------------------------------------------------------------------------------------
test page:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> /*basic*/ body, div, dl, dt, dd, ul, li, h1, h2, input, textarea, p, form { margin: 0; padding: 0; } body { font: 14px Arial, serif; color:#333333; height:100%; } body, td, textarea { word-break: break-all; word-wrap: break-word; } ul, li { margin: 0; padding: 0; list-style: none; list-style-type: none; } img { border: none; vertical-align:baseline; } a { text-decoration:none; } a:hover { text-decoration:none; } h1 { font-size: 1.32em; font-family:Arial, sans-serif; font-weight: bold; } h2 { font-size: 1.12em; font-family:Arial, sans-serif; font-weight:bold; } .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clear { zoom:1; } .zoom { overflow: hidden; zoom: 1; } </style> <script src="images/wishfi.js" type="text/javascript" ></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <script> var option = new categoryOptions({ selected:[1,2,3], data:{ 1: "TELECO NETWK,FIXED&MOBILEPHONE", 2: "INTERNET SP/PORTAL ALL", 3: "BANKING/FINANCE", 4: "AIRLINES", 5: "GOVT SVCS(STAT BOARD,GOVT CAMPAIGN)", 6: "CREDIT/CHARGE/DEBIT CARD/TRAVEL", 7: "MOVIE", 8: "INSURANCE", 9: "LOTTERIES/COMPETITIONS", 10: "HOTELS/RESORTS", 11: "PHOTOGRAPHIC", 12: "HAIR CARE PRODUCTS", 13: "FASTFOOD OUTLETS", 14: "EDUCATION(OTHERS)", 15: "BEAUTY&FITNESS SVCS", 16: "TRAVEL AGENCIES/TOURIST COMMIS", 17: "ALL CARS+MOTORING", 18: "SPORTS/GYM EQUIPMENT/SPORTS CTR/CLUB", 19: "PC/NOTEBOOK/TABLET PC/SERVER/N", 20: "SKIN CARE PRODUCTS", 21: "OPTICALS", 22: "FREIGHT/LOGISTICS/COURIER/SHIP", 23: "EVENTS/ CONCERTS/ EXHIBTIONS ALL", 24: "TELEVISION", 25: "INVESTMENT/FUNDS", 26: "CONFECTIONARY ALL", 27: "BEER&STOUT ALL", 28: "SUPER/HYPER/MINI MARKET/FOOD STORES", 29: "PERFUME/COLOGNE", 30: "AUDIO VISUAL EQUIPMENT", } }); </script> </body> </html>