📄 layout.js
字号:
Class("linb.UI.Layout",["linb.UI", "linb.absList"],{
Instance:{
getPanel:function(subId){
return this.get(0).getSubNodeByItemId('PANEL', subId);
},
append:function(target, subId){
var pro=this.get(0);
return arguments.callee.upper.call(this, target, subId||'main');
}
},
Static:{
Templates:{
tagName:'div',
style:'{_style}',
text:"{items}",
$dynamic:{
items:{
ITEM:{
tagName:'div',
className:'{cls1} {itemClass}',
style:'{size};{itemStyle}',
MOVE:{
$order:0,
tagName:'div',
className:'{cls2} ',
style:'{display}'
},
CMD:{
$order:1,
tagName:'div',
style:'{cmdDisplay}',
className:'{cls3} '
},
PANEL:{
tagName:'div',
className:'ui-content',
style:'position:absolute;left:0;top:0;',
text:linb.UI.$childTag
}
}
}
}
},
Appearances:{
KEY:{
position:'absolute',
overflow:'hidden',
left:0,
top:0,
'font-size':linb.browser.ie?0:null,
'line-height':linb.browser.ie?0:null
},
MOVE:{
$order:0,
position:'absolute',
'background-color':'#EBEADB',
'z-index':'10',
'font-size':linb.browser.ie?0:null,
'line-height':linb.browser.ie?0:null
},
'MOVE-mouseover':{
$order:1,
'background-color':'#f8f8f8'
},
CMD:{
position:'absolute',
border:'solid 1px #cdcdcd',
cursor:'pointer',
'z-index':'20',
'font-size':linb.browser.ie?0:null,
'line-height':linb.browser.ie?0:null
},
ITEM:{
position:'absolute',
overflow:'hidden',
'border-width':linb.browser.opr?'0px':null,
'font-size':linb.browser.ie?0:null,
'line-height':linb.browser.ie?0:null
},
PANEL:{
position:'absolute',
overflow:'hidden',
/*for opera, opera defalut set border to 3 ;( */
'border-width':linb.browser.opr?'0px':null,
'font-size':linb.browser.ie?0:null,
'line-height':linb.browser.ie?0:null
},
'ITEM-MAIN':{
left:0,
right:0,
top:0,
bottom:0
},
'ITEM-TOP, ITEM-BOTTOM':{
left:0,
right:0
},
'ITEM-LEFT, ITEM-RIGHT':{
top:0,
bottom:0
},
'MOVE-TOP':{
'border-top':'solid 1px #fff',
'border-bottom':'solid 1px #cdcdcd',
width:'100%',
bottom:0,
height:'4px',
cursor:'n-resize'
},
'MOVE-BOTTOM':{
'border-top':'solid 1px #fff',
'border-bottom':'solid 1px #cdcdcd',
width:'100%',
top:0,
height:'4px',
cursor:'n-resize'
},
'MOVE-LEFT':{
'border-left':'solid 1px #fff',
'border-right':'solid 1px #cdcdcd',
height:'100%',
right:0,
width:'4px',
cursor:'w-resize'
},
'MOVE-RIGHT':{
'border-left':'solid 1px #fff',
'border-right':'solid 1px #cdcdcd',
height:'100%',
left:0,
width:'4px',
cursor:'w-resize'
},
'MOVE-TOP-checked, MOVE-BOTTOM-checked, MOVE-LEFT-checked, MOVE-RIGHT-checked':{
$order:1,
'background-color':'#cdcdcd'
},
'CMD-TOP':{
$order:0,
left:'50%',
'margin-left':'-15px',
bottom:0,
width:'30px',
height:'4px',
background: linb.UI.$bg('icon.gif', ' no-repeat left -52px', true)
},
'CMD-TOP-mouseover, CMD-BOTTOM-mouseover, CMD-LEFT-mouseover, CMD-RIGHT-mouseover':{
$order:1,
'background-color':'#ffff00'
},
'CMD-TOP-mouseover, CMD-BOTTOM-mouseover, CMD-LEFT-mouseover, CMD-RIGHT-mouseover':{
$order:2,
'background-color':'#ffff00'
},
'CMD-BOTTOM':{
$order:0,
left:'50%',
'margin-left':'-15px',
top:0,
width:'30px',
height:'4px',
background: linb.UI.$bg('icon.gif', ' no-repeat left -60px', true)
},
'CMD-LEFT':{
$order:0,
top:'50%',
'margin-top':'-15px',
right:0,
height:'30px',
width:'4px',
background: linb.UI.$bg('icon.gif', ' no-repeat -84px 0px', true)
},
'CMD-RIGHT':{
$order:0,
top:'50%',
'margin-top':'-15px',
left:0,
height:'30px',
width:'4px',
background: linb.UI.$bg('icon.gif', ' no-repeat -92px -0px', true)
},
'MOVE-MAIN':{
$order:5,
display:'none'
},
'CMD-MAIN':{
$order:5,
display:'none'
}
},
Behaviors:{
DropableKeys:['PANEL'],
HoverEffected:{MOVE:'MOVE',CMD:'CMD'},
onSize:function(profile,e){
var o=profile.root;
linb.UI.$tryResize(profile, e.width?o.width():null, e.height?o.height():null);
},
MOVE:{
onMousedown:function(profile, e, src){
var id=src.id,
itemId = profile.getSubId(id),
item = profile.getItemByDom(src);
if(item.hide)return;
var main = profile.getItemByItemId('main'),
o=profile.getSubNode('ITEM', itemId),
m=profile.getSubNodeByItemId('ITEM', 'main'),
cursor=linb([src]).css('cursor'),
t=profile.properties,
h,w,mh,mw,offset1,offset2;
profile.pos=item.pos;
if(t.type=='vertical'){
h = profile._cur = o.height();
mh = m.height();
if(item.pos=='before'){
offset1 = h - item.min;
offset2 = item.max?Math.min(parseInt(item.max)-h, (mh-main.min)):(mh-main.min);
}else{
offset1 = item.max?Math.min(parseInt(item.max)-h, (mh-main.min)):(mh-main.min);
offset2 = h - item.min;
}
linb([src]).startDrag(e,{
dragType:'copy',
targetReposition:false,
verticalOnly:true,
maxTopOffset:offset1,
maxBottomOffset:offset2,
dragCursor:cursor
});
}else{
w = profile._cur = o.width();
mw = m.width();
if(item.pos=='before'){
offset1 = w - item.min;
offset2 = item.max?Math.min(parseInt(item.max)-w, (mw-main.min)):(mw-main.min);
}else{
offset1 = item.max?Math.min(parseInt(item.max)-w, (mw-main.min)):(mw-main.min);
offset2 = w - item.min;
}
linb([src]).startDrag(e,{
dragType:'copy',
targetReposition:false,
horizontalOnly:true,
maxLeftOffset:offset1,
maxRightOffset:offset2,
dragCursor:cursor
});
}
profile._limited=0;
},
onDrag:function(profile, e, src){
var t=profile.properties,
d=linb.DragDrop,
p=linb.DragDrop._profile,
b=0;
if(t.type=='vertical'){
if((p.y<=p.restrictedTop) || (p.y>=p.restrictedBottom))b=true;
}else{
if(p.x<=p.restrictedLeft || p.x>=p.restrictedRight)b=true;
}
if(b){
if(!profile._limited){
profile._bg=p.proxyNode.css('backgroundColor');
p.proxyNode.css('backgroundColor','#ff6600');
profile._limited=true;
}
}else{
if(profile._limited){
p.proxyNode.css('backgroundColor',profile._bg);
profile._limited=0;
}
}
},
onDragstop:function(profile, e, src){
var t=profile.properties,
o=linb([src]).parent(),
r=profile.root,
item = profile.getItemByDom(src);
//add offset and refresh
if(t.type=='vertical'){
//use size to ignore onresize event once
o.height(item.size = profile._cur + (profile.pos=='before'?1:-1)*linb.DragDrop.getProfile().offset.y);
linb.UI.$tryResize(profile,null,r.height());
}else{
o.width(item.size = profile._cur + (profile.pos=='before'?1:-1)*linb.DragDrop.getProfile().offset.x);
//use size to ignore onresize event once
linb.UI.$tryResize(profile,r.width(),null);
}
profile._limited=0;
}
},
CMD:{
onMousedown:function(profile, e, src){
var t=profile.properties,
id=src.id,
self=linb([src]),
itemId = profile.getSubId(id),
item = profile.getItemByDom(src),
r=profile.root,
main = profile.getItemByItemId('main'),
m=profile.getSubNodeByItemId('ITEM', 'main'),
o = profile.getSubNode('ITEM',itemId),
panel = profile.getSubNode('PANEL',itemId),
move = profile.getSubNode('MOVE',itemId);
if(t.type=='vertical'){
// restore resize mode
if(item.hide){
if(item.size <= m.height() - main.min + t._handlerSize){
//restore h
o.height(item.size);
panel.show();
item.hide=false;
//set appearance
if(item.pos=='before')
self.replaceClass(/bottom/g,'top');
else
self.replaceClass(/top/g,'bottom');
//hidden 'move'
if(!item.locked)move.css('cursor','n-resize');
profile.getSubNode('MOVE').tagClass('-checked',false);
}else
linb.message('no enough space!');
// to min and fix mode
}else{
o.height(t._handlerSize);
panel.hide();
item.hide=true;
if(item.pos=='before')
self.replaceClass(/top/g,'bottom');
else
self.replaceClass(/bottom/g,'top');
if(!item.locked)
move.css('cursor','default');
profile.getSubNode('MOVE').tagClass('-checked');
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -