mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-13 21:13:26 +00:00
161 lines
5.1 KiB
HTML
161 lines
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>Push Buttons</title>
|
|
|
|
<style type="text/css">
|
|
/*margin and padding on body element
|
|
can introduce errors in determining
|
|
element position and are not recommended;
|
|
we turn them off as a foundation for YUI
|
|
CSS treatments. */
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
|
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css">
|
|
|
|
#button-example-form fieldset,
|
|
#button-example-form fieldset div {
|
|
|
|
border: 2px groove #ccc;
|
|
margin: .5em;
|
|
padding: .5em;
|
|
|
|
}
|
|
|
|
.yui-button#pushbutton2 button,
|
|
.yui-button#pushbutton5 button,
|
|
.yui-button#pushbutton8 button {
|
|
|
|
background: url(../button/assets/add.gif) center center no-repeat;
|
|
text-indent: -4em;
|
|
overflow: hidden;
|
|
padding: 0 .75em;
|
|
width: 2em;
|
|
*margin-left: 4em; /* IE only */
|
|
*padding: 0 1.75em; /* IE only */
|
|
|
|
}
|
|
|
|
.yui-button#pushbutton3 button,
|
|
.yui-button#pushbutton6 button,
|
|
.yui-button#pushbutton9 button {
|
|
|
|
padding-left: 2em;
|
|
background: url(../button/assets/add.gif) 10% 50% no-repeat;
|
|
|
|
}
|
|
|
|
</style>
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
|
|
<h1>Push Buttons</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>This example demonstrates different ways to create a Push Button.</p>
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<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>
|
|
|
|
YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () {
|
|
|
|
// Create Buttons using existing <input> elements as a data source
|
|
|
|
var oPushButton1 = new YAHOO.widget.Button("pushbutton1");
|
|
oPushButton1.on("click", onButtonClick);
|
|
|
|
var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } });
|
|
var oPushButton3 = new YAHOO.widget.Button("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 } });
|
|
|
|
});
|
|
|
|
|
|
// 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 } });
|
|
|
|
} ();
|
|
|
|
</script>
|
|
|
|
<form id="button-example-form" name="button-example-form" method="post">
|
|
|
|
<fieldset id="pushbuttons">
|
|
<legend>Push Buttons</legend>
|
|
|
|
<fieldset id="pushbuttonsfrommarkup">
|
|
<legend>From Markup</legend>
|
|
|
|
<div>
|
|
<button type="button" id="pushbutton1" name="button1" value="Add">Add</button>
|
|
<input type="button" id="pushbutton2" name="button2" value="Add">
|
|
<input type="button" id="pushbutton3" name="button3" value="Add">
|
|
</div>
|
|
|
|
<div>
|
|
<span id="pushbutton4" class="yui-button yui-push-button"><span class="first-child"><input type="button" name="button4" value="Add"></span></span>
|
|
<span id="pushbutton5" class="yui-button yui-push-button"><em class="first-child"><button type="button" name="button5">Add</button></em></span>
|
|
<span id="pushbutton6" class="yui-button yui-push-button"><strong class="first-child"><button type="button" name="button6">Add</button></strong></span>
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
<fieldset id="pushbuttonsfromjavascript">
|
|
<legend>From JavaScript</legend>
|
|
</fieldset>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|