|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>XP, win95 and custom Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body, table {
font-family: Tahoma, Verdana, Arial;
font-size: 9pt;
text-decoration: none;
}
-->
</style>
<!-- doiMenuDOM.js -->
<script type="text/javascript">
/**
* Bismillaahirrohmaanirrohiim
* Dhtml MenuBar DOM
*
* @access public
* @version 1.5
* @author Donna Iwan Setiawan
* @email pagi@donnaiwan.com
* @homepage http://www.donnaiwan.com
* @package doiMenu
*
* History
* -------
* v.1.5
* - tested on
* - IE 6
* - mozilla 1.4 on window
* - mozilla 1.2.1 on linux
* - konqueror 3.1-12 Red Hat
* known problem:
* - image icon
* main menu shadow has been disabled
* - opera 7.21 on linux
* known problem:
* - expand icon symbol
* - minor bug fix
* - automatically generate unique ID
* - correct parameter naming convention
* - add new parameters
* - code optimizing
* - ability of creating more than 1 menu in one page
* - status on status bar
* - and many more..
* v.1.4
* - first public release
*
* Notes
* If you have trouble building menu, please refer to demo files first.
* If you find this code useful or if you have any comment please let me know
* If you have time, please visit http://www.limabit.com. Just a click away :)
*
* This note must remain intact
*/
var _browser = new TBrowser();
var _arRegisterMenu = new Array();
var _arRegisterMenuIndex = -1;
var _arTriggerMenu = new Array();
var _arRegisterPopID = new Array(); //array menyimpan id popup menu yang muncul
var _arRegisterPopIndex = new Array(); //index terakhir dari id popup menu yang te-register di atas
/*
menyimpan state item yang membuka pop up menu
*/
var _arRegisterTriggerPopID = new Array();
var _arRegisterTriggerPopIndex = new Array();
/*
untuk menyimpan state click pada main menu
false berarti harus diclick dulu baru muncul pop up
true berarti hanya dgn mouse over, muncul pop up
*/
var _arMMClick = new Array();
function Initialize()
{
var byk = _arRegisterMenuIndex;
for(var i=0;i<=byk;i++)
_arRegisterMenu[i].Init();
for(var i=0;i<=byk;i++)
_arRegisterMenu[i].Init();
}
//browser constructor
function TBrowser()
{
this._name ='';
this._version = '';
this._os ='';
}
//start:function browser checking
// original browser detection source code go to http://www.xs4all.nl/~ppk/js/detect.html
var detect = navigator.userAgent.toLowerCase();
var total,thestring;
if (checkIt('konqueror'))
{
_browser._name = "Konqueror";
_browser._os = "Linux";
}
else if (checkIt('safari')) _browser._name = "Safari";
else if (checkIt('omniweb')) _browser._name = "OmniWeb";
else if (checkIt('opera')) _browser._name = "Opera";
else if (checkIt('webtv')) _browser._name = "WebTV";
else if (checkIt('icab')) _browser._name = "iCab";
else if (checkIt('msie')) _browser._name = "IE";
else if (!checkIt('compatible'))
{
_browser._name = "Netscape";
_browser._version = detect.charAt(8);
}
else _browser._name = "none";
if (_browser._version == '') _browser._version = detect.charAt(place + thestring.length);
if (_browser._os == '')
{
if (checkIt('linux')) _browser._os = "Linux";
else if (checkIt('x11')) _browser._os = "Unix";
else if (checkIt('mac')) _browser._os = "Mac";
else if (checkIt('win')) _browser._os = "Windows";
else _browser._os = "none";
}
function checkIt(string)
{
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}
//end:function browser checking
//Main Menu Constructor
function TMainMenu(name,direction)
{
_arRegisterMenuIndex++;
_arRegisterMenu[_arRegisterMenuIndex] = this;
_arRegisterPopID[_arRegisterMenuIndex] = new Array();
_arRegisterPopIndex[_arRegisterMenuIndex] = -1;
_arRegisterTriggerPopID[_arRegisterMenuIndex] = new Array();
_arRegisterTriggerPopIndex[_arRegisterMenuIndex] = -1;
_arMMClick[_arRegisterMenuIndex] = false;
this._uniqueID = 0; //don't ever ever overwrite this!!!!
//this._lastPop;
this._name = name; //harus sama dengan nama variable
this._id = '_'+ name+'ID';
this._index = _arRegisterMenuIndex; //agar nama class unik
this._correction = new TCorrection();
this._parent = null; //di set pada saat SetParent() method
this._width ='auto';
this._direction = direction; //direction = 'horizontal' atau 'vertical'
this._position= 'absolute';
this._top = 0;
this._left = 0;
this._cellSpacing =0;
this._itemHeight = 'auto'; //dengan satuan bisa 'auto' atau ''
this._itemWidth = 'auto'; //dengan satuan bisa 'auto' atau ''
//this._textAlign = 'center';
this._background = new TBackground();
this._background._color = 'buttonface';
this._pop = new TPopParameter();
this._pop._mmName = this._name;
this._pop._index = this._index;
this._shadow = new TShadow();
this._font = new TFont();
this._font._family = 'tahoma,verdana,sans-serif,arial';
this._font._size = '8pt';
this._itemIndex = -1;
this._items = new Array();
//this._itemTextColor = 'black';
this._itemText = new TText();
this._itemText._color = 'black';
this._itemText._align = 'center';
//this._itemBackColor = 'transparent';
this._itemBack = new TBackground();
//this._itemTextColorHL = 'white';
this._itemTextHL = new TText();
this._itemTextHL._color = 'white';
this._itemTextHL._align = 'center';
//this._itemBackColorHL = '#B6BDD2';
this._itemBackHL = new TBackground();
this._itemBackHL._color ='#B6BDD2';
this._border = new TBorder();
this._itemBorder = new TBorder(); //bug: harus diisi jangan none atau 0px
this._itemBorderHL = new TBorder();
this._itemBorderHL._top ='1px navy solid';
this._itemBorderHL._right ='1px navy solid';
this._itemBorderHL._bottom ='1px navy solid';
this._itemBorderHL._left ='1px navy solid';
//this._itemTextColorClick = 'white';
this._itemTextClick = new TText();
this._itemTextClick._color = 'white';
this._itemTextClick._align = 'center';
//this._itemBackColorClick = '#B6BDD2';
this._itemBackClick = new TBackground();
this._itemBackClick._color = '#B6BDD2';
this._itemBorderClick = new TBorder();
this._itemBorderClick._top ='1px navy solid';
this._itemBorderClick._right ='1px navy solid';
this._itemBorderClick._bottom ='1px navy solid';
this._itemBorderClick._left ='1px navy solid';
//methods
this.Add = AddItem;
this.Build = BuildMenu;
this.BuildStyle = BuildStyle;
this.Draw = DrawMenu;
this.Init = InitMenu;
this.SetParent = SetParent;
this.SetWidth = SetWidth;
this.SetBorder = SetBorder;
this.SetBorderTop=SetBorderTop;
this.SetBorderRight=SetBorderRight;
this.SetBorderBottom=SetBorderBottom;
this.SetBorderLeft=SetBorderLeft;
this.SetItemDimension = SetItemDimension;
this.SetItemBorder=SetItemBorder;
this.SetItemBorderTop=SetItemBorderTop;
this.SetItemBorderRight=SetItemBorderRight;
this.SetItemBorderBottom=SetItemBorderBottom;
this.SetItemBorderLeft=SetItemBorderLeft;
this.SetItemBorderHL=SetItemBorderHL;
this.SetItemBorderTopHL=SetItemBorderTopHL;
this.SetItemBorderRightHL=SetItemBorderRightHL;
this.SetItemBorderBottomHL=SetItemBorderBottomHL;
this.SetItemBorderLeftHL=SetItemBorderLeftHL;
this.SetItemBorderClick=SetItemBorderClick;
this.SetItemBorderTopClick=SetItemBorderTopClick;
this.SetItemBorderRightClick=SetItemBorderRightClick;
this.SetItemBorderBottomClick=SetItemBorderBottomClick;
this.SetItemBorderLeftClick=SetItemBorderLeftClick;
this.SetShadow=SetShadow;
this.SetFont=SetFont;
this.SetBackground=SetBackground;
this.SetPosition=SetPosition;
this.SetCorrection=SetCorrection;
this.SetCellSpacing=SetCellSpacing;
this.SetItemText=SetItemText;
this.SetItemTextHL=SetItemTextHL;
this.SetItemTextClick=SetItemTextClick;
this.SetItemBackground=SetItemBackground;
this.SetItemBackgroundHL=SetItemBackgroundHL;
this.SetItemBackgroundClick=SetItemBackgroundClick;
}
//Pop Menu Constructor
function TPopMenu(label,icon,clickType,clickParam,status)
{
//status belum kepake
//rencana buat status di statusbar
this._id = '';
this._parent = null; //di set pada saat SetParent() method. mengacu pada TMainMenu object
this._parentPop = null;
this._label = label;
this._top = 0;
this._left = 0;
this._status = status;
this._tmpIcon = icon;
this._icon = "";
this._itemIndex = -1;
this._items = new Array();
switch(clickType)
{
case 'function':
this._eClick = clickParam;//' onclick="'+clickParam+'"';
break;
case 'f':
this._eClick = clickParam;//' onclick="'+clickParam+'"';
break;
case 'address':
this._eClick = "_openURL('"+clickParam+"')";
break;
case 'a':
this._eClick = "_openURL('"+clickParam+"')";
break;
default:
this._eClick = '';
}
this.Add = AddItem;
this.Draw = DrawPopMenu;
this.Init = InitPopMenu;
this.SetParent = SetParent;
}
//new: Parameter buat Pop Menu
function TPopParameter()
{
this._index = -1; //dioverwrite dgn TMainMenu._index
this._mmName = ''; //dioverwrite dgn TMainMenu._name
this._padding = '1px 1px 1px 1px';
this._separator = new TSeparator();
this._expandIcon = new TExpandIcon();
this._correction = new TCorrection();
this._font = new TFont();
this._font._family = 'tahoma,verdana,sans-serif,arial';
this._font._size = '8pt';
this._itemWidth =200; //in pixel
this._itemHeight = 'auto';
this._itemBorder = new TBorder();
this._itemBorder._top = '0px none solid';
this._itemBorder._right = '0px none solid';
this._itemBorder._bottom = '0px none solid';
this._itemBorder._left = '0px none solid';
this._itemPadding = '1px 1px 1px 1px' ;
//this._itemTextColor = 'black';
this._itemText = new TText();
//this._itemBackColor = 'transparent';
this._itemBack = new TBackground();
this._itemBorderHL = new TBorder();
this._itemBorderHL._top = '1px navy solid';
this._itemBorderHL._right = '1px navy solid';
this._itemBorderHL._bottom = '1px navy solid';
this._itemBorderHL._left = '1px navy solid';
this._itemPaddingHL = '0px 0px 0px 0px';
//this._itemTextColorHL = 'white';
this._itemTextHL = new TText();
this._itemTextHL._color = 'white';
//this._itemBackColorHL = '#B6BDD2';
this._itemBackHL = new TBackground();
this._itemBackHL._color = '#B6BDD2';
this._background = new TBackground();
this._background._color = 'whitesmoke';
//this._background._image = 'xp.gif'; //with no url()
//this._background._repeat = 'repeat-y';
this._border = new TBorder();
this._border._top = '1px black solid';
this._border._right = '1px black solid';
this._border._bottom = '1px black solid';
this._border._left = '1px black solid';
this._shadow = new TShadow();
this._timeOut = 2000; //in milliseconds
this.SetBorder = SetBorder;
this.SetPadding = SetPadding;
this.SetPaddings = SetPaddings;
this.SetBorderTop=SetBorderTop;
this.SetBorderRight=SetBorderRight;
this.SetBorderBottom=SetBorderBottom;
this.SetBorderLeft=SetBorderLeft;
this.SetItemDimension = SetItemDimension;
this.SetItemBorder=SetItemBorder;
this.SetItemPadding=SetItemPadding;
this.SetItemPaddingHL=SetItemPaddingHL;
this.SetItemPaddings=SetItemPaddings;
this.SetItemPaddingsHL=SetItemPaddingsHL;
this.SetItemBorderTop=SetItemBorderTop;
this.SetItemBorderRight=SetItemBorderRight;
this.SetItemBorderBottom=SetItemBorderBottom;
this.SetItemBorderLeft=SetItemBorderLeft;
this.SetItemBorderHL=SetItemBorderHL;
this.SetItemBorderTopHL=SetItemBorderTopHL;
this.SetItemBorderRightHL=SetItemBorderRightHL;
this.SetItemBorderBottomHL=SetItemBorderBottomHL;
this.SetItemBorderLeftHL=SetItemBorderLeftHL;
this.SetShadow=SetShadow;
this.SetFont=SetFont;
this.SetBackground=SetBackground;
this.SetCorrection=SetCorrection;
this.SetExpandIcon=SetExpandIcon;
this.SetSeparator=SetSeparator;
this.SetDelay=SetDelay;
this.SetItemText=SetItemText;
this.SetItemTextHL=SetItemTextHL;
this.SetItemBackground=SetItemBackground;
this.SetItemBackgroundHL=SetItemBackgroundHL;
}
//Koreksi jarak antara main menu dgn pop menu atau antar(pop menu)
function TCorrection()
{
this._top = 0;
this._left = 0;
}
function TText()
{
this._color ='black';
this._align = 'left';
this._decoration = 'none';
this._whiteSpace = 'normal';
this._weight = 'normal';
}
function TShadow()
{
this._create = false;
this._color = 'black';
this._distance = 3; //in px
}
//Separator constructor
function TSeparator()
{
this._align = 'center' //available value: 'left','center','right'
this._width = 200; //in pixel
this._margin = "0px 0px 0px 0px"; //top right bottom left margin --> dioverwrite
this._border = new TBorder(); //_left and _right --> tidak kepake
this._border._top = '1px black solid';
this._border._bottom = '1px white solid';
}
//Font constructor
function TFont()
{
this._family = 'arial,times,sans-serif';
this._size = '8pt';
}
//Background constructor
function TBackground()
{
this._image = 'none'; //path and name of image
this._repeat = 'no-repeat';
this._color = 'transparent';
this._position = 'top left';
}
//Expand Icon constructor
function TExpandIcon()
{
this._create = true;
this._symbol = '►';
this._font = new TFont();
this._font._size = '6pt';
}
//Border Constructor
function TBorder()
{
this._top='1px gray solid';
this._right ='1px gray solid';
this._bottom ='1px gray solid';
this._left='1px gray solid';
}
//public
function BuildMenu()
{
var result ="";
var level = -1;
this.SetParent(this);
result += this.BuildStyle();
result += this.Draw(level++);
level++;
for(var i=0;i<=this._itemIndex;i++)
{
result +=this._items[i].Draw(level);
result += BuildPopUpMenu(this._items[i],level);
}
document.write(result);
}
//public
function InitMenu()
{
if(document.all)
var el_menu = document.all(this._id);
else if(document.getElementById)
var el_menu = document.getElementById(this._id);
this._position = this._position.toLowerCase();
if(this._position == 'absolute')
{
el_menu.style.top = this._top;
el_menu.style.left = this._left;
}else
{
this._top = findPosY(el_menu);
this._left = findPosX(el_menu);//el_menu.offsetLeft
}
el_menu.style.zIndex = 1;
//main menu shadow
if(this._shadow._create)
{
if(document.all)
var sh_el = document.all('sh_'+this._id);
else if(document.getElementById)
var sh_el = document.getElementById('sh_'+this._id);
if(_browser._name == 'IE')
{
sh_el.style.top = this._top + 'px';
sh_el.style.left= this._left + 'px';
sh_el.style.width = el_menu.offsetWidth +10+'px';
sh_el.style.height = el_menu.offsetHeight+10+'px';
sh_el.childNodes[0].style.width =el_menu.offsetWidth +'px';
sh_el.childNodes[0].style.height = el_menu.offsetHeight + 'px';
sh_el.childNodes[0].style.backgroundColor = 'black';
sh_el.style.visibility = 'visible';
}
else
{
if(_browser._name =='Konqueror' && this._position == 'relative')
sh_el.style.visibility = 'hidden';
else
{
sh_el.style.top = this._top + this._shadow._distance +'px';
sh_el.style.left= this._left + this._shadow._distance +'px';
sh_el.style.width = el_menu.offsetWidth + 'px';
sh_el.style.height = el_menu.offsetHeight + 'px';
sh_el.style.backgroundColor = this._shadow._color;
sh_el.style.visibility = 'visible';
}
}
sh_el.style.zIndex=0;
}
for(var i=0;i<=this._itemIndex;i++)
{
if(document.all)
var el_menuitem = document.all('pr_'+this._items[i]._id);
else if(document.getElementById)
var el_menuitem = document.getElementById('pr_'+this._items[i]._id);
/*
var tyH = typeof(this._itemHeight);
var tyW = typeof(this._itemWidth);
if(tyH == 'string')
{
if(this._itemHeight.toLowerCase() != 'auto' || this._itemHeight != '')
el_menuitem.style.height = this._itemHeight;
}
else
el_menuitem.style.height = this._itemHeight + 'px';
if(tyW == 'string')
{
if(this._itemWidth.toLowerCase() != 'auto' || this._itemWidth != '')
el_menuitem.style.width = this._itemWidth;
}
else
el_menuitem.style.width = this._itemWidth + 'px';
*/
if(this._items[i]._itemIndex > -1)
{
if(document.all)
var el_pop = document.all(this._items[i]._id);
else if(document.getElementById)
var el_pop = document.getElementById(this._items[i]._id);
if(this._direction == 'horizontal')
{
var leftPos=0;
leftPos = el_menuitem.offsetLeft + this._left;
if((leftPos - this._pop._itemWidth) < 0)
{
this._items[i]._left = leftPos + this._correction._left - 1;
}
else
{
if((leftPos + this._pop._itemWidth) > document.body.clientWidth)
{
if((leftPos + el_menuitem.offsetWidth) > document.body.clientWidth)
{
this._items[i]._left = leftPos - this._pop._itemWidth - this._correction._left;
}
else
{
this._items[i]._left = leftPos + el_menuitem.offsetWidth - this._pop._itemWidth - this._correction._left;
}
}
else
this._items[i]._left = leftPos + this._correction._left - 1;//el_menuitem.offsetLeft + this._left + this._correction._left - 1;
}
if(this._top - el_pop.offsetHeight <0)
this._items[i]._top = el_menuitem.offsetTop + el_menuitem.offsetHeight+this._top + 1 + this._correction._top;
else
{
if(this._top + el_menuitem.offsetHeight+ el_pop.offsetHeight < document.body.clientHeight)
this._items[i]._top = el_menuitem.offsetTop + el_menuitem.offsetHeight+this._top + 1 + this._correction._top;
else
this._items[i]._top = this._top - el_pop.offsetHeight - this._correction._top;
}
}
else //vertical
{
var leftPos = 0
leftPos = this._left + el_menu.offsetWidth + this._correction._left;
/*
if(leftPos >= this._pop._itemWidth)
{
if(leftPos + this._pop._itemWidth <= document.body.clientWidth)
{
leftPos = this._left - this._pop._itemWidth - this._correction._left;
}
}
*/
this._items[i]._left = leftPos;//el_menuitem.offsetLeft + this._left +el_menu.offsetWidth + this._correction._left;
this._items[i]._top = el_menuitem.offsetTop +this._top + this._correction._top;
}
el_pop.style.top = this._items[i]._top + 'px';
el_pop.style.left = this._items[i]._left + 'px';
el_pop.style.zIndex = 3;
//shadow
if(this._items[i]._parent._pop._shadow._create)
{
if(document.all)
var sh_el_pop = document.all('sh_'+this._items[i]._id);
else if(document.getElementById)
var sh_el_pop = document.getElementById('sh_'+this._items[i]._id);
if(_browser._name == 'IE')
{
sh_el_pop.style.top= this._items[i]._top + 'px';
sh_el_pop.style.left= this._items[i]._left + 'px';
sh_el_pop.style.width= el_pop.offsetWidth + 10 + 'px';
sh_el_pop.style.height= el_pop.offsetHeight + 10 + 'px';
sh_el_pop.childNodes[0].style.width = el_pop.offsetWidth + 'px';
sh_el_pop.childNodes[0].style.height = el_pop.offsetHeight + 'px';
//sh_el_pop.childNodes[0].style.backgroundColor = this._items[i]._parent._pop._shadow._color
sh_el_pop.childNodes[0].style.backgroundColor = 'black';
}
else
{
sh_el_pop.style.top= this._items[i]._top + this._items[i]._parent._pop._shadow._distance + 'px';
sh_el_pop.style.left= this._items[i]._left + this._items[i]._parent._pop._shadow._distance + 'px';
sh_el_pop.style.width= el_pop.offsetWidth +'px';
sh_el_pop.style.height= el_pop.offsetHeight +'px';
sh_el_pop.style.backgroundColor = this._items[i
|
