/**带有连接线的嵌套div插件**/
;(function($){
var default_options = {
updateContent:null, /**更新div中内容的事件**/
lineColor:'#696969', /**连接线的线条颜色**/
rule2json:null /**生成json数据的事件**/
};
var methods = {
//初始化
init: function(options) {
var settings = $.extend({}, default_options, options || {});
return this.each(function () {
$(this).data("linkdivData", new $.LinkDivList(this, settings));
});
},
//添加一个新div
addDiv:function(data){
this.data("linkdivData").addDiv(data);
return this;
},
//移除选中的div
removeDiv:function(){
this.data("linkdivData").removeDiv();
return this;
},
//组合选中的div
assembleDiv:function(){
this.data("linkdivData").assembleDiv();
return this;
},
//拆分组合的div
splitDiv:function(){
this.data("linkdivData").splitDiv();
return this;
},
//获取数据
getData:function(){
return this.data("linkdivData").getData();
}
};
$.LinkDivList = function($div,options){
$div = $($div);
//获取线条的span标签
function getLineHtml(s){
var span = $('').css(s);
return span;
};
//画线
function drawLine(x0, y0, x1, y1, color) {
var rs = [];
if (y0 == y1) // 画横线
{
if (x0 > x1) {
var t = x0;
x0 = x1;
x1 = t
}
var css = {top:y0,left:x0,width:Math.abs(x1 - x0),background:color,height:2};
rs.push(getLineHtml(css));
} else if (x0 == x1) // 画竖线
{
if (y0 > y1) {
var t = y0;
y0 = y1;
y1 = t
}
var css = {top:y0,left:x0,height:Math.abs(y1 - y0),background:color,width:2};
rs.push(getLineHtml(css));
} else {
var lx = x1 - x0
var ly = y1 - y0
var l = Math.sqrt(lx * lx + ly * ly)
for ( var i = 0; i < l; i += 2) {
var p = i / l;
var px = parseInt(x0 + lx * p);
var py = parseInt(y0 + ly * p);
var css = {top:py,left:px,height:2,background:color,width:2};
rs.push(getLineHtml(css));
}
}
return rs
};
//添加连接线
function addLine(item,count,size){
var top = item.offset().top,
left = item.offset().left,
width = item.width(),
height = item.height(),
lineAry = [],
color = options.lineColor;
//线段①
$.merge(lineAry,drawLine(left+width,top+height/2,left+width+40,top+height/2,color));
if(count+1!=size){
//线段②
$.merge(lineAry,drawLine(left+width+40,top+height/2,left+width+40,top+height,color));
}
if(count!=0){
//线段③
$.merge(lineAry,drawLine(left+width+40,top+height/2,left+width+40,top,color));
}
for(var i =0,c;c=lineAry[i++];){
item.append(c);
}
};
//添加运算类型
function addComputing(item){
var select,
computing = item.attr("computing"),
computingSelect = $("select.computing-select",item);
if(computingSelect.length>0){
select = computingSelect;
}
if(!computing){
computing = "and";
}
var top = item.offset().top,
left = item.offset().left,
width = item.width(),
height = item.height();
if(!select){
select = $('