180 lines
No EOL
6.4 KiB
HTML
180 lines
No EOL
6.4 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: Push 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">
|
|
|
|
<!-- Logger CSS -->
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.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,
|
|
fieldset div {
|
|
|
|
border:2px groove #ccc;
|
|
margin:.5em;
|
|
padding:.5em;
|
|
|
|
}
|
|
|
|
.yuibutton#pushbutton2 button,
|
|
.yuibutton#pushbutton5 button,
|
|
.yuibutton#pushbutton8 button {
|
|
|
|
background:url(img/add.gif) center center no-repeat;
|
|
text-indent:-4em;
|
|
overflow:hidden;
|
|
padding:.25em .75em;
|
|
|
|
width:2em;
|
|
*margin-left:4em; /* IE only */
|
|
*padding:.25em 1.75em; /* IE only */
|
|
}
|
|
|
|
.yuibutton#pushbutton3 button,
|
|
.yuibutton#pushbutton6 button,
|
|
.yuibutton#pushbutton9 button {
|
|
|
|
padding-left:2em;
|
|
background:url(img/add.gif) 10% 50% no-repeat;
|
|
|
|
}
|
|
|
|
div#logs {
|
|
|
|
margin-top:1em;
|
|
|
|
}
|
|
|
|
</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>
|
|
|
|
<!-- Logger source file -->
|
|
|
|
<script type="text/javascript" src="../../build/logger/logger.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 () {
|
|
|
|
// "click" event handler for each Button instance
|
|
|
|
function onButtonClick(p_oEvent) {
|
|
|
|
YAHOO.log("You clicked button: " + this.get("id"), "info", "example1");
|
|
|
|
}
|
|
|
|
|
|
// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset>
|
|
|
|
function onPushButtonsMarkupReady() {
|
|
|
|
// Create Buttons using existing <input> elements as a data source
|
|
|
|
var oPushButton1 = new YAHOO.widget.Button("pushbutton1src", { id:"pushbutton1" });
|
|
oPushButton1.on("click", onButtonClick);
|
|
|
|
var oPushButton2 = new YAHOO.widget.Button("pushbutton2src", { id:"pushbutton2", onclick: { fn: onButtonClick } });
|
|
var oPushButton3 = new YAHOO.widget.Button("pushbutton3src", { id:"pushbutton3", onclick: { fn: onButtonClick } });
|
|
|
|
|
|
// Create Buttons using the YUI Button markup
|
|
|
|
var oPushButton4 = new YAHOO.widget.Button("pushbutton4");
|
|
oPushButton4.on("click", onButtonClick);
|
|
|
|
var oPushButton5 = new YAHOO.widget.Button("pushbutton5", { onclick: { fn: onButtonClick } });
|
|
var oPushButton6 = new YAHOO.widget.Button("pushbutton6", { onclick: { fn: onButtonClick } });
|
|
|
|
}
|
|
|
|
YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", onPushButtonsMarkupReady);
|
|
|
|
|
|
// Create Buttons without using existing markup
|
|
|
|
var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" });
|
|
oPushButton7.on("click", onButtonClick);
|
|
|
|
var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
|
|
var oPushButton9 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton9", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
|
|
|
|
// "available" event handler for the "logs" <div>
|
|
|
|
function onLogsAvailable() {
|
|
|
|
var oLogReader = new YAHOO.widget.LogReader("logs");
|
|
|
|
}
|
|
|
|
YAHOO.util.Event.onAvailable("logs", onLogsAvailable);
|
|
|
|
} ();
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Example: Push Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
|
|
|
<form id="example" name="example" method="post" action="example01.html">
|
|
|
|
<fieldset id="pushbuttons">
|
|
<legend>Push Buttons</legend>
|
|
|
|
<fieldset id="pushbuttonsfrommarkup">
|
|
<legend>From Markup</legend>
|
|
|
|
<div>
|
|
<input type="button" id="pushbutton1src" name="button1" value="Add">
|
|
<input type="button" id="pushbutton2src" name="button2" value="Add">
|
|
<input type="button" id="pushbutton3src" name="button3" value="Add">
|
|
</div>
|
|
|
|
<div>
|
|
<span id="pushbutton4" class="yuibutton"><span class="first-child"><button type="button" name="button4">Add</button></span></span>
|
|
<span id="pushbutton5" class="yuibutton"><span class="first-child"><button type="button" name="button5">Add</button></span></span>
|
|
<span id="pushbutton6" class="yuibutton"><span class="first-child"><button type="button" name="button6">Add</button></span></span>
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset id="pushbuttonsfromjavascript">
|
|
<legend>From JavaScript</legend>
|
|
</fieldset>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
<div id="logs"></div>
|
|
|
|
</body>
|
|
</html> |