YUI3的widget抽象类小demo
YUI3比起YUI2在自定义类方面做了很大的改进。YUI2几乎没有提供用于自定义类的特殊支持，到了YUI3，一切组件都是建立在base,plugin和widget这三种抽象类的基础上的。为自定义类提供了统一的格式和标准！
用widget抽象类做的小demo，感受一下YUI3自定义类的强大：
===================================
<!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>阿当制作</title>
<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
</head>
<body class="yui-skin-sam">
<style type="text/css">
</style>
<div class="join" id="join">
<p><label>第一个数：</label> <input type="text" /></p>
<p><label>第二个数：</label> <input type="text" /></p>
<p>相加结果为：<span class="result"></span></p>
<p><input type="button" class="addBtn" value="相加" /></p>
</div>
<script type="text/javascript">
YUI().use("node","console","dump","anim","dd","slider","widget",function(Y){
var mycon = new Y.Console().render();
function Join(cfg){
Join.superclass.constructor.apply(this,arguments);
}
Join.NAME = "join";
Join.ATTRS = {
result : {
value : null
},
btnEl : {
value : null
},
inputEls : {
value : null
},
resultEl : {
value : null
}
};
Join.HTML_PARSER = {
btnEl : ".addBtn",
inputEls : ["input"],
resultEl : function(contentBox){
return contentBox.query(".result");
}
};
Y.extend(Join,Y.Widget,{
bindUI : function(){
this.get("btnEl").on("click",function(){
var num = parseInt(this.get("inputEls").item(0).get("value")) + parseInt(this.get("inputEls").item(1).get("value"));
this.set("result",num);
},this);
this.on("resultChange",function(e){
mycon.log(e.newVal);
this._setVal(e.newVal);
});
},
syncUI : function(){
var str = this.get("result");
this._setVal(str);
},
_setVal : function(str){
this.get("resultEl").set("innerHTML",str);
}
});
var myJoin = new Join({contentBox:"#join"});
myJoin.render();
})
</script>
</body>
</html>
===========================================
用widget抽象类做的小demo，感受一下YUI3自定义类的强大：
===================================
<!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>阿当制作</title>
<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
</head>
<body class="yui-skin-sam">
<style type="text/css">
</style>
<div class="join" id="join">
<p><label>第一个数：</label> <input type="text" /></p>
<p><label>第二个数：</label> <input type="text" /></p>
<p>相加结果为：<span class="result"></span></p>
<p><input type="button" class="addBtn" value="相加" /></p>
</div>
<script type="text/javascript">
YUI().use("node","console","dump","anim","dd","slider","widget",function(Y){
var mycon = new Y.Console().render();
function Join(cfg){
Join.superclass.constructor.apply(this,arguments);
}
Join.NAME = "join";
Join.ATTRS = {
result : {
value : null
},
btnEl : {
value : null
},
inputEls : {
value : null
},
resultEl : {
value : null
}
};
Join.HTML_PARSER = {
btnEl : ".addBtn",
inputEls : ["input"],
resultEl : function(contentBox){
return contentBox.query(".result");
}
};
Y.extend(Join,Y.Widget,{
bindUI : function(){
this.get("btnEl").on("click",function(){
var num = parseInt(this.get("inputEls").item(0).get("value")) + parseInt(this.get("inputEls").item(1).get("value"));
this.set("result",num);
},this);
this.on("resultChange",function(e){
mycon.log(e.newVal);
this._setVal(e.newVal);
});
},
syncUI : function(){
var str = this.get("result");
this._setVal(str);
},
_setVal : function(str){
this.get("resultEl").set("innerHTML",str);
}
});
var myJoin = new Join({contentBox:"#join"});
myJoin.render();
})
</script>
</body>
</html>
===========================================
