116 lines
No EOL
3.9 KiB
HTML
116 lines
No EOL
3.9 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: Link 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">
|
|
|
|
<!-- 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; }
|
|
|
|
h2 { margin:.5em 0; }
|
|
|
|
div {
|
|
|
|
border:2px groove #ccc;
|
|
margin:.5em;
|
|
padding:.5em;
|
|
|
|
}
|
|
|
|
#linkbutton2 a,
|
|
#linkbutton5 a {
|
|
|
|
background:url(img/yahoo.gif) center center no-repeat;
|
|
text-indent:-5em;
|
|
overflow:hidden;
|
|
padding:.25em 1em;
|
|
|
|
*margin-left:5em; /* IE only */
|
|
_padding:.25em 2em; /* IE < 7 only */
|
|
|
|
}
|
|
|
|
#linkbutton3 a,
|
|
#linkbutton6 a {
|
|
|
|
padding-left:2em;
|
|
background:url(img/yahoo.gif) 10% 50% no-repeat;
|
|
|
|
}
|
|
|
|
</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>
|
|
|
|
<!-- 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 "linkbuttonsfrommarkup" <div>
|
|
|
|
function onLinkButtonsMarkupReady() {
|
|
|
|
// Create Buttons from existing markup
|
|
|
|
var oLinkButton1 = new YAHOO.widget.Button("linkbutton1");
|
|
var oLinkButton2 = new YAHOO.widget.Button("linkbutton2");
|
|
var oLinkButton3 = new YAHOO.widget.Button("linkbutton3");
|
|
|
|
}
|
|
|
|
YAHOO.util.Event.onContentReady("linkbuttonsfrommarkup", onLinkButtonsMarkupReady);
|
|
|
|
|
|
// Create Buttons without using existing markup
|
|
|
|
var oLinkButton4 = new YAHOO.widget.Button({ type:"link", id:"linkbutton4", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
|
|
var oLinkButton5 = new YAHOO.widget.Button({ type:"link", id:"linkbutton5", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
|
|
var oLinkButton6 = new YAHOO.widget.Button({ type:"link", id:"linkbutton6", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
|
|
|
|
} ();
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Example: Link Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
|
|
|
<div id="example">
|
|
|
|
<div id="linkbuttonsfrommarkup">
|
|
<h2>From Markup</h2>
|
|
|
|
<span id="linkbutton1"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
|
|
<span id="linkbutton2"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
|
|
<span id="linkbutton3"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
|
|
|
|
</div>
|
|
|
|
<div id="linkbuttonsfromjavascript">
|
|
<h2>From JavaScript</h2>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |