KISSY 库 demo
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的更多相关文章
- AngularJS 中文资料+工具+库+Demo 大搜集
中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的 ...
- kissy延迟加载demo
<!doctype html><html><head> <meta charset="gbk"/> <title& ...
- DIOCP3-数据库DEMO
socket-Coder\DataModuleDEMO\ 本DEMO演示数据库的简单使用,其他功能需要自己扩展. 将工程的输出路径设置到socket-Coder\DataModuleDEMO\ ...
- linux 静态链接库demo
目录结构 ./main.c #include<stdio.h> #include "./lib/jtlib1.h" int main() { pr ...
- Grunt-Kmc基于KISSY项目打包
Grunt-Kmc基于KISSY项目打包 1. Grunt-Kmc 是基于nodejs开发的,所以未安装nodeJS,先需要安装nodejs.安装步骤如下: 1. 下载安装文件,下载地址 ...
- 自己总结的一些android公共库
本文主要介绍自己在android开发中总结的一些公共库,目前包括下拉刷新ListView.可以响应各个方向CompoundDrawables点击操作的TextView.图片缓存,不断更新,欢迎交流 ? ...
- 技巧:Linux 动态库与静态库制作及使用详解
技巧:Linux 动态库与静态库制作及使用详解 标准库的三种连接方式及静态库制作与使用方法 Linux 应用开发通常要考虑三个问题,即:1)在 Linux 应用程序开发过程中遇到过标准库链接在不同 L ...
- XCL-Charts图表库中柱形图的同源风格切换介绍
柱形图是被使用最多的图之中的一个,在写XCL-Charts这个Android图表库时,为它花费的时间相当多,不是由于有多难绘制,而是要在设计时怎样才干保证图基类能适应各种情况,能灵活满足足够多的需求, ...
- kissy小记
<script> KISSY.add('demo',function(S ,require, exports, module){ var Node = require('node'); v ...
随机推荐
- python学习——截图工具编写
学习一门语言最好的方法便是实践,想要拿Python写一个截图工具,网上一搜资料果然已经很多,前辈们都已经做的很到位了.现在就一步步来学习一下: 首先学习截图整个桌面的方法,可以使用Python中的PI ...
- webdynpro tree控件使用
1. 首先创建一个TREE控件 2. 在Tree下面创建一个TREE NODE TYPE ,node type 是可以继续展开的,而Item type是无法展开的. 3. 创建node.,下面 ...
- RapidCRC : Home
RapidCRC : Home What is RapidCRC? RapidCRC is a tool for windows for checking and creating CRC32 a ...
- Bigcommerce:安装的出错解决方案
我们在本地安装时报错了,具体如下: 1. The database details you entered are incorrect: You have an error in your SQL s ...
- hdu4847 Wow! Such Doge!(简单题+坑爹的输入)
转载请注明出处:http://blog.csdn.net/u012860063?viewmode=contents 题目链接:http://acm.hdu.edu.cn/showproblem.php ...
- U3D——Unity3D的脚本-script入门
Unity3D的基本操作非常easy就能掌握了,接下来就是游戏系统的核心部分:脚本. 什么是Script(脚本)?简而言之,就是使用代码来运行一系列动作命令的特殊文本,它须要编译器来从新解读.U ...
- Linux系统管理员必备的监控工具(88款)
随着互联网行业的不断发展,各种监控工具多得不可胜数.这里列出网上最全的监控工具.让你可以拥有超过80种方式来管理你的机器.在本文中,我们主要包括以下方面: 命令行工具 网络相关内容 系统相关的监控工具 ...
- 一场刺激的游戏——很文艺的山东省第四届ACM赛总结(菜鸟版)
人生就像一个个节点,节点中或许有成功,失败,满足,遗憾,但是只要它是不可复制的,在日后,便是美好. ...
- 地大邀请赛d
Problem D: Tetrahedron Inequality Time Limit: 1 Sec Memory Limit: 128 MB Submit: 15 Solved: 3 [ ...
- 忽然想到:QProcess的Read功能太强,如果有什么搞不定的,可以调用外部程序 good
这样就可以用其它语言来无限扩展它的功能了,比如golang,比如Delphi