Hello,
I've been playing a little bit with DynAPI2, in order to get used to it. I
would like to create a menu with submenus gliding down (expand) from each
main option and up again (collapse). Dan Steinman has a similar widget, but
with just one level of submenus. I would like to be able to add as many
levels as I want.
So far I have created the main menu bar and an experimental submenu bar
(this is just the initial template, not a working widget. I'm a newbie and
have still to learn many things).
I have thought the most convenient way to create submenu items is to define
an "add" function for the main widget object. I've not been able to make the
submenu object visible and I'm feeling quite stupid. Why doen only the main
widget show up? Can you help me out?
In the HTML page I just create the typical
Here is my script so far:
function desplegable(x,y,w,h,titulo) {
this.superClass=DynLayer
this.superClass()
this.id="desplegable"+(desplegable.Count++)
this.items = new Array ()
this.titulo = titulo||''
this.moveTo(x||0,(desplegable.Count*20)||0)
this.setSize(w||160,h||20)
this.fondo = '#FFCC33' //color del widget
this.fondo_over = '#CCFF33' //color del widget
// alert(window.innerWidth) //introducir rutina en porcentaje
// alert(screen.availWidth) //para Explorer, en Netscape 6 funciona!
var l= new EventListener(this)
l.oncreate=function(e) {
var o=e.getTarget()
o.setBgColor(o.fondo)
o.capatitulo = new DynLayer(null,1,1,o.w-2,o.h-2)
o.capatitulo.setHTML(o.titulo)
o.addChild(o.capatitulo)
o.addChild(new DynLayer(null,0,0,1,o.h,'#f0f0f0'))
o.addChild(new DynLayer(null,0,0,o.w,1,'#f0f0f0'))
o.addChild(new DynLayer(null,o.w-1,1,1,o.h-1,'#808080'))
o.addChild(new DynLayer(null,1,o.h-1,o.w-1,1,'#808080'))
o.setVisible(true) //opcional
o.dynevents = new DynLayer(null,0,0,o.w, o.h) // capa de eventos
o.addChild(o.dynevents)
o.dynevents.addEventListener(o.events)
}
this.addEventListener(l)
this.events = new EventListener(this)
this.events.onmouseover = function (e) {
o = e.getTarget()
o.setBgColor(o.fondo_over)
}
this.events.onmouseout = function (e) {
o = e.getTarget()
o.setBgColor(o.fondo)
}
this.events.onmouseup = function (e) {
o = e.getTarget()
o.deslizar(o.h)
}
return this
}
desplegable.Count = 0
desplegable.prototype=new DynLayer()
desplegable.prototype.getSubClass=function() { return desplegable }
desplegable.prototype.add = function (subtitulo, enlace) {
var i = this.items.length
this.items[i] = new subDesplegable(null,0,this.h,this.w,20)
this.items[i].ItemIndex=i
this.items[i].rootmenu=this //objeto convertido en propiedad
this.setHeight(this.h+(this.items.length*20)) //no necesario
this.addChild(this.items[i])
return this.items[i]
}
desplegable.prototype.deslizar = function(y) {
this.slideTo(this.x,this.y+y)
}
//subdesplegables
function subDesplegable(id,x,y,w,h) {
this.DynLayer=DynLayer
this.DynLayer(id,x,y,w,h)
this.setVisible(true)
this.setSize(w,h)
this.moveTo(300,300)
this.fondo = '#FFCC33' //color del widget
this.fondo_over = '#CCFF33' //color del widget
this.titulo = 'Hola'
var l= new EventListener(this)
l.oncreate=function(e) {
var o=e.getTarget()
o.setBgColor(o.fondo)
o.capatitulo = new DynLayer(null,1,1,o.w-2,o.h-2)
o.capatitulo.setHTML(o.titulo)
o.addChild(o.capatitulo)
o.addChild(new DynLayer(null,0,0,1,o.h,'#f0f0f0'))
o.addChild(new DynLayer(null,0,0,o.w,1,'#f0f0f0'))
o.addChild(new DynLayer(null,o.w-1,1,1,o.h-1,'#808080'))
o.addChild(new DynLayer(null,1,o.h-1,o.w-1,1,'#808080'))
o.setVisible(true) //opcional
o.setZIndex(20) //prueba
o.dynevents = new DynLayer(null,0,0,o.w,o.h) // capa de eventos
o.addChild(o.dynevents)
o.dynevents.addEventListener(o.events)
}
this.addEventListener(l)
this.events = new EventListener(this)
this.events.onmouseover = function (e) {
o = e.getTarget()
o.setBgColor(o.fondo_over)
}
this.events.onmouseout = function (e) {
o = e.getTarget()
o.setBgColor(o.fondo)
}
this.events.onmouseup = function (e) {
o = e.getTarget()
o.deslizar(o.h)
}
return this
}
subDesplegable.prototype=new DynLayer()
subDesplegable.prototype.getSubClass=function() { return subDesplegable }
subDesplegable.prototype.deslizar = function(y) {
this.slideTo(this.x,this.y+y)
}
And here is the corresponding HTML bit:
<Script language="Javascript" src="jas/dynapi.js"></script>
<Script language="Javascript">
DynAPI.setLibraryPath('jas/lib/')
DynAPI.include('dynapi.api.*')
DynAPI.include('dynapi.util.thread.js');
DynAPI.include('dynapi.util.pathanim.js');
DynAPI.include('dynapi.propios.desplegable.js')
</script>
<script language="Javascript">
DynAPI.onLoad=function() {
despliega1 = new desplegable (500,100,null,null,'Hola');
subm = despliega1.add('Cosa 1', 'enlace')
DynAPI.document.addChild(despliega1)
}
</script>
</head>
<body>
.......
Thanks for any advice!
Miguel
zambra.com
_______________________________________________
Dynapi-Help mailing list
[EMAIL PROTECTED]
http://lists.sourceforge.net/lists/listinfo/dynapi-help
