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>
浙公网安备 33010602011771号