dive into kissy

Click here to load reader

Post on 12-Sep-2014

3.085 views

Category:

Technology

11 download

Embed Size (px)

DESCRIPTION

dive into kissy

TRANSCRIPT

  • 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

  • [email protected]

    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