150 lines
No EOL
5.1 KiB
HTML
150 lines
No EOL
5.1 KiB
HTML
<!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>Example: Menu Buttons (YUI Library)</title>
|
|
|
|
<!-- Reset and Fonts -->
|
|
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
|
|
|
|
<!-- Menu CSS -->
|
|
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
|
|
|
|
|
<!-- CSS for Button -->
|
|
<link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
|
|
|
|
<!-- Page-specific styles -->
|
|
<style type="text/css">
|
|
|
|
body { margin:.5em; }
|
|
|
|
h1 { font-weight:bold; }
|
|
|
|
fieldset {
|
|
|
|
border:2px groove #ccc;
|
|
margin:.5em;
|
|
padding:.5em;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<!-- Dependency source files -->
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
|
|
<!-- Container Core Library -->
|
|
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
|
|
|
<!-- Menu Library -->
|
|
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
|
|
|
<!-- Button source file -->
|
|
<script type="text/javascript" src="../../build/button/button-beta.js"></script>
|
|
|
|
<!-- Page-specific JavaScript -->
|
|
<script type="text/javascript">
|
|
|
|
YAHOO.example.init = function () {
|
|
|
|
// "contentready" event handler for the "menubuttonsfrommarkup" <fieldset>
|
|
|
|
function onMenuButtonsMarkupReady() {
|
|
|
|
// Create a Button using an existing <input> element as a data source
|
|
|
|
var oMenuButton1 = new YAHOO.widget.Button("menubutton1", { type: "menubutton", menu: "menubutton1select" });
|
|
|
|
|
|
// Create a Button using the YUI Button markup
|
|
|
|
var oMenuButton2 = new YAHOO.widget.Button("menubutton2", { type: "menubutton", menu: "menubutton2select" });
|
|
|
|
}
|
|
|
|
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", onMenuButtonsMarkupReady)
|
|
|
|
|
|
// "click" event handler for each item in the Button's menu
|
|
|
|
function onMenuItemClick(p_sType, p_aArgs, p_oItem) {
|
|
|
|
oMenuButton3.set("label", p_oItem.cfg.getProperty("text"));
|
|
|
|
}
|
|
|
|
|
|
// Create a Button without using existing markup
|
|
|
|
var aMenuButton3Menu = [
|
|
|
|
{ text: "one", value: 1, onclick: { fn: onMenuItemClick } },
|
|
{ text: "two", value: 2, onclick: { fn: onMenuItemClick } },
|
|
{ text: "three", value: 3, onclick: { fn: onMenuItemClick } }
|
|
|
|
];
|
|
|
|
var oMenuButton3 = new YAHOO.widget.Button({ type: "menubutton", label: "one", name:"mymenubutton", menu: aMenuButton3Menu, container: "menubuttonsfromjavascript" });
|
|
|
|
function onExampleSubmit(p_oEvent) {
|
|
|
|
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
|
|
|
if(!bSubmit) {
|
|
|
|
YAHOO.util.Event.preventDefault(p_oEvent);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
YAHOO.util.Event.on("example", "submit", onExampleSubmit);
|
|
|
|
} ();
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Example: Menu Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
|
|
|
<form id="example" name="example" method="post" action="example07.html">
|
|
|
|
<fieldset id="menubuttons">
|
|
<legend>Menu Buttons</legend>
|
|
|
|
<fieldset id="menubuttonsfrommarkup">
|
|
<legend>From Markup</legend>
|
|
|
|
<input type="submit" id="menubutton1" name="menubutton1" value="Menu Button 1">
|
|
<select id="menubutton1select" name="menubutton1select">
|
|
<option value="0">One</option>
|
|
<option value="1">Two</option>
|
|
<option value="2">Three</option>
|
|
</select>
|
|
|
|
|
|
<input type="button" id="menubutton2" name="menubutton2" value="Menu Button 2">
|
|
<select id="menubutton2select" name="menubutton2select">
|
|
<option value="0">One</option>
|
|
<option value="1">Two</option>
|
|
<option value="2">Three</option>
|
|
</select>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset id="menubuttonsfromjavascript">
|
|
<legend>From JavaScript</legend>
|
|
</fieldset>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</body>
|
|
</html> |