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. js实现表格的选中一行-------Day58

    最開始想很多其它的用js来动态操作表格,是由于在应用了easyUI之后,发现直接写一个<table id="tt"></table>,这就够了,界面里面就剩 ...

  2. JSP的学习（1）——基本知识与底层原理

    通过之前的学习,我们已经对Servlet有所了解,现在我们先来学习JSP,当能使用JSP进行友好的页面显示之后,再回去学习Servlet的其他高级特性会将整个学习很好的融入进来. JSP,即Java ...

  3. [SVN] 分支同步、合入主干操作分享

    冲突的解决原则 不是自己修改的地方就使用主干的. 需要特别注意的是: 分支同步主干时,远端(theirs)是主干,本地(mine/working)的是分支: 分支合入主干时,本地(mine/worki ...

  4. c#中，DataTable 过滤重复行

    虽然网上有很多DataTable过滤重复行的方法,但是本菜还是认为自己写的这个方法最靠谱,这里的参数是传递的DataTable值,返回的是一个已经过滤相同字段StuId,ExamNum的DataTab ...

  5. 基于visual Studio2013解决面试题之0308Fibonacci数列

     题目

  6. js之checkbox的代码全选/全不选，使用id获取元素，而不是name

    每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...

  7. SQL 事务及实例演示

    简介 事务,英文名称是transaction.是在对数据库进行管理操作过程中一个逻辑单位,由有限的操作序列构成. 其实这个概念很好懂,简单理解就是:事务就是在使用数据库中的一个操作,由一些操作放到一起 ...

  8. win7+Powerpoint2007下设置演讲者视图，两步搞定

    步骤1: 步骤2: 这样,你就可以对着ppt的备注讲解了,且用户看不到你的备注以及你的电脑桌面.cool!

  9. Delphi访问活动目录

    活动目录Active Directory是用于Windows Server的目录服务,它存储着网络上各种对象的有关信息,并使该信息易于管理员和用户查找及使用.Active Directory使用结构化 ...

  10. SQL--存储过程+触发器 对比！

    一.存储过程 一:存储过程:存储过程是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库中. 可以用存储过程名字和参数来调用存储过程,这样可以避免代码重复出现,用起来也方便. 例:    下面 ...