• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Kissy dpl-practice
 

Kissy dpl-practice

on

  • 645 views

 

Statistics

Views

Total Views
645
Views on SlideShare
645
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Kissy dpl-practice Kissy dpl-practice Presentation Transcript

    • KISSY DPL Practice yiminghe@gmail.com dxq613@gmail.com
    • 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/0 4/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 new SplitButton({ render:"#para2",• Menu position 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
    • toolbarvar 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