YUI教程不起作用

-1

为什么从this YUI3 example这段代码不适用于我？YUI教程不起作用

HTML：

<!-- The original body content is above --> 
<div id="form_container"> 
    <form class="yui3-widget-bd" id="theme_form" action="#" method="get"> 
     <fieldset> 
      <h3>Update Theme</h3> 
      <label for="font_size">Font size:</label> 
      <input type="text" size="3" id="font_size" value="16px"> 

      <label for="heading_color">Heading color:</label> 
      <input type="text" size="12" id="heading_color" value="#005A9C"> 

      <label for="link_hover">Link hover backgound:</label> 
      <input type="text" size="12" id="link_hover" value="#ffa"> 
     </fieldset> 
     <input type="submit"> 
    </form> 
</div>

的Javascript：

// Create a new YUI instance, requiring stylesheet, overlay, slider, and the 
// dd-plugin to make the overlay draggable 
YUI({ 
    filter: 'raw' 
}).use("stylesheet", "overlay", "slider", "dd-plugin", function(Y) { 

    var myStyleSheet = new Y.StyleSheet(), 
     overlayContent = Y.one('#form_container'), 
     overlay, slider, slider_container, fontSizeInput; 

     // Create the Overlay, using the form container as the contentBox. 
     // The form is assigned a class yui-widget-bd that will be automatically 
     // discovered by Overlay to populate the Overlay's body section. 
     // The overlay is positioned in the top right corner, but made draggable 
     // using Y.Plugin.Drag, provided by the dd-plugin module. 
     overlay = new Y.Overlay({ 
      srcNode: overlayContent, 
      width: '225px', 
      align: { 
       points: [Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TR] 
      }, 
      plugins: [Y.Plugin.Drag] 
     }).render(); 

    // Slider needs a parent element to have the sam skin class for UI skinning 
    overlayContent.addClass('yui3-skin-sam'); 

    // Progressively enhance the font-size input with a Slider 
    fontSizeInput = Y.one('#font_size'); 
    fontSizeInput.set('type', 'hidden'); 
    fontSizeInput.get('parentNode').insertBefore(
    Y.Node.create('6 <span></span> 36'), fontSizeInput); 

    slider_container = fontSizeInput.previous("span"); 

    // Create a Slider to contain font size between 6px and 36px, using the 
    // page's current font size as the initial value. 
    // Set up an event subscriber during construction to update the replaced 
    // input field's value and apply the change to the StyleSheet 
    slider = new Y.Slider({ 
     length: '100px', 
     min: 6, 
     max: 36, 
     value: parseInt(Y.one('body').getStyle('fontSize')) || 13, 
     after: { 
      valueChange: function(e) { 
       var size = e.newVal + 'px'; 

       this.thumb.set('title', size); 
       fontSizeInput.set('value', size); 

       myStyleSheet.set('body', { 
        fontSize: size 
       }); 
      } 
     } 
    }).render(slider_container); 

    // The color inputs are assigned keyup listeners that will update the 
    // StyleSheet if the current input value is a valid CSS color value 
    // The heading input affects all h1s, h2, and h3s 
    Y.on('keyup', function(e) { 
     var color = this.get('value'); 

     console.log(color); 

     if (isValidColor(color)) { 
      console.log("Valid color", myStyleSheet); 

      myStyleSheet.set('h1, h2, h3', { 
       color: color 
      }); 
     } 
    }, '#heading_color'); 

    // The link hover affects the background color of links when they are 
    // hovered. There is no way other than via stylesheet modification to 
    // change pseudo-class styles. 
    Y.on('keyup', function(e) { 
     var color = this.get('value'); 

     if (isValidColor(color)) { 
      myStyleSheet.set('a:hover', { 
       backgroundColor: color 
      }); 
     } 
    }, '#link_hover'); 

    // Progressive form enhancement complete, now prevent the form from 
    // submitting normally. 
    Y.on('submit', function(e) { 
     e.halt(); 
    }, '#theme_form'); 

    // A rudimentary validator to make sure we're not trying to set 
    // invalid color values in StyleSheet. 

    function isValidColor(v) { 
     return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) || /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) || /^[a-z]{3,}$/i.test(v); 
    } 

});

CSS：

/* For supporting browsers, the overlay is rendered semi-transparent with 
* fancy rounded corners */ 
.yui3-overlay { 
    background: rgba(128,128,128,0.3); 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    padding: 7px; 
    cursor: move; 
} 

.yui3-overlay-content { 
    background: rgba(205,205,205,0.3); 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    padding: 1px; 
} 

.yui3-overlay form { 
    background: #f2fbff; 
    border: 2px solid #fff; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    margin: 0; 
    padding: 0; 
    font-size: 13px; 
} 

.yui3-overlay fieldset { 
    border: 1px solid #bcd; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    margin: 0; 
    padding: 20px; 
} 

.yui3-overlay h3 { 
    border-bottom: 2px solid #fff; 
    color: #479; 
    background: transparent; 
    margin: 0; 
    font-size: 175%; 
} 

.yui3-overlay label { 
    display: block; 
    margin: 1.3em 0 0.5ex; 
    font-weight: bold; 
    color: #003; 
} 

.yui3-overlay p { 
    margin: 2em 0 0; 
} 

/* override the move cursor for the Slider */ 
.yui3-overlay .yui3-slider:hover { 
    cursor: default; 
}

我只是复制并粘贴代码，任何人都可以帮忙？

来源

2011-05-31 ALY

为什么yui没有工作？ – bzlm 2011-05-31 18:59:31