yui/examples/button/example07.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: Menu 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         <!-- Menu CSS -->
  12         <link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
  13
  14
  15         <!-- CSS for Button -->
  16         <link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
  17
  18         <!-- Page-specific styles -->
  19         <style type="text/css">
  20
  21             body { margin:.5em; }
  22
  23             h1 { font-weight:bold; }
  24
  25             fieldset {
  26
  27                 border:2px groove #ccc;
  28                 margin:.5em;
  29                 padding:.5em;
  30
  31             }
  32
  33         </style>
  34
  35
  36         <!-- Dependency source files -->
  37         <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
  38         <script type="text/javascript" src="../../build/element/element-beta.js"></script>
  39         <!-- Container Core Library -->
  40         <script type="text/javascript" src="../../build/container/container_core.js"></script>
  41
  42         <!-- Menu Library -->
  43         <script type="text/javascript" src="../../build/menu/menu.js"></script>
  44
  45         <!-- Button source file -->
  46         <script type="text/javascript" src="../../build/button/button-beta.js"></script>
  47
  48         <!-- Page-specific JavaScript -->
  49         <script type="text/javascript">
  50
  51             var oMenuButton1 = new YAHOO.widget.Button("menubutton1", { type: "menubutton", menu: "menubutton1select" });
  52
  53             var oMenuButton2 = new YAHOO.widget.Button("menubutton2", { type: "menubutton", menu: "menubutton2select" });
  54
  55
  56             function onMenuItemClick(p_sType, p_aArgs, p_oItem) {
  57
  58                 oMenuButton3.set("label", p_oItem.cfg.getProperty("text"));
  59
  60             }
  61
  62             var aMenuButton3Menu = [
  63
  64                 { text: "one", value: 1, onclick: { fn: onMenuItemClick } },
  65                 { text: "two", value: 2, onclick: { fn: onMenuItemClick } },
  66                 { text: "three", value: 3, onclick: { fn: onMenuItemClick } }
  67
  68             ];
  69
  70             var oMenuButton3 = new YAHOO.widget.Button({ type: "menubutton", label: "one", name:"mymenubutton", menu: aMenuButton3Menu, container: "menubuttonsfromjavascript" });
  71
  72         </script>
  73
  74     </head>
  75     <body>
  76
  77
  78         <h1>Example: Menu Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
  79
  80         <form id="example" name="example" method="post" action="example07.html">
  81
  82             <fieldset id="menubuttons">
  83                 <legend>Menu Buttons</legend>
  84
  85                 <fieldset id="menubuttonsfrommarkup">
  86                     <legend>From Markup</legend>
  87
  88                     <input type="submit" id="menubutton1" name="menubutton1" value="Menu Button 1">
  89                     <select id="menubutton1select" name="menubutton1select">
  90                         <option value="0">One</option>
  91                         <option value="1">Two</option>
  92                         <option value="2">Three</option>
  93                     </select>
  94
  95
  96                     <input type="button" id="menubutton2" name="menubutton2" value="Menu Button 2">
  97                     <select id="menubutton2select" name="menubutton2select">
  98                         <option value="0">One</option>
  99                         <option value="1">Two</option>
 100                         <option value="2">Three</option>
 101                     </select>
 102
 103                 </fieldset>
 104
 105                 <fieldset id="menubuttonsfromjavascript">
 106                     <legend>From JavaScript</legend>
 107                 </fieldset>
 108
 109         </form>
 110
 111     </body>
 112 </html>