zoukankan      html  css  js  c++  java
  • 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>







  • 相关阅读:
    杭电1827
    hdu 3118
    poj 2060
    hdu 2236
    poj 2226
    poj 1719
    poj 1466
    poj 3160
    骑士飞行棋笔记
    基础测试学习笔记
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/5130843.html
Copyright © 2011-2022 走看看