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的更多相关文章

  1. AngularJS 中文资料+工具+库+Demo 大搜集

    中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html   翻译的 ...

  2. kissy延迟加载demo

    <!doctype html><html><head>    <meta charset="gbk"/>    <title& ...

  3. DIOCP3-数据库DEMO

    socket-Coder\DataModuleDEMO\   本DEMO演示数据库的简单使用,其他功能需要自己扩展.   将工程的输出路径设置到socket-Coder\DataModuleDEMO\ ...

  4. linux 静态链接库demo

    目录结构 ./main.c        #include<stdio.h> #include "./lib/jtlib1.h" int main() {     pr ...

  5. Grunt-Kmc基于KISSY项目打包

    Grunt-Kmc基于KISSY项目打包 1. Grunt-Kmc 是基于nodejs开发的,所以未安装nodeJS,先需要安装nodejs.安装步骤如下:        1. 下载安装文件,下载地址 ...

  6. 自己总结的一些android公共库

    本文主要介绍自己在android开发中总结的一些公共库,目前包括下拉刷新ListView.可以响应各个方向CompoundDrawables点击操作的TextView.图片缓存,不断更新,欢迎交流 ? ...

  7. 技巧：Linux 动态库与静态库制作及使用详解

    技巧:Linux 动态库与静态库制作及使用详解 标准库的三种连接方式及静态库制作与使用方法 Linux 应用开发通常要考虑三个问题,即:1)在 Linux 应用程序开发过程中遇到过标准库链接在不同 L ...

  8. XCL-Charts图表库中柱形图的同源风格切换介绍

    柱形图是被使用最多的图之中的一个,在写XCL-Charts这个Android图表库时,为它花费的时间相当多,不是由于有多难绘制,而是要在设计时怎样才干保证图基类能适应各种情况,能灵活满足足够多的需求, ...

  9. kissy小记

    <script> KISSY.add('demo',function(S ,require, exports, module){ var Node = require('node'); v ...

随机推荐

  1. Possible concurrency problem: Replicated version id X matches in-memory version for session ...

    The message basically is saying that a replicated session is overriding an existing session in that ...

  2. LeetCode: LRU Cache [146]

    [题目] Design and implement a data structure for Least Recently Used (LRU) cache. It should support th ...

  3. hdu 1540 Tunnel Warfare(线段树区间统计)

    Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  4. OpenCV中遇到Microsoft C++ 异常 cv::Exception

    我在实现<OpenCV2计算机视觉编程手册>第2章 2.2 节 存取像素值 中的椒盐噪声例子中遇到的程序错误. 原始输入程序: #include <opencv2/core/core ...

  5. python学习——截图工具编写

    学习一门语言最好的方法便是实践,想要拿Python写一个截图工具,网上一搜资料果然已经很多,前辈们都已经做的很到位了.现在就一步步来学习一下: 首先学习截图整个桌面的方法,可以使用Python中的PI ...

  6. 怎样手势的判断android GestureDetector在android开发中

    import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view. ...

  7. 美化 - DropDownList控件

    地址:http://www.baidufe.com/component/dropdownlist/index.html 效果: 引用JS文件: <link href="Js/DropD ...

  8. 一次完整的HTTP请求所经历的7个步骤（前三步是浏览器工作，后四步是服务器工作）

    HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1. 建立TCP连接在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连 ...

  9. Jsp中使用数据库连接池.

    原文 Jsp中使用数据库连接池. 1. 在tomcat服务器目录下面的conf中找到一个叫Context.xml的配置文件,在其中加入以下代码 <Resource name="jdbc ...

  10. Swift - 触摸事件（点击，移动，抬起等）说明及用例

    在iOS开发中,UIGestureRecognizer可以方便的响应处理手势事件. 而如果要想更精细的处理,我们还需要借助touchesBegan,touchesMoved,touchesEnded等 ...