в 10:00, 26 мая 2010

2010-05-26T10:00:42Z

Admin: 1 версия

2010-05-26T07:43:36Z

1 версия

Новая страница

==Context Menu Example==



<source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Context Menu Example</title>

<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">

<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">


<style type="text/css">
h1, p, ul {
margin:1em;
}
h1 em,
p em,
#operainstructions li em {
font-weight:bold;
}
#operainstructions {
list-style-type:square;
margin-left:2em;
}
#clones {
background-color:#9C6;
width:450px;
height:400px;
overflow:auto;

}

#clones li {

float:left;
display:inline;
border:solid 1px #000;
background-color:#fff;
margin:10px;
text-align:center;

}
#clones li img {

border:solid 1px #000;
margin:5px;

}

#clones li cite {

display:block;
text-align:center;
margin:0 0 5px 0;
padding:0 5px;
}

</style>

<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>

<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>

<script type="text/javascript" src="./build/container/container_core.js"></script>

<script type="text/javascript" src="./build/menu/menu.js"></script>

<script type="text/javascript">
// "load" event handler for the "window" object
YAHOO.example.onWindowLoad = function(p_oEvent) {

// Renames an "Ewe"

function EditEweName(p_oLI) {

var oCite = p_oLI.lastChild;

if(oCite.nodeType != 1) {

oCite = oCite.previousSibling;

}

var oTextNode = oCite.firstChild;

var sName =
window.prompt(
"Enter a new name for ",
oTextNode.nodeValue
);

if(sName && sName.length > 0) {

oTextNode.nodeValue = sName;

}

}

// Clones an "Ewe"

function CloneEwe(p_oLI) {

var oClone = p_oLI.cloneNode(true);

p_oLI.parentNode.appendChild(oClone);

}

// Deletes an "Ewe"

function DeleteEwe(p_oLI) {

var oUL = p_oLI.parentNode;

oUL.removeChild(p_oLI);

}

/*
Returns the LI instance that is the parent node of the target
of a "contextmenu" event
*/

function GetListItemFromEventTarget(p_oNode) {

var oLI;

if(p_oNode.tagName == "LI") {

oLI = p_oNode;

}
else {

/*
If the target of the event was a child of an LI,
get the parent LI element
*/

do {

if(p_oNode.tagName == "LI") {

oLI = p_oNode;

break;

}

}
while((p_oNode = p_oNode.parentNode));

}

return oLI;

}

// "move" event handler for the context menu

function onContextMenuMove() {

var oNode = this.contextEventTarget;
var bDisabled = (oNode.tagName == "UL");
var i = this.getItemGroups()[0].length - 1;

do {

this.getItem(i).cfg.setProperty("disabled", bDisabled);

}
while(i--);

}

// "click" event handler for each item in the context menu

function onContextMenuItemClick(p_sType, p_aArguments, p_oItem) {

var oLI =
GetListItemFromEventTarget(this.parent.contextEventTarget);

switch(this.index) {

case 0: // Edit name

EditEweName(oLI);

break;

case 1: // Clone

CloneEwe(oLI);

break;

case 2: // Delete

DeleteEwe(oLI);

break;

}

}

// "keydown" event handler for the context menu

function onContextMenuKeyDown(p_sType, p_sArguments, p_oMenu) {

var oDOMEvent = p_sArguments[0];

if(oDOMEvent.shiftKey) {

var oLI =
GetListItemFromEventTarget(this.contextEventTarget);

switch(oDOMEvent.keyCode) {

case 69: // Edit name

EditEweName(oLI);

this.hide();

break;

case 67: // Clone

CloneEwe(oLI);

this.hide();

break;

case 68: // Delete

DeleteEwe(oLI);

this.hide();

break;

}

}

}

// Create the context menu
var oContextMenu = new YAHOO.widget.ContextMenu(
"contextmenu",
{ trigger: "clones" }
);
var aMainMenuItems = [
{ text: "Edit Name", helptext: "Shift + E" },
{ text: "Clone", helptext: "Shift + C" },
{ text: "Delete", helptext: "Shift + D" }
];

var nMainMenuItems = aMainMenuItems.length;

var oMenuItem;

// Add items to the main menu
for(var i=0; i<nMainMenuItems; i++) {
oMenuItem =
new YAHOO.widget.ContextMenuItem(
aMainMenuItems[i].text,
{ helptext: aMainMenuItems[i].helptext }
);
/*
Add a "click" event handler to each
ContextMenuItem instance
*/
oMenuItem.clickEvent.subscribe(
onContextMenuItemClick,
oMenuItem,
true
);
oContextMenu.addItem(oMenuItem);
}

// Add a "move" event handler to the context menu

oContextMenu.moveEvent.subscribe(
onContextMenuMove,
oContextMenu,
true
);

// Add a "keydown" event handler to the context menu
oContextMenu.keyDownEvent.subscribe(
onContextMenuKeyDown,
oContextMenu,
true
);

// Render the context menu
oContextMenu.render(document.body);

}

// Assign a "load" event handler to the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);

</script>
</head>
<body>
<h1>Context Menu Example <em>[<a href="">Examples Home</a>]</em></h1>
<p>Use the context menu to rename, clone or delete Dolly.</p>
<p><em>Please Note:</em> Opera users will need to do the following to use this example:</p>
<ul id="operainstructions">
<li><em>Opera for Windows:</em> Hold down the control key and click with the left mouse button.</li>
<li><em>Opera for OS X:</em> Hold down the command key (⌘) and click with the left mouse button.</li>
</ul>
<ul id="clones">
<li><a href="http://www.wbex.ru"><img src="http://www.wbex.ru/style/logo.png" width="150" height="80" alt="logo"></a><cite>logo</cite></li>
</ul>
</body>
</html>

</source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>

==JavaScript Drop Down Menu==



<source lang="html4strict">

<html>
<head>
<title>DynAPI Examples - HTML Drop Down Menu</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("TemplateManager");
dynapi.library.include("HTMLDropDownMenu");
dynapi.library.include("HTMLButton");
</script>
<script language="Javascript">
var o={
"http://www.sourceforge.net":"SourceForge.net",
"http://dynapi.sourceforge.net":"DynAPI",
"http://javascript.internet.ru":"JavaScript Source",
"http://www.w3c.org":"The World Wide Web Consortium (W3C)",
"http://www.linux.org":"The Linux Home Page",
"http://www.javascript-games.org/":"Javascript Games!",
"http://www.dannyg.ru/pubs/jsb/index.html":"JavaScript Bible Series"
};
var t = "This is the Template:<center><form><table border="0" width="310"><tr><td colspan="3">Select a website:<br>{@ddm} {@btnGo}</td></tr></table></form></center>";
var tp = new Template(t,100,100,350,200,"#EEEEEE");
tp.addChild(new HTMLButton(null," > ","Click here to view site"),"btnGo");
tp.addChild(new HTMLDropDownMenu(null,o),"ddm");
tp.btnGo.addEventListener({
onclick:function(e){
alert(tp.ddm.getSelected());
}
});
dynapi.document.addChild(tp);
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>

</source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

← Предыдущая	Версия 10:00, 26 мая 2010
(нет различий)

JavaScript DHTML/GUI Components/Popup Menu - История изменений

в 10:00, 26 мая 2010

Admin: 1 версия