Kissy dpl-practice
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Kissy dpl-practice

on

  • 709 views

 

Statistics

Views

Total Views
709
Views on SlideShare
709
Embed Views
0

Actions

Likes
0
Downloads
5
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
  • 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 Presentation Transcript

  • 1. KISSY DPL Practice yiminghe@gmail.com dxq613@gmail.com
  • 2. Previous• KISSY Component API Design – Why – How – Principle
  • 3. Introduction• KISSY DPL = Bootstrap + KISSY CSS – KISSY CSS • 双飞翼布局 – ks-inline-block ks-clear …
  • 4. • Less• KISSY DPL
  • 5. • LESS
  • 6. LESS• LESS extends CSS with dynamic behavior such as: – variables – mixins – operations – functions.
  • 7. LESS• Variables
  • 8. LESS• Mixins
  • 9. LESS• Operation
  • 10. LESS• Functions
  • 11. • KISSY DPL
  • 12. KISSY DPL• Structure
  • 13. • Base• s/kissy/1.3.0/css/dpl/base.css
  • 14. 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/
  • 15. css reset• Font
  • 16. cssreset• ul/ol – Margin? Padding?
  • 17. reset-context• reset under specified context
  • 18. grids• fixed
  • 19. grids• fluid
  • 20. Fly-swing• 双飞翼布局 – Html 固定 – Css 绝对布局 – 栅格 30px,间隙 10px
  • 21. fly-swing• demo
  • 22. 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
  • 23. • Complex ui
  • 24. • Overlay• s/kissy/1.3.0/overlay/assets/dpl.css
  • 25. dialog
  • 26. popup
  • 27. tooltip
  • 28. • Button• s/kissy/1.3.0/button/assets/dpl.css
  • 29. 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
  • 30. button• Size – ks-button-large – ks-button-small – ks-button-mini• disabled – Ks-button-disabled
  • 31. 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>
  • 32. • Menu• Menu/assets/dpl.css
  • 33. 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>
  • 34. Checkable menu• ks-menuitem-checkbox• ks-menuitem-checked<div class="ks-menuitemks-menuitem-checked"><div class="ks-menuitem-checkbox"></div>checkable menuitem</div>
  • 35. • Menubutton• Menubutton/assets/dpl.css
  • 36. menubutton• menubutton = menu + button• .ks-menu-button• style – primary, info ….
  • 37. menubutton• Size – Large, small, mini
  • 38. • split-button• Split-button/assets/dpl.css
  • 39. Split-button• Split-button = button + menubutton• .ks-split-button• Style – Primary, info …
  • 40. Split-button• Size – Large, small, mini
  • 41. 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();
  • 42. • toolbar• toolbar/assets/dpl.css
  • 43. toolbarvar t = new Toolbar({render:"#container",children:[ { content:"menu-button", collapseOnClick:true, xclass:menu-button‘ },{ content:‘button, xclass:button}]}).render();
  • 44. • combobox• combobox/assets/dpl.css
  • 45. • More …
  • 46. • Simple ui
  • 47. • table• css/dpl/tables.css
  • 48. table• .table – 表格默认的样式仅有一些边框来保证表格的可 读性和结构性,DPL中 table 样式是必须的。
  • 49. table• .table-striped – 奇偶行背景色区分 – ie>9
  • 50. table• .table-border – 给整个表格添加边框,同时添加圆角美化表格 的内容。
  • 51. table• .table-condensed – 更紧凑的表格
  • 52. • icons• css/dpl/icons.css
  • 53. icons• Icons from Glyphicons – .icon-search .icon-ok
  • 54. • Labels• Css/dpl/labels.css
  • 55. labels• .label, .label-success
  • 56. • badges• css/dpl/badges.css
  • 57. badge• Badge – 数字指示用于未读消息数目等场景 – .badge .badge-info
  • 58. • form• css/dpl/forms.css
  • 59. 基础表单• .form-vertical
  • 60. 搜索表单• .form-search
  • 61. 内联表单• .form-inline
  • 62. 水平表单• .form-horizontal
  • 63. 表单状态• .control-group .error .warning .success
  • 64. 扩展表单• .input-prepend .add-on• input-append .add-on
  • 65. • More …
  • 66. Refer• http://lesscss.org/• http://twitter.github.com/bootstrap/• http://docs.kissyui.com/kissy/src/css /demo.html
  • 67. Next ….• Using KISSY Auto-Combo