142 lines
No EOL
4.8 KiB
HTML
142 lines
No EOL
4.8 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: Split 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 "splitbuttonsfrommarkup" <fieldset>
|
|
|
|
function onSplitButtonsMarkupReady() {
|
|
|
|
// Create a Button using an existing <input> element as a data source
|
|
|
|
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "splitbutton", menu: "splitbutton1select" });
|
|
|
|
|
|
// Create a Button using the YUI Button markup
|
|
|
|
var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", { type: "splitbutton", menu: "splitbutton2select" });
|
|
|
|
}
|
|
|
|
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", onSplitButtonsMarkupReady);
|
|
|
|
|
|
// Create a Button without using existing markup
|
|
|
|
var aSplitButton3Menu = [
|
|
|
|
{ text: "one", value: 1 },
|
|
{ text: "two", value: 2 },
|
|
{ text: "three", value: 3 }
|
|
|
|
];
|
|
|
|
var oSplitButton3 = new YAHOO.widget.Button({ type: "splitbutton", label: "Split Button 3", menu: aSplitButton3Menu, container: "splitbuttonsfromjavascript" });
|
|
|
|
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: Split Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
|
|
|
<form id="example" name="example" method="post" action="example08.html">
|
|
|
|
<fieldset id="splitbuttons">
|
|
<legend>Split Buttons</legend>
|
|
|
|
<fieldset id="splitbuttonsfrommarkup">
|
|
<legend>From Markup</legend>
|
|
|
|
<input type="submit" id="splitbutton1" name="splitbutton1" value="Split Button 1">
|
|
<select id="splitbutton1select" name="splitbutton1select" multiple>
|
|
<option value="0">One</option>
|
|
<option value="1">Two</option>
|
|
<option value="2">Three</option>
|
|
</select>
|
|
|
|
<input type="button" id="splitbutton2" name="splitbutton2" value="Split Button 2">
|
|
<select id="splitbutton2select" name="splitbutton2select">
|
|
<option value="0">One</option>
|
|
<option value="1">Two</option>
|
|
<option value="2">Three</option>
|
|
</select>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset id="splitbuttonsfromjavascript">
|
|
<legend>From JavaScript</legend>
|
|
</fieldset>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</body>
|
|
</html> |