码迷,mamicode.com
首页 > 其他好文 > 详细

KISSY 库 demo

时间:2016-01-14 17:31:31      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:


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>







KISSY 库 demo

标签:

原文地址:http://www.cnblogs.com/bhlsheji/p/5130843.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!