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. javascript json格式解析方法

    json.parse用于从一个字符串中解析出json对象 stringify()用于从一个对象解析出字符串 var dataObj = eval("("+json+")& ...

  2. [置顶] JSP分页,使用Hibernate+mysql

    此代码为博主参考巴巴运动网源码所得,大部分一样,略有修改,在这里分享给大家,也方便自己以后写代码直接copy,看网上很多分页代码JSP里是用JAVA代码,博主原来也是这样,看到源码了解了JSTL,建议 ...

  3. JAVA Useful Program(1)

    public static void main(String[] args){       //字符串有整型的相互转换          String str=String.valueOf(123); ...

  4. Android API中被忽略的几个函数接口

    1. MotionEvent的几个函数 下面的方法都支持多点触摸,即可以对单个触摸点调用下面的方法 1.1 getPressure() 这个api 可以获取到手指触摸屏幕时候的压力,但是需要硬件和驱动 ...

  5. HDU 5045(Contest-费用流)[template:费用流]

    Contest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submi ...

  6. CPU 球迷助威清理灰尘图形的全过程

    主机因为使用时间长的电源风扇,风扇轴承石油枯竭,导致拒绝或不转的风扇转速,热量使电源不能得到有效排除,往往会造成电脑死机,有几种方法来解决. 单省钱的办法例如以下: 1.把电源从主机上拆下,例如以下图 ...

  7. J2SE学习小结

    开始接触Java的学习,Java 2 Standard Edition为Java2平台的标准版,其包括了构成Java语言核心的类,此番学习算是学习了Java体系中的基础部分. 学习框架大致整理如下: ...

  8. Jar包转成Dll的方式(带嵌套的jar也能做) （转）

    研究很好几天,终于成功了.因为写了一个Java的项目,现在要求要改写成C#版本的.但是其中用到了svnkit,svnkit是java平台的.改写成C#的话,要使用SharpSVN,但是SharpSVN ...

  9. 虚幻4随笔4 从project開始

     前文说到UE3開始.虚幻就使用了UnrealBuildTool(下面简称UBT)来编译和生成代码. 为什么这么做而不是使用VS是非常好理解的:由于VS跨平台会比較麻烦.像虚幻这样体量的proje ...

  10. jQuery遍历函数

    jQuery遍历函数包含了用于筛选.查找和串联元素的方法. .add():将元素加入到匹配元素的集合中. .andSelf():把堆栈中之前的元素集加入到当前集合中. .children():获得匹配 ...