kissy for starter
Post on 12-Sep-2014
1.228 views
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