如何解决YUI教程不起作用
为什么这个YUI3示例中的代码对我不起作用? 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\'),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,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,0.3);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 7px;
cursor: move;
}
.yui3-overlay-content {
background: rgba(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;
}
我只是复制并粘贴了代码,任何人都可以帮忙吗?
解决方法
您的标签缺少class =“ \” yui3-sam-sam yui-skin-sam \“
, 它似乎正在工作。我将您的代码复制/粘贴到此jsfiddle中。随着滑块和标题颜色变化字段的变化,似乎更新了颜色和大小。
, 这不是支持调试的最佳论坛。
欢迎您在freenode的#yui频道中提问,而不要在此处进行缓慢的来回调试。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。