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>