yui/examples/button/example02.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd"><html>
   3     <head>
   4         <meta http-equiv="content-type" content="text/html; charset=utf-8">
   5         <title>Example: Link Buttons (YUI Library)</title>
   6
   7         <!-- Reset and Fonts -->
   8         <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
   9         <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
  10
  11         <!-- CSS for Button -->
  12         <link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
  13
  14         <!-- Page-specific styles -->
  15         <style type="text/css">
  16
  17             body { margin:.5em; }
  18
  19             h1 { font-weight:bold; }
  20
  21             h2 { margin:.5em 0; }
  22
  23             div {
  24
  25                 border:2px groove #ccc;
  26                 margin:.5em;
  27                 padding:.5em;
  28
  29             }
  30
  31             #linkbutton2 a,
  32             #linkbutton5 a {
  33
  34                 background:url(img/yahoo.gif) center center no-repeat;
  35                 text-indent:-5em;
  36                 overflow:hidden;
  37                 padding:.25em 1em;
  38
  39                 *margin-left:5em;   /* IE only */
  40                 _padding:.25em 2em; /* IE < 7 only */
  41
  42             }
  43
  44             #linkbutton3 a,
  45             #linkbutton6 a {
  46
  47                 padding-left:2em;
  48                 background:url(img/yahoo.gif) 10% 50% no-repeat;
  49
  50             }
  51
  52         </style>
  53
  54
  55         <!-- Dependency source files -->
  56         <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
  57         <script type="text/javascript" src="../../build/element/element-beta.js"></script>
  58
  59         <!-- Button source file -->
  60         <script type="text/javascript" src="../../build/button/button-beta.js"></script>
  61
  62         <!-- Page-specific JavaScript -->
  63         <script type="text/javascript">
  64
  65             var oLinkButton1 = new YAHOO.widget.Button("linkbutton1");
  66             var oLinkButton2 = new YAHOO.widget.Button("linkbutton2");
  67             var oLinkButton3 = new YAHOO.widget.Button("linkbutton3");
  68
  69             var oLinkButton4 = new YAHOO.widget.Button({ type:"link", id:"linkbutton4", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
  70             var oLinkButton5 = new YAHOO.widget.Button({ type:"link", id:"linkbutton5", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
  71             var oLinkButton6 = new YAHOO.widget.Button({ type:"link", id:"linkbutton6", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
  72
  73         </script>
  74
  75     </head>
  76     <body>
  77
  78         <h1>Example: Link Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
  79
  80         <div id="linkbuttonsfrommarkup">
  81             <h2>From Markup</h2>
  82
  83             <span id="linkbutton1"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
  84             <span id="linkbutton2"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
  85             <span id="linkbutton3"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
  86
  87         </div>
  88
  89         <div id="linkbuttonsfromjavascript">
  90             <h2>From JavaScript</h2>
  91         </div>
  92
  93     </body>
  94 </html>