Beispiel:
Skript:
app.newClass("menuDemoEvents","content",function(param,app,superClass){
this.classType="menuDemoEvents"
this.construct=function(param,$class$)
{
addEvent.call(this,"menu_click",$this$.dump,"global")
addEvent.call(this,"menu_clicked",$this$.dump,"global")
addEvent.call(this,"menu_open",$this$.dump,"global")
addEvent.call(this,"menu_opend",$this$.dump,"global")
addEvent.call(this,"menu_close",$this$.dump,"global")
addEvent.call(this,"menu_closed",$this$.dump,"global")
addEvent.call(this,"menu_check",$this$.dump,"global")
addEvent.call(this,"menu_checked",$this$.dump,"global")
addEvent.call(this,"menu_uncheck",$this$.dump,"global")
addEvent.call(this,"menu_unchecked",$this$.dump,"global")
addEvent.call(this,"menu_enable",$this$.dump,"global")
addEvent.call(this,"menu_enabled",$this$.dump,"global")
addEvent.call(this,"menu_disable",$this$.dump,"global")
addEvent.call(this,"menu_disabled",$this$.dump,"global")
}
this.nonPrototype=function(param,$class$)
{
return {
move:{}
,sizes:{
menu_click:{height:"fit",width:"50%",position:"floatleft"}
,menu_clicked:{height:"fit",width:"50%",position:"floatleft"}
,menu_open:{height:"fit",width:"50%",position:"floatleft"}
,menu_opend:{height:"fit",width:"50%",position:"floatleft"}
,menu_close:{height:"fit",width:"50%",position:"floatleft"}
,menu_closed:{height:"fit",width:"50%",position:"floatleft"}
,menu_check:{height:"fit",width:"50%",position:"floatleft"}
,menu_checked:{height:"fit",width:"50%",position:"floatleft"}
,menu_uncheck:{height:"fit",width:"50%",position:"floatleft"}
,menu_unchecked:{height:"fit",width:"50%",position:"floatleft"}
,menu_disable:{height:"fit",width:"50%",position:"floatleft"}
,menu_disabled:{height:"fit",width:"50%",position:"floatleft"}
,menu_enable:{height:"fit",width:"50%",position:"floatleft"}
,menu_enabled:{height:"fit",width:"50%",position:"floatleft"}
}
}
}
this.timer={}
this.dump=function(eO,$class$)
{
this.elements[eO.$type$].innerHTML="<B>type:</B> "+eO.$type$+" <B>scope:</B> <U>"+eO.$scope$+"</U> <B>object:</B> "+eO.$object$+"<BR>"+this.elements[eO.$type$].innerHTML
if(this.timer[eO.$type$])
{
clearTimeout(this.timer[eO.$type$])
this.timer[eO.$type$]=null;
}
var type=eO.$type$
var _this_=this
this.timer[eO.$type$]=setTimeout(function(){_this_.elements[type].innerHTML=""},2000)
return this.returnValue[eO.$type$]
}
this.returnValue={
menu_click:true
,menu_open:true
,menu_close:true
,menu_check:true
,menu_uncheck:true
,menu_disable:true
,menu_enable:true
}
this.setReturn=function(eO,$class)
{
this.returnValue[eO.target.name]=!this.returnValue[eO.target.name]
}
this.contentOpenHTML=function(param,$class$)
{
return [
"<DIV STYLE='overflow:hidden;clear:both'><B>Event: 'menu_click'</B>"
,{tagOpen:"input",$id$:"setReturn",name:"menu_click",type:"checkbox",click:$this$.setReturn}
,"return false (i.e. preventDefault)</DIV>"
,{tagName:"div",$id$:"menu_click"}
,{tagName:"div",$id$:"menu_clicked"}
,"<DIV STYLE='overflow:hidden;clear:both'><B>Event: 'menu_open'</B>"
,{tagOpen:"input",$id$:"setReturn",name:"menu_open",type:"checkbox",click:$this$.setReturn}
,"return false (i.e. preventDefault)</DIV>"
,{tagName:"div",$id$:"menu_open"}
,{tagName:"div",$id$:"menu_opend"}
,"<DIV STYLE='overflow:hidden;clear:both'><B>Event: 'menu_close'</B>"
,{tagOpen:"input",$id$:"setReturn",name:"menu_close",type:"checkbox",click:$this$.setReturn}
,"return false (i.e. preventDefault)</DIV>"
,{tagName:"div",$id$:"menu_close"}
,{tagName:"div",$id$:"menu_closed"}
,"<DIV STYLE='overflow:hidden;clear:both'><B>Event: 'menu_check'</B>"
,{tagOpen:"input",$id$:"setReturn",name:"menu_check",type:"checkbox",click:$this$.setReturn}
,"return false (i.e. preventDefault)</DIV>"
,{tagName:"div",$id$:"menu_check"}
,{tagName:"div",$id$:"menu_checked"}
,"<DIV STYLE='overflow:hidden;clear:both'><B>Event: 'menu_uncheck'</B>"
,{tagOpen:"input",$id$:"setReturn",name:"menu_uncheck",type:"checkbox",click:$this$.setReturn}
,"return false (i.e. preventDefault)</DIV>"
,{tagName:"div",$id$:"menu_uncheck"}
,{tagName:"div",$id$:"menu_unchecked"}
,"<DIV STYLE='overflow:hidden;clear:both'><B>Event: 'menu_disable'</B>"
,{tagOpen:"input",$id$:"setReturn",name:"menu_disable",type:"checkbox",click:$this$.setReturn}
,"return false (i.e. preventDefault)</DIV>"
,{tagName:"div",$id$:"menu_disable"}
,{tagName:"div",$id$:"menu_disabled"}
,"<DIV STYLE='overflow:hidden;clear:both'><B>Event: 'menu_enable'</B>"
,{tagOpen:"input",$id$:"setReturn",name:"menu_enable",type:"checkbox",click:$this$.setReturn}
,"return false (i.e. preventDefault)</DIV>"
,{tagName:"div",$id$:"menu_enable"}
,{tagName:"div",$id$:"menu_enabled"}
]
}
})
app.newClass("[menuDemo.disable]","content",function(param,app,superClass){
this.classType="[menuDemo.disable]";
this.construct=function(param,$class$)
{
addEvent.call(this,"menu_click",$this$.toggleDisabling)
}
this.toggleDisabling=function(eO,$class$)
{
if(eO.shiftKey)
{
if(this.isDisabled)
{
this.states.enable.call(this)
}
else
{
this.states.disable.call(this)
}
return false
}
}
})
app.newClass("[menuDemo.checkLable]","menu",function(param,app,superClass){
this.classType="[menuDemo.checkLable]"
this.checkable=true
this.lable="Check Menu"
this.getLableAdd=function()
{
return ((this.checked)?" checked":" unchecked")+"<BR><SPAN STLE='font-size:smaller'>"
+((this.closeCheck)?"close ":"don't close ")+"on check</SPAN>";
}
this.getLable=function()
{
return [this.lable,$this$.getLableAdd.call(this)]
}
this.construct=function(param,$class$)
{
addEvent.call(this,"menu_checked",$this$.lableCheck)
addEvent.call(this,"menu_unchecked",$this$.lableUnCheck)
}
this.lableCheck=function(param,$class$)
{
this.menu.setLable.call(this,$this$.getLable.call(this))
}
this.lableUnCheck=function(param,$class$)
{
this.menu.setLable.call(this,$this$.getLable.call(this))
}
})
app.newClass("menuDemo","movedock",function(param,app,superClass){this.classType="menuDemo"})
var o=app.newObject("bar.menuDemo",{lable:"menuDemo",size:{position:"absolute",height:"auto",width:"auto",top:"calc(parentObjectTop+25%)",left:"calc(parentObjectLeft+25%)"}})
o.addLastChild("menu",{lable:"Simple Menu (named)",name:"simple_menu",parts:{content:[
{type:"menu",param:{iconLeftClass:"chrome",name:"chrome"}}
,{type:"menu",param:{iconLeftClass:"safari",name:"safari"}}
,{type:"menu",param:{iconLeftClass:"firefox",name:"firefox"}}
,{type:"menu",param:{iconLeftClass:"opera",name:"opera"}}
,{type:"menu",param:{iconLeftClass:"ie",name:"ie"}}
,{type:"[menu.delimiter]"}
,{type:"menu",param:{parts:{content:[
{type:"menu",param:{parts:{content:[
{type:"menu",param:{name:"submenu_1_1"}}
,{type:"menu",param:{name:"submenu_1_2"}}
,{type:"menu",param:{name:"submenu_1_3"}}
,{type:"menu",param:{name:"submenu_1_4"}}
]},name:"submenus_1"}}
,{type:"menu",param:{parts:{content:[
{type:"menu",param:{name:"submenu_2_1"}}
,{type:"menu",param:{name:"submenu_2_2"}}
,{type:"menu",param:{name:"submenu_2_3"}}
,{type:"menu",param:{name:"submenu_2_4"}}
]},name:"submenus_2"}}
,{type:"menu",param:{parts:{content:[
{type:"menu",param:{name:"submenu_3_1"}}
,{type:"menu",param:{name:"submenu_3_2"}}
,{type:"menu",param:{name:"submenu_3_3"}}
,{type:"menu",param:{name:"submenu_3_4"}}
]},name:"submenus_3"}}
,{type:"menu",param:{parts:{content:[
{type:"menu",param:{name:"submenu_4_1"}}
,{type:"menu",param:{name:"submenu_4_2"}}
,{type:"menu",param:{name:"submenu_4_3"}}
,{type:"menu",param:{name:"submenu_4_4"}}
]},name:"submenus_4"}}
]},name:"submenus"}}
,{type:"menu",param:{name:"menu_1"}}
,{type:"menu",param:{name:"menu_2"}}
,{type:"menu",param:{name:"menu_3"}}
]}})
o.addLastChild("menu",{lable:"Checked Menu",parts:{content:[
{type:"[menuDemo.checkLable]",param:{checked:true}}
,{type:"[menuDemo.checkLable]",param:{checked:false}}
,{type:"[menu.delimiter]"}
,{type:"[menuDemo.checkLable]",param:{checked:true,closeCheck:false}}
,{type:"[menuDemo.checkLable]",param:{checked:false,closeCheck:false}}
,{type:"[menu.delimiter]"}
,{type:"[menuDemo.checkLable]",param:{checked:false,parts:{content:[
{type:"[menuDemo.checkLable]",param:{checked:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"chrome"}}]}}}
,{type:"[menuDemo.checkLable]",param:{checked:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"safari"}}]}}}
,{type:"[menuDemo.checkLable]",param:{checked:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"firefox"}}]}}}
,{type:"[menuDemo.checkLable]",param:{checked:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"opera"}}]}}}
,{type:"[menuDemo.checkLable]",param:{checked:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"ie"}}]}}}
]}}}
,{type:"[menuDemo.checkLable]",param:{checked:true,closeCheck:false,parts:{content:[
{type:"[menuDemo.checkLable]",param:{checked:false,closeCheck:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"chrome"}}]}}}
,{type:"[menuDemo.checkLable]",param:{checked:false,closeCheck:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"safari"}}]}}}
,{type:"[menuDemo.checkLable]",param:{checked:false,closeCheck:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"firefox"}}]}}}
,{type:"[menuDemo.checkLable]",param:{checked:false,closeCheck:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"opera"}}]}}}
,{type:"[menuDemo.checkLable]",param:{checked:false,closeCheck:false
,parts:{menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"ie"}}]}}}
]}}}
,{type:"[menu.delimiter]"}
,{type:"[menuDemo.checkLable]"
,param:{checked:true,iconLeftClass:"myunchecked",checkedIconClass:"mychecked",lable:"Custom Check"}}
,{type:"[menuDemo.checkLable]"
,param:{checked:false,iconLeftClass:"myunchecked",checkedIconClass:"mychecked",lable:"Custom Check"}}
,{type:"[menu.delimiter]"}
,{type:"[menuDemo.checkLable]"
,param:{checked:true,closeCheck:false
,iconLeftClass:"myunchecked",checkedIconClass:"mychecked",lable:"Custom Check"}}
,{type:"[menuDemo.checkLable]"
,param:{checked:false,closeCheck:false
,iconLeftClass:"myunchecked",checkedIconClass:"mychecked",lable:"Custom Check"}}
]}})
o.addLastChild("menu",{lable:"Disabled (shift-click to enable)",parts:{content:[
{type:"menu[menuDemo.disable]",param:{disabling:{disabled:true},iconLeftClass:"chrome"}}
,{type:"menu[menuDemo.disable]",param:{disabling:{disabled:true},iconLeftClass:"safari"}}
,{type:"menu[menuDemo.disable]",param:{disabling:{disabled:true},iconLeftClass:"firefox"}}
,{type:"menu[menuDemo.disable]",param:{disabling:{disabled:true},iconLeftClass:"opera"}}
,{type:"menu[menuDemo.disable]",param:{disabling:{disabled:true},iconLeftClass:"ie"}}
,{type:"[menu.delimiter]"}
,{type:"menu[menuDemo.disable]",param:{disabling:{disabled:true},parts:{content:[
{type:"menu[menuDemo.disable]",param:{parts:{content:[
{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
]}}}
,{type:"menu[menuDemo.disable]",param:{parts:{content:[
{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
]}}}
,{type:"menu[menuDemo.disable]",param:{parts:{content:[
{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
]}}}
,{type:"menu[menuDemo.disable]",param:{parts:{content:[
{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
,{type:"menu[menuDemo.disable]"}
]}}}
]}}}
,{type:"[menuDemo.checkLable][menuDemo.disable]"
,param:{disabling:{disabled:true},parts:{
menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"chrome"}}
]}}}
,{type:"[menuDemo.checkLable][menuDemo.disable]"
,param:{disabling:{disabled:true},parts:{
menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"safari"}}
]}}}
,{type:"[menuDemo.checkLable][menuDemo.disable]"
,param:{disabling:{disabled:true},parts:{
menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"firefox"}}
]}}}
,{type:"[menuDemo.checkLable][menuDemo.disable]"
,param:{closeCheck:false,disabling:{disabled:true},parts:{
menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"opera"}}
]}}}
,{type:"[menuDemo.checkLable][menuDemo.disable]"
,param:{closeCheck:false,disabling:{disabled:true},parts:{
menuiconsleft:[{type:"[menu.icon]",param:{iconClass:"ie"}}
]}}}
]}})
app.newObject("menuDemoEvents")
CSS:
.app-bar-menuDemo.app-selected
{
background-color:#99bbee
}
.app-bar-menuDemo.app-dockedOut
{
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.app-menu_icon.app-chrome,.app-menu_iconleft.app-chrome,.app-menuiconleft.app-chrome
{
background-image:url(gfx/chrome_16.png);
}
.app-menu_icon.app-safari,.app-menu_iconleft.app-safari,.app-menuiconleft.app-safari
{
background-image:url(gfx/safari_16.png);
}
.app-menu_icon.app-firefox,.app-menu_iconleft.app-firefox,.app-menuiconleft.app-firefox
{
background-image:url(gfx/firefox_16.png);
}
.app-menu_icon.app-opera,.app-menu_iconleft.app-opera,.app-menuiconleft.app-opera
{
background-image:url(gfx/opera_16.png);
}
.app-menu_icon.app-ie,.app-menu_iconleft.app-ie,.app-menuiconleft.app-ie
{
background-image:url(gfx/ie_16.png);
}
.app-disabled .app-menu_icon.app-chrome,.app-disabled .app-menu_iconleft.app-chrome,.app-disabled .app-menuiconleft.app-chrome
{
background-image:url(gfx/chrome_disabled_16.png);
}
.app-disabled .app-menu_icon.app-safari,.app-disabled .app-menu_iconleft.app-safari,.app-disabled .app-menuiconleft.app-safari
{
background-image:url(gfx/safari_disabled_16.png) !important;
}
.app-disabled .app-menu_icon.app-firefox,.app-disabled .app-menu_iconleft.app-firefox,.app-disabled .app-menuiconleft.app-firefox
{
background-image:url(gfx/firefox_disabled_16.png) !important;
}
.app-disabled .app-menu_icon.app-opera,.app-disabled .app-menu_iconleft.app-opera,.app-disabled .app-menuiconleft.app-opera
{
background-image:url(gfx/opera_disabled_16.png) !important;
}
.app-disabled .app-menu_icon.app-ie,.app-disabled .app-menu_iconleft.app-ie,.app-disabled .app-menuiconleft.app-ie
{
background-image:url(gfx/ie_disabled_16.png) !important;
}
.app-menuiconleft.app-mychecked
{
background-image:url(gfx/disk_16.png) !important;
}
.app-menuiconleft.app-myunchecked
{
background-image:url(gfx/circle_16.png);
}
.app-disabled .app-menuiconleft.app-myunchecked
{
background-image:url(gfx/circle_disabled_16.png) !important;
}
.app-menu_click,.app-menu_clicked,.app-menu_open,.app-menu_opend,.app-menu_close,.app-menu_closed,.app-menu_check,.app-menu_checked,.app-menu_uncheck,.app-menu_unchecked,.app-menu_disable,.app-menu_disabled,.app-menu_enable,.app-menu_enabled
{
border:1px solid #cccccc;
overflow:auto;
}