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. 使用JDBC调用数据库的存储过程

    本篇讲述如何使用JDBC来调用MySQL数据库中的存储过程.建议在学习如何使用JDBC调用存储过程前,请先了解如何在数据库中使用存储过程. 存储过程是指在数据库系统中,一组为了完成特定功能的SQL语句 ...

  2. Problem E: Erratic Ants

    这个题没过……!题意:小蚂蚁向四周走,让你在他走过的路中寻找最短路,其中可以反向主要思路:建立想对应的图,寻找最短路径,其中错了好多次,到最后时间没过(1.没有考录反向2.没有考虑走过的路要标记……! ...

  3. 将n进制的数组压缩成字符串（0-9 a-z）同一时候解压

    比如一个3进制的数组: [1 1 2 2 2 0 0] 用一个字符串表示... 此类题目要明白两点: 1. 打表:用数组下标索引字符.同一时候注意假设从字符相应回数字: int index = (st ...

  4. Java中ArrayList和LinkedList差别

    一般大家都知道ArrayList和LinkedList的大致差别: 1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.  2.对于随机訪问get和set.A ...

  5. 积累的VC编程小技巧之按钮

    1.资源种创建的控件,对其属性的动态控制: 在对话框类的头文件里创建所要改变属性的控件的对象,如要改变一个Button(其ID为IDC_MyButton)的属性,则需创建Cbutton的对象m_but ...

  6. 【Demo 0009】表视图控制器

    本章学习要点:       1.  掌握表视图控制器结构;       2.  掌握表视图控制器的基本使用;       3.  掌握表视图表格的基本使用:       4.  掌握自定义表视图表格及 ...

  7. RobotFrameWork（十一）AutoItLibrary测试库在win7（64bit）下安装及简单使用

    最近安装AutoItLibrary,发现在win7 x64下无法安装成功,后来经过定位,发现是3rdPartyTools\AutoIt目录下面AutoItX3.dll的问题.因为AutoItX3.dl ...

  8. -force_load

    Crash Log: Last Exception Backtrace: 0   CoreFoundation                 0x2f087f06 __exceptionPrepro ...

  9. 硬盘重装Ubuntu12.04的感受

    好久没更blog了,最近这两天系统也出了问题,win7蓝屏,ubuntu进不去-.后来win7整好了,ubuntu依旧顽固.用惯了linux,就不想在转到win7下面了,估计是习惯了各种敲命令的感觉吧 ...

  10. spring-framework-3.2.4.RELEASE 综合hibernate-release-4.3.5.Final一个错误Caused by: java.lang.NoClassDefFound

    LZ一体化的今天spring-framework-3.2.4.RELEASE 综合hibernate-release-4.3.5.Final一个错误Caused by: java.lang.NoCla ...