kissy for starter

&

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

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

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

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

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

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

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");

xhr.abort();

KISSY

headscript

overlay

Demo

Drag&Drop

switchable

resizeable

validation

Editor

gallery

KISSY

Page logic

Biz mod

Biz modKISSY mod

KISSY mod

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