生活随笔
收集整理的這篇文章主要介紹了
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>
轉載于:https://www.cnblogs.com/bhlsheji/p/5130843.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
以上是生活随笔為你收集整理的KISSY 库 demo的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
