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. SRM 583 Div II Level Three：GameOnABoard，Dijkstra最短路径算法

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12556 用Dijkstra实现,之前用Floyd算法写了一个, ...

  2. 网页class命名规范

    CSS样式命名整理 页面结构 容器: container/wrap 总体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:nav 側栏:si ...

  3. 使用ThinkPHP+Uploadify实现图片上传功能

    首先,将下载的Uploadify压缩包解压放到公共文件夹内.实现代码如下: 前台html部分: <script src="/uploadify/jquery.min.js" ...

  4. mysqldump --flush-logs

    <pre name="code" class="html"><pre name="code" class="ht ...

  5. Handler和HandlerThread

    1.什么是Handler? SDK中关于Handler的说明例如以下: A Handler allows you to sendand process Messageand Runnable obje ...

  6. 百度搜索结果页url参数详解

    在百度首页输入任意关键词搜索之后,我们跳转到搜索结果页面,在浏览器的网址栏我们可以看到很长的一串url地址.那么,你真的了解这一串url的含义吗? s?:搜索 百度搜索结果页使用了重定向,因此我们看到 ...

  7. [C#基础] 数据类型

    预定义类型 C#提供了16种预定义类型,其中包括13种简单类型和3种非简单类型. 预定义的简单类型包括以下3种: 11种数值类型 不同长度有符号和无符号的整数类型(8种) 浮点数类型float和dou ...

  8. Linux 多线程串口通信

    大概流程就是打开一个串口.然后进行串口设置.开启二个线程,一个线程写数据,另一个线程读数据. 代码如下: #include <stdio.h> #include <stdlib.h& ...

  9. linux教程之一

    相信不少想学习linux的新手们正愁不知道看什么linux学习教程好,下面小编给大家收集和整理了几点比较重要的教程,供大家学习,如需想学习更多的话,可到wdlinux学堂寻找更多教程. 1. 忘记my ...

  10. CSS 文本框里添加按钮的实现

    有很多人做界面会经常发现设计师设计出这样的界面: 咋一看是一个文本框里加了一个按钮,经过谷歌之后,未发现在文本框里可以添加按钮. 但可以通过div来实现它. 我的做法是先做一个大小的div,然后用带里 ...