kissy dpl-practice
Post on 12-Sep-2014
710 views
Embed Size (px)
DESCRIPTION
TRANSCRIPT
-
KISSY DPL Practice
-
Previous
KISSY Component API Design
Why
How
Principle
-
Introduction
KISSY DPL = Bootstrap + KISSY CSS
KISSY CSS
ks-inline-block ks-clear
-
Less
KISSY DPL
-
LESS
-
LESS
LESS extends CSS with dynamic behavior such as:
variables
mixins
operations
functions.
-
LESS
Variables
-
LESS
Mixins
-
LESS
Operation
-
LESS
Functions
-
KISSY DPL
-
KISSY DPL
Structure
-
Base
s/kissy/1.3.0/css/dpl/base.css
-
css reset
src/css/src/reset.css
with a reset style sheet, we can make that default look more consistent across browsers, and thus spend less time fighting with browser defaults.
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
-
css reset
Font
-
cssreset
ul/ol
Margin? Padding?
-
reset-context
reset under specified context
-
grids
fixed
-
grids
fluid
-
Fly-swing
Html
Css
30px 10px
-
fly-swing
demo
-
Common
Commonly used css class. ks-clear
Ks-inline-block
ks-hidden
ks-shown
ks-invisible
ks-visible
ks-hide-text
ks-center-block
ks-text-overflow
-
Complex ui
-
Overlay
s/kissy/1.3.0/overlay/assets/dpl.css
-
dialog
-
popup
-
tooltip
-
Button
s/kissy/1.3.0/button/assets/dpl.css
-
button
Style
Ks-button
ks-button ks-button-primary
ks-button ks-button-info
ks-button ks-button-success
ks-button ks-button-warning
ks-button ks-button-danger
ks-button ks-button-inverse
-
button
Size
ks-button-large
ks-button-small
ks-button-mini
disabled
Ks-button-disabled
-
button
Button group
ks-button-group
leftmiddleright
-
Menu
Menu/assets/dpl.css
-
menu
ks-menu
ks-menuitem
ks-submenu-arrow
submenu
alone
-
Checkable menu
ks-menuitem-checkbox
ks-menuitem-checked
checkable menuitem
-
Menubutton
Menubutton/assets/dpl.css
-
menubutton
menubutton = menu + button
.ks-menu-button
style
primary, info .
-
menubutton
Size
Large, small, mini
-
split-button
Split-button/assets/dpl.css
-
Split-button
Split-button = button + menubutton
.ks-split-button
Style
Primary, info
-
Split-button
Size
Large, small, mini
-
Split-button
Menu position
new SplitButton({
render:"#para2",
button:{
xclass:'button',
content:'action'
},
alignWithEl: false,
menuButton:{
xclass:'menu-button',
matchElWidth: false,
menu:{
xclass:'popupmenu',
children:[
{
xclass:'menuitem',
content:'some action'
},
{
xclass:'menuitem',
content:'more action'
}
]}}
}).render();
-
toolbar
toolbar/assets/dpl.css
-
toolbar
var t = new Toolbar({
render:"#container",
children:[ {
content:"menu-button",
collapseOnClick:true,
xclass:'menu-button
},{
content:button',
xclass:'button'
}]}).render();
-
combobox
combobox/assets/dpl.css
-
More
-
Simple ui
-
table
css/dpl/tables.css
-
table
.table
DPL table
-
table
.table-striped
ie>9
-
table
.table-border
-
table
.table-condensed
-
icons
css/dpl/icons.css
-
icons
Icons from Glyphicons
.icon-search .icon-ok
-
Labels
Css/dpl/labels.css
-
labels
.label, .label-success
-
badges
css/dpl/badges.css
-
badge
Badge
.badge .badge-info
-
form
css/dpl/forms.css
-
.form-vertical
-
.form-search
-
.form-inline
-
.form-horizontal
-
.control-group .error .warning .success
-
.input-prepend .add-on
input-append .add-on
-
More
-
Refer
http://lesscss.org/
http://twitter.github.com/bootstrap/
http://docs.kissyui.com/kissy/src/css/demo.html
-
Next .
Using KISSY Auto-Combo