Download - Kissy dpl-practice

Transcript
Page 2: Kissy dpl-practice

Previous

• KISSY Component API Design

– Why

– How

– Principle

Page 3: Kissy dpl-practice

Introduction

• KISSY DPL = Bootstrap + KISSY CSS

– KISSY CSS

• 双飞翼布局

– ks-inline-block ks-clear …

Page 4: Kissy dpl-practice

• Less

• KISSY DPL

Page 5: Kissy dpl-practice

• LESS

Page 6: Kissy dpl-practice

LESS

• LESS extends CSS with dynamic behavior such as:

– variables

– mixins

– operations

– functions.

Page 7: Kissy dpl-practice

LESS

• Variables

Page 8: Kissy dpl-practice

LESS

• Mixins

Page 9: Kissy dpl-practice

LESS

• Operation

Page 10: Kissy dpl-practice

LESS

• Functions

Page 11: Kissy dpl-practice

• KISSY DPL

Page 12: Kissy dpl-practice

KISSY DPL

• Structure

Page 13: Kissy dpl-practice

• Base

• s/kissy/1.3.0/css/dpl/base.css

Page 14: Kissy dpl-practice

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/

Page 15: Kissy dpl-practice

css reset

• Font

Page 16: Kissy dpl-practice

cssreset

• ul/ol

– Margin? Padding?

Page 17: Kissy dpl-practice

reset-context

• reset under specified context

Page 18: Kissy dpl-practice

grids

• fixed

Page 19: Kissy dpl-practice

grids

• fluid

Page 20: Kissy dpl-practice

Fly-swing

• 双飞翼布局– Html 固定

– Css 绝对布局

– 栅格 30px,间隙 10px

Page 21: Kissy dpl-practice

fly-swing

• demo

Page 22: Kissy dpl-practice

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

Page 23: Kissy dpl-practice

• Complex ui

Page 24: Kissy dpl-practice

• Overlay

• s/kissy/1.3.0/overlay/assets/dpl.css

Page 25: Kissy dpl-practice

dialog

Page 26: Kissy dpl-practice

popup

Page 27: Kissy dpl-practice

tooltip

Page 28: Kissy dpl-practice

• Button

• s/kissy/1.3.0/button/assets/dpl.css

Page 29: Kissy dpl-practice

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

Page 30: Kissy dpl-practice

button

• Size

– ks-button-large

– ks-button-small

– ks-button-mini

• disabled

– Ks-button-disabled

Page 31: Kissy dpl-practice

button

• Button group

– ks-button-group

<div class="ks-button-group"><div class="ks-button">left</div><div class="ks-button">middle</div><div class="ks-button">right</div>

</div>

Page 32: Kissy dpl-practice

• Menu

• Menu/assets/dpl.css

Page 33: Kissy dpl-practice

menu

• ks-menu

• ks-menuitem

• ks-submenu-arrow

<div class="ks-menu"><div class="ks-submenu ks-menuitem"><span class="ks-menuitem-content">submenu</span><span class="ks-submenu-arrow">►</span></div><div class="ks-menuitem">alone</div></div>

Page 34: Kissy dpl-practice

Checkable menu

• ks-menuitem-checkbox

• ks-menuitem-checked

<div class="ks-menuitemks-menuitem-checked"><div class="ks-menuitem-checkbox"></div>checkable menuitem</div>

Page 35: Kissy dpl-practice

• Menubutton

• Menubutton/assets/dpl.css

Page 36: Kissy dpl-practice

menubutton

• menubutton = menu + button

• .ks-menu-button

• style

– primary, info ….

Page 37: Kissy dpl-practice

menubutton

• Size

– Large, small, mini

Page 38: Kissy dpl-practice

• split-button

• Split-button/assets/dpl.css

Page 39: Kissy dpl-practice

Split-button

• Split-button = button + menubutton

• .ks-split-button

• Style

– Primary, info …

Page 40: Kissy dpl-practice

Split-button

• Size

– Large, small, mini

Page 41: Kissy dpl-practice

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

Page 42: Kissy dpl-practice

• toolbar

• toolbar/assets/dpl.css

Page 43: Kissy dpl-practice

toolbar

var t = new Toolbar({

render:"#container",

children:[ {

content:"menu-button",

collapseOnClick:true,

xclass:'menu-button‘

},{

content:‘button',

xclass:'button'

}]}).render();

Page 44: Kissy dpl-practice

• combobox

• combobox/assets/dpl.css

Page 45: Kissy dpl-practice
Page 46: Kissy dpl-practice

• More …

Page 47: Kissy dpl-practice

• Simple ui

Page 48: Kissy dpl-practice

• table

• css/dpl/tables.css

Page 49: Kissy dpl-practice

table

• .table

– 表格默认的样式仅有一些边框来保证表格的可读性和结构性,DPL中 table 样式是必须的。

Page 50: Kissy dpl-practice

table

• .table-striped

– 奇偶行背景色区分

– ie>9

Page 51: Kissy dpl-practice

table

• .table-border

– 给整个表格添加边框,同时添加圆角美化表格的内容。

Page 52: Kissy dpl-practice

table

• .table-condensed

– 更紧凑的表格

Page 53: Kissy dpl-practice

• icons

• css/dpl/icons.css

Page 54: Kissy dpl-practice

icons

• Icons from Glyphicons

– .icon-search .icon-ok

Page 55: Kissy dpl-practice

• Labels

• Css/dpl/labels.css

Page 56: Kissy dpl-practice

labels

• .label, .label-success

Page 57: Kissy dpl-practice

• badges

• css/dpl/badges.css

Page 58: Kissy dpl-practice

badge

• Badge

– 数字指示用于未读消息数目等场景

– .badge .badge-info

Page 59: Kissy dpl-practice

• form

• css/dpl/forms.css

Page 60: Kissy dpl-practice

基础表单

• .form-vertical

Page 61: Kissy dpl-practice

搜索表单

• .form-search

Page 62: Kissy dpl-practice

内联表单

• .form-inline

Page 63: Kissy dpl-practice

水平表单

• .form-horizontal

Page 64: Kissy dpl-practice

表单状态

• .control-group .error .warning .success

Page 65: Kissy dpl-practice

扩展表单

• .input-prepend .add-on

• input-append .add-on

Page 66: Kissy dpl-practice

• More …

Page 67: Kissy dpl-practice

Refer

• http://lesscss.org/

• http://twitter.github.com/bootstrap/

• http://docs.kissyui.com/kissy/src/css/demo.html

Page 68: Kissy dpl-practice

Next ….

• Using KISSY Auto-Combo


Top Related