dive into kissy
Post on 12-Sep-2014
3.086 views
Embed Size (px)
DESCRIPTION
dive into kissyTRANSCRIPT
-
DIVE INTO KISSYKISSY
-
http://jayli.github.com
-
An Enjoyable JavaScript Library
-
YUI bug jQuery OO Mootools ExtJs PV
WhyKISSY
-
KISSY
http://ued.taobao.com
-
http://github.com/kissyteam/kissyKISSY on Github
-
Seed
-
1.1.6 http://a.tbcdn.cn/s/kissy/1.1.6/kissy-min.js
-
KISSY.ready(function(S) {
});
Kissy
-
KISSY.use(core, function(S) {/* sandbox */
});
-
KISSY.use(core,sizzle, function(S) {/* core *//* sizzle sizzle.js */
});
-
core lang/dom/eventsizzle
datalazyload flash flash
switchable Tab//suggest overlay
imagezoom calendar
-
//KISSY.add({
name: calendar,path: calendar-pkg-min.js,requires: [core]
});//KISSY.use(calendar, function(S) {
new S.Calendar(#id);});
-
KISSY.add(my-mod, function(S) {
/* */}).ready(function(S){
/* */});
-
KISSY.use(core, function(S) {
/* */});KISSY.ready(function(S){
/* */});
-
KISSY
PageLogicApps
ModuleModule
Module
Module Module
-
//KISSYTShopKISSY.app(TShop);//TShop.add(mod, function (TS){ });//TShop.use(mod, function (TS){ });
-
Core
-
Seed
Core
kissy-min.js
-
ua dom/event Dom/Event
node Dom/Eventajax Ajax
cookie Cookiejson Jsonanim
attribute base Kissy
-
KISSY.ready(function (S){ //S.UAS.log(S.UA);
});
-
S.UA. S.UA.se360 360
S.UA.maxthon S.UA.tt
S.UA.theworld S.UA.sougou
-
KISSY.use(core, function(S) {/* */var node = S.one(.className);/* */var nodelist = S.all(.className);
});
Node
-
DomKISSY.use(core, function(S) {
var elem = S.get(#id); //
S.DOM.css(elem,color,red);S.DOM.text(elem,hello,kissy!);
});
-
#idtag.cls#id tag#id .clstag.cls#id tag.cls
KISSY
-
sizzleKISSY.use(core,sizzle, function(S) {
/* */});
-
KISSY.use(core, function(S) {/* */S.one('#test').parent()
.next()
.html('new paragraph')
.appendTo('#test2')
.on('click', function(ev) { alert(this.text());
});});
Node
-
KISSY.use(core, function(S) {/* */var node = S.one(.className);/* */var nodelist = S.all(.className);
// DOMElementalert(node[0].nodeType); alert(nodelist[0].nodeType);
});
Node/NodeList
-
KISSY.use(core, function(S) {var nodelist = S.all(.className);// NodeList alert(nodelist.length);// NodeListnodelist.each(function(node,i){
//node//i
});});
NodeList
-
KISSY.use(core, function(S) {
var nodelist = S.all(.className);nodelist.on(click,function (e){
//e: //e.target: node//this: nodelist e.preventDefault(); //
});});
-
hasClass addClass removeClasstoggleClass attr text val css width height offset parent removenext prev children contains append appendTo on detach
Node/NodeList
http://kissyteam.github.com/kissy/docs/node/index.html
-
CookieKISSY.use(core, function(S) {
//cookieS.Cookie.get(key);//cookieS.Cookie.set(key,value);
});
-
AjaxKISSY.use(core, function(S) {
S.IO.get(url,function(data){//get callback exec here
});S.IO.post(url,function(data){
//post callback exec here});
});
-
JSONKISSY.use(core, function(S) {
//objectvar str = S.JSON.stringify({
a:1});//objectvar obj = S.JSON.parse('{"a":1}');
});
-
Utilities
-
#id tag.class CSS
Sizzle Sizzle CSS
Selector
-
Widgets
-
http://kissyteam.github.com/kissy/docs/index.html
Docs
-
http://github.com/kissyteam/kissy
-
Dive into kissy 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46