KISSY 库 demo
KISSY 是由淘宝前端project师们发起创建的一个开源 JS 类库。
它遵循的原则是 小巧灵活、简洁有用、愉悦编码、快乐开发。
DEMO：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://g.alicdn.com/kissy/k/1.4.7/seed-min.js"></script>
</head>
<script type="text/javascript">
KISSY.ready(function(S){
S.use('core',function(){
var Event = S.Event;
Event.on('#btn1','click',function(ev){
//alert(S.one("#test1").siblings().item(1).html());
//S.one(ev.target).siblings("button").item(1).toggle(0.3);
});
var anim = new S.Anim('#test2',{'color':'red','font-size':'19px','height':'30px'},4,S.easeInStrong);
Event.on('#btn1','click',function(evt){
anim.run();
});
Event.on('#btn2','click',function(evt){
anim.stop();
});
Event.on('#btn3','click',function(evt){
anim.stop(true);
});
Event.add('button','mouseover mouseout mousedown',function(ev){
if(ev.type == 'mouseover'){
S.one(ev.target).text('鼠标划过');
//
//S.DOM.addClass('button','demo3-over');
}else if(ev.type == 'mouseout'){
S.one(ev.target).text('鼠标移开');
//anim.stop();
//S.DOM.removeClass('button','demo3-over');
}else if(ev.type == 'mousedown'){
S.one(ev.target).text('an zhu');
S.all("p").each(function(o,i){
// if(o.attr("id") == 'test1') alert(i);
});
}
})
});
})(KISSY);
</script>
</head>
<body>
<p id="test1">这是段落。</p>
<p id="test2">这是还有一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://g.alicdn.com/kissy/k/1.4.7/seed-min.js"></script>
</head>
<script type="text/javascript">
KISSY.ready(function(S){
S.use('core',function(){
S.all("p").each(function(o,i){
S.one(o).attr('old',S.one(o).html());
});
S.all("p").on("mouseout mousedown mouseover",function(ev){
var animate=new S.Anim(S.one(ev.currentTarget),{"color":"yellow","font-size":"22px","background-color":"purple"},14);
if (ev.type=="mousedown"){
S.one(ev.currentTarget).html('mousedown');
animate.run();
}else if (ev.type=="mouseout"){
S.one(ev.currentTarget).html(S.one(ev.target).attr('old'));
animate.stop();
}else if (ev.type=="mouseover"){
S.one(ev.currentTarget).html('mouseover');
}
});
S.one('#forOnInput').on("focus",function(ev){
if(ev.target.value==S.one('#forOnInput').attr("defvalue")){
S.one('#forOnInput').val("");
}
});
S.one('#forOnInput').on("input",function(ev){
S.one('body').append("<p>"+S.one('#forOnInput').val().length+"</p>")
});
S.one('#forOnInput').on("blur",function(ev){
if(!S.one('#forOnInput').val()){S.one('#forOnInput').val(S.one('#forOnInput').attr("defvalue"));
}
});
});
});
</script>
</head>
<body>
<div>
<p>我是居中t对齐的。</p>
</div>
<label>Name:</label><input type="text" id="forOnInput" defvalue="123456" value="123456"/>
<p><b>凝视：</b>IE 不支持 box-pack 和 box-align 属性。</p>
<p>我是居y中对齐的。</p>
</body>
</html>
