User:Zocky
foo['events']=[];
window.fooEventsRegister = function(eventset)
{
for (var j=$(eventset).firstChild;j=j.nextSibling;j)
{
if (j.tagName=='FOO-EVENTS')
{
x$doforeach
(
function (i)
{
$attr(j,'click') && attr$ (i,'onclick',$attr(j,'click'));
$attr(j,'mouseover') && attr$(i,'onmouseover',$attr(j,'mouseover'));
$attr(j,'mouseout') && attr$(i,'onmouseout' ,$attr(j,'mouseout'));
$attr(j,'mousemove') && attr$(i,'onmousemove',$attr(j,'mousemove'));
$attr(j,'mouseup') && attr$(i,'onmouseup' ,$attr(j,'mouseup'));
$attr(j,'mousedown') && attr$(i,'onmousedown',$attr(j,'mousedown'));
},
$attr(j,'targetpath') || '.',
$attr(j,'targetref')
)
}
}
};
window.fooEventsUnregister = function(eventset)
{
for (var j=$(eventset).firstChild;j=j.nextSibling;j)
{
if (j.tagName=='FOO-EVENTS')
{
x$doforeach
(
function (i)
{
$attr(j,'click') && attr$(i,'onclick' ,'');
$attr(j,'mouseover') && attr$(i,'onmouseover','');
$attr(j,'mouseout') && attr$(i,'onmouseout','');
$attr(j,'mousemove') && attr$(i,'onmousemove','');
$attr(j,'mouseup') && attr$(i,'onmouseup' ,'');
$attr(j,'mousedown') && attr$(i,'onmousedown','');
},
$attr(j,'targetpath') || '.',
$attr(j,'targetref')
)
}
}
};
x$doforeach
(
function (i)
{
foo.events[i.id]=i;
if ($attr(i,'register')=="true") fooEventsRegister(i);
},
"//foo-eventset"
);
<foo-eventset id="slidernormal" register="true">
<foo-events targetpath="//*[contains(@class,'foo-slider')]"
mousedown="
try
{
var t=event.currentTarget;
var el=$($attr(t,'control'));
document.fooSlider=el;
document.fooSliderX=event.clientX;
document.fooSliderY=event.clientY;
el.fooHeight=parseInt(el.style.height) || el.clientHeight;
el.fooWidth=parseInt(el.style.width) || el.clientWidth;
el.fooType=$attr(t,'type') || 'horizontal';
fooEventsRegister('sliderdrag');
return false;
}
catch (e){alert(e).message}
"/>
</foo-eventset>
<foo-eventset id="sliderdrag">
<foo-events targetref="content"
mousemove="
var x = event.clientX;
var y = event.clientY;
el=document.fooSlider;
switch (el.fooType)
{
case 'left':
el.style.width = (el.fooWidth + x - document.fooSliderX)+'px';
break;
case 'right':
el.style.width = (el.fooWidth - x + document.fooSliderX)+'px';
break;
case 'bottom':
el.style.height = (el.fooHeight - y + document.fooSliderY)+'px';
break;
case 'top':
default:
el.style.height = (el.fooHeight + y - document.fooSliderY)+'px';
}
"
mouseup="
el=document.fooSlider;
switch (el.fooType)
{
case 'right':
case 'left':
el.style.width = el.clientWidth + 'px';
break;
case 'top':
case 'bottom':
default:
el.style.height = el.clientHeight + 'px';
}
document.fooSlider=null;
fooEventsUnregister('sliderdrag');
"
/>
</foo-eventset>
<style>
.foo-slider[type=bottom],
.foo-slider[type=top]
{
border:solid 2px #ddd;
height:6px;
background:#eee;
margin:2px;
cursor:s-resize;
overflow:hidden;
padding:0;
}
.foo-slider[type=left],
.foo-slider[type=right]
{
border:solid 2px #ddd;
width:3px;
max-width:3px;
background:#eee;
margin:2px;
cursor:e-resize;
height:100px;
overflow:hidden;
padding:0;
}
</style>
<table id="work_table" width="100%" height="400px"> <tr><td class="foo-pane" id="work_left" width="100px">aa</td><td class="foo-slider" control="work_left" type="left"></td><td class="foo-pane" id ="work"> <table id="help_table" width="100%" height="100%"> <tr><td class="foo-pane" id="help_top" height="100px">bb</td></tr>
<tr><td class="foo-slider" control="help_top" type="top"></td></tr><tr><td class="foo-pane" id ="help"> cc</td></tr></table></td></tr></table>
