Kissy dpl-practice
-
date post
12-Sep-2014 -
Category
Technology
-
view
718 -
download
0
description
Transcript of Kissy dpl-practice
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
<div class="ks-button-group"><div class="ks-button">left</div><div class="ks-button">middle</div><div class="ks-button">right</div>
</div>
• Menu
• Menu/assets/dpl.css
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>
Checkable menu
• ks-menuitem-checkbox
• ks-menuitem-checked
<div class="ks-menuitemks-menuitem-checked"><div class="ks-menuitem-checkbox"></div>checkable menuitem</div>
• 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