kissy for starter

Click here to load reader

Post on 12-Sep-2014

1.227 views

Category:

Technology

7 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • &

  • &

    KISSY

    KISSY

    KISSY

  • KISSY

    KISSY

    KISSY

  • Part1.KISSY

  • UI

    ...

    DOM

  • 1.

    2.

    3. API

    4. Widget/component

    5.

    6.

    7.

    8.

  • 1.

    2.

    1.

    2.

    3.

    4.

  • YUI

    1.

    2.

    3.

  • jquery

    1.

    2.

    3.

    4.

  • KISSY

  • KISSY

    API

    yui jquery

    JS

  • YUI-Like

    var DOM = KISSY.DOM;

    var el = DOM.get(#xx);

    DOM.css(el,width,100);

  • Jquery-Like

    var el = KISSY.all(#xx);

    el.css(width,100).

    parent(.x).

    end().

    css(height,200);

  • Part2.KISSY

  • Sub project

    Kissy-tools:

    Kissy-util:

    Kissy-dpl:

    Kissy-ajbridge: aj-js

    Kissy-nodejs: kissy on nodejs

  • Kissy tools

    http://docs.kissyui.com/other/third.html#

  • Kissy util

    http://docs.kissyui.com/other/third.html#

  • Kissy gallery

  • Kissy dpl

  • Kissy AJBridge

  • Part3.KISSY

  • KISSY.ready(function(S){

    var $ = S.all;$("hello world!")

    .css({color:"red"

    }).appendTo(document.body);

    })

  • seed dom event anim node ajax

  • seed

  • isArray/isDate/isFunction/isObject/isNumb

    er/isPlainObject

    each/map/reduce/filter

    inArray/indexOf/lastIndexOf/unique

    substitute/trim/formUnicode

    escapeHTML/unEscapeHTML/parseXML

    Later/buffer/throttle

  • mix

    merge.

    augmentprototype

    extend

    namespace

    log

    error

    guid id.

  • web

    ready

    globalEval/

    available

  • seedKISSY

    .

  • demo

    seed

  • AMD

  • KISSY.add(function(S,DOM){var d = DOM.get(#id);return {

    XX : YY};

    },{requires:[dom]

    });

  • KISSY.use(switchable,function(S, Switchable){var t = new Switchable({.});

    });

  • KISSY.config({packages:[

    {

    // name:"tc",

    // ?t=20110323, tag:"20130323",

    // , path:"../",

    // charset:"gbk"

    }]

    });

  • demo

    loader

  • DOM

  • DOMDocument Object ModelDOMW3CJavaScript HTML HTML DOM

    KISSYDOM

  • selector

    KISSY #id tag.class , 2/8 ,

    #id tag .cls #id tag #id .cls tag.cls #id tag.cls

  • selector

    // .KISSY.ready(function(S){

    var els= S.DOM.query(div");})

    // KISSY.ready(function(S){

    var el= S.DOM.get(div");})

  • sizzle

    KISSY.use(sizzle, function(S){var $ = S.all;$('[class^=test"]').hide();

    })

    http://www.codylindley.com/jqueryselectors/

  • class

    hasClass

    addClass

    removeClass

    replaceClass

    toggleClass

  • val:value .

    text:.innerText

    html: innerHTML.

    show:.

    hide:.

    toggle :

  • DOM

    parent.

    next

    prev

    siblings.

    children.

  • DOM

    width/height/.

    innerWidth/innerHeight:padding

    outerWidth/outerHeight:paddingmargin,border

    /

    scrollTop/scrollLeft

    scrollTop/scrollLeft.

    docHeight/docWidthdocument

    viewportHeight/viewportWidth

  • DOM

    insertBefore

    insertAfter

    append

    prepend

  • DOM /

    attrattributes hasAttr

    Propproperties hasProp

    data: removeData hasData

    http://javascript.info/tutorial/attributes-and-custom-properties

  • Style & css

    addStyleSheet cssText .

    style css

  • DOMKISSY.DOM

  • demo

    DOM

  • Event

  • function MyClass(){}

    KISSY.augment(MyClass,KISSY.EventTarget);

    var myObj = new MyClass();

    myObj.on(xx,function(){});

    myObj.fire(xx);

  • dom ,

    .

  • S.one(domNode).on(click,fn,context)

    obj.on(customEvent,fn,context)

  • Native event

    S.one(domNode).fire(click)

    Custom event

    obj.fire(customEvent)

  • submit/change @ie bubble, realtime fire

    focusin/out @non-ie

    mouseenter/leave @non-ie

    hashchange @ie

    mousewheel @firefox

    valuechange @all

  • EventKISSY.Event

  • Event

    demo

  • Anim

  • var anim = new KISSY.Anim('#test',{

    'width': '100px','left': '900px','opacity': '.5','font-size': '48px','color': '#FF3333'

    },

    5,//'bounceOut',//function(){

    alert('demo ');});

    anim.run();

  • Anim

    demo

  • Node dom , event , anim , Node .

    KISSY.all jquery $

    //var $ = KISSY.all;$("#test").show();

  • KISSY.all(".cls")

    .all("a")

    .css({"color":"red"})

    .end()

    .all("p")

    .hide();

  • KISSY.all('
  • node.height(300)

    .css({"color":"red"})

    .addClass("cls")

    .attr("data-value","test");

    Dom

  • node.on("click",fn);

    node.delegate("click","a",fn);

    node.detach("click");

    node.fire("click");

  • node.animate({left:"100px",top:"100px"});

    node.stop();

    node.stop(true);

    node.isRunning();

    node.stop(true,true,queueName);

    node.slideToggle();

    node.fadeToggle();

  • Kissy IO

  • KISSY.io({url : "getJson.htm",cache : false,type : "get",// "post"data : { x: 1},dataType : "json", // "text/html/xml"success : function(d){},error : function(_,reason){},complete : function(){}

    });

    XMLHttpRequest

  • KISSY.io.get("test.php",function(d){alert(d);

    });

    KISSY.io.post("test.php",{ x : 3},function(d){

    alert(d);},"json");

  • form

  • CORS

  • xhr.abort();

  • KISSY

    headscript

  • overlay

    Demo

  • Drag&Drop

  • switchable

  • resizeable

  • validation

  • mvc

  • Editor

  • gallery

  • KISSY

    Page logic

    Biz mod

    Biz modKISSY mod

    KISSY mod

  • Gtalk/[email protected] http://docs.kissyui.com