KISSY 是由淘宝前端project师们发起创建的一个开源 JS 类库。
它遵循的原则是 小巧灵活、简洁有用、愉悦编码、快乐开发。

DEMO：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <script type="text/javascript" src="http://g.alicdn.com/kissy/k/1.4.7/seed-min.js"></script>
  5. </head>
  6.     <script type="text/javascript">
  7. KISSY.ready(function(S){
  8.     S.use('core',function(){
  9.         var Event = S.Event;
  10.  
  11. Event.on('#btn1','click',function(ev){
  12. 	//alert(S.one("#test1").siblings().item(1).html());
  13. //S.one(ev.target).siblings("button").item(1).toggle(0.3);
  14.  
  15. });
  16.  
  17. var anim = new S.Anim('#test2',{'color':'red','font-size':'19px','height':'30px'},4,S.easeInStrong);
  18.  
  19. Event.on('#btn1','click',function(evt){
  20.     anim.run();
  21. });
  22. Event.on('#btn2','click',function(evt){
  23.     anim.stop();
  24. });
  25. Event.on('#btn3','click',function(evt){
  26.     anim.stop(true);
  27. });
  28.  
  29. Event.add('button','mouseover mouseout mousedown',function(ev){
  30. 	if(ev.type == 'mouseover'){
  31. 		S.one(ev.target).text('鼠标划过');
  32.  //
  33. 		//S.DOM.addClass('button','demo3-over');
  34. 	}else if(ev.type == 'mouseout'){
  35. 		S.one(ev.target).text('鼠标移开');
  36.  //anim.stop();
  37. 		//S.DOM.removeClass('button','demo3-over');
  38. 	}else if(ev.type == 'mousedown'){
  39. 		S.one(ev.target).text('an zhu');
  40.  
  41.  	S.all("p").each(function(o,i){
  42.    	    // if(o.attr("id") == 'test1') alert(i);
  43.   	  });
  44. 	}
  45. })
  46.     });
  47.  
  48. })(KISSY);
  49. </script>
  50. </head>
  51. <body>
  52. <p id="test1">这是段落。</p>
  53. <p id="test2">这是还有一个段落。</p>
  54. <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
  55. <button id="btn1">设置文本</button>
  56. <button id="btn2">设置 HTML</button>
  57. <button id="btn3">设置值</button>
  58. </body>
  59. </html>
  60.  
  61. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  62. <!DOCTYPE html>
  63. <html>
  64. <head>
  65. <script type="text/javascript" src="http://g.alicdn.com/kissy/k/1.4.7/seed-min.js"></script>
  66. </head>
  67.     <script type="text/javascript">
  68. KISSY.ready(function(S){
  69. S.use('core',function(){
  70. S.all("p").each(function(o,i){
  71. S.one(o).attr('old',S.one(o).html());
  72. });
  73. S.all("p").on("mouseout mousedown mouseover",function(ev){
  74. var animate=new S.Anim(S.one(ev.currentTarget),{"color":"yellow","font-size":"22px","background-color":"purple"},14);
  75. if (ev.type=="mousedown"){
  76. S.one(ev.currentTarget).html('mousedown');
  77. animate.run();
  78.  
  79. }else if (ev.type=="mouseout"){
  80. S.one(ev.currentTarget).html(S.one(ev.target).attr('old'));
  81. animate.stop();
  82. }else if (ev.type=="mouseover"){
  83. S.one(ev.currentTarget).html('mouseover');
  84.  
  85. }
  86. });
  87.  
  88. S.one('#forOnInput').on("focus",function(ev){
  89. if(ev.target.value==S.one('#forOnInput').attr("defvalue")){
  90. S.one('#forOnInput').val("");
  91. }
  92. });
  93.  
  94. S.one('#forOnInput').on("input",function(ev){
  95. S.one('body').append("<p>"+S.one('#forOnInput').val().length+"</p>")
  96. });
  97.  
  98. S.one('#forOnInput').on("blur",function(ev){
  99. if(!S.one('#forOnInput').val()){S.one('#forOnInput').val(S.one('#forOnInput').attr("defvalue"));
  100. }
  101. });
  102.  
  103. });
  104. });
  105. </script>
  106. </head>
  107. <body>
  108.  
  109. <div>
  110. <p>我是居中t对齐的。</p>
  111. </div>
  112. <label>Name:</label><input type="text" id="forOnInput" defvalue="123456" value="123456"/>
  113.  
  114. <p><b>凝视：</b>IE 不支持 box-pack 和 box-align 属性。</p>
  115. <p>我是居y中对齐的。</p>
  116. </body>
  117. </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. Boost::asio io_service 实现分析

    io_service的作用 io_servie 实现了一个任务队列,这里的任务就是void(void)的函数.Io_servie最常用的两个接口是post和run,post向任务队列中投递任务,run ...

  2. Swift - 从ALAsset中获取照片的原图并转换成NSData

    ALAsset类代表相册中的每个资源文件,可以通过它获取照片的相关信息,及其对应的原图,全屏图,缩略图等. 当我们想通过一个照片的ALAsset对象,来获取这张照片的原图并将其转换成NSData数据, ...

  3. 译文：前端性能的重要性 The Importance of Frontend Performance

    欢迎訪问我的主页.最新的文章我会首先公布在个人主页上: http://blog.guaidm.com/shocky/ 原书下载地址:http://pan.baidu.com/s/1pJocRwB 在我 ...

  4. <转载>使用css让大图片不超过网页宽度

    让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度! 接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问 ...

  5. Java描述语言、国家和地理的类——Locale

    Locale类代表一个特定的地理.语言和国家环境.一个Locale的实例对象本身不会验证它代表的语言和国家地区信息是否正确,只是向一些对国家和语言.地理等比较敏感的类提供国家地区语言信息,这些类有Da ...

  6. 使用Material Design 创建App翻译系列----材料主题的使用(Using Material Theme)

    上一篇是使用Material Design 创建App翻译系列--開始学习篇,进入正题: 新的材料主题提供了下面内容: 1. 提供了同意设置颜色板的系统部件组件. 2. 为这些系统组件提供了触摸反馈动 ...

  7. 关于sizeof的笔试面试题具体解释

    原创Blog,转载请注明处处 http://blog.csdn.net/hello_hwc 注意:sizeof是编译期计算出结果的,这一点对后面的理解非常重要 一.关于结构体 先看下代码 #inclu ...

  8. SQL ---指令实例语句

    1 1 create database+数据库名字 创建数据库 2 2 create table+表的名字 创建表 3 表中的操作: 4 3 insert into 表名 (列名1,列名2··)val ...

  9. hdu 5090 Game with Pearls

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5090 题意:n个数,k,给n个数加上k的正倍数或者不加,问最后能不能凑成1 到 n的序列 题目分类:暴 ...

  10. Latin1的所有字符编码

    ISO-8859-1 (ISO Latin 1) Character Encoding Contents The characters at a glance Character codes and ...