diff --git a/.gitignore b/.gitignore
index c070f3a43..5f5448a3a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
 /.idea/
 demo.js
-demo.css
\ No newline at end of file
+demo.css
+.DS_Store
diff --git a/Gruntfile.js b/Gruntfile.js
index 5824052d0..ab485ff64 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -73,7 +73,7 @@ module.exports = function (grunt) {
             },
 
             demoJs: {
-                src: ['demo/version.js', 'demo/app.js', 'demo/config.js', 'demo/js/**/*.js'],
+                src: ['demo/version.js', 'demo/config.js', 'demo/app.js', 'demo/js/**/*.js'],
                 dest: 'demo/dist/demo.js'
             },
             demoCss: {
@@ -143,7 +143,7 @@ module.exports = function (grunt) {
         },
         watch: {
             scripts: {
-                files: ['src/**/*.js', 'demo/js/**/*.js', 'demo/less/**/*.less'],
+                files: ['src/**/*.js', 'demo/js/**/*.js', 'demo/config.js', 'demo/less/**/*.less'],
                 tasks: ['less', 'concat'],
                 options: {
                     spanw: true,
diff --git a/demo/config.js b/demo/config.js
deleted file mode 100644
index 76aeb0eee..000000000
--- a/demo/config.js
+++ /dev/null
@@ -1,937 +0,0 @@
-/**
- * Created by User on 2017/3/21.
- */
-FINEUI = {};
-FINEUI.WIDGET = [{
-    id: -1,
-    text: "文本框",
-    isParent: true,
-    open: false
-}, {
-    id: 2,
-    pId: -1,
-    text: "文本框",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 1,
-    text: "树",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 7,
-    text: "表格",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 8,
-    text: "图表",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 3,
-    text: "日历",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 4,
-    text: "分页相关",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 5,
-    text: "tip提示",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 6,
-    text: "组合控件",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 9,
-    text: "选色控件",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 10,
-    text: "canvas绘图",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    id: 11,
-    text: "svg绘图",
-    isParent: true,
-    open: false
-}, {
-    pId: -1,
-    text: "bi.message",
-    type: "message"
-}, {
-    pId: -1,
-    text: "bi.button",
-    type: "button"
-}, {
-    pId: -1,
-    text: "bi.multifile",
-    type: "multifile"
-}, {
-    pId: -1,
-    text: "bi.label",
-    type: "label"
-}, {
-    pId: 2,
-    text: "bi.editor",
-    type: "editor"
-}, {
-    pId: 2,
-    text: "bi.state_editor",
-    type: "state_editor"
-}, {
-    pId: 2,
-    text: "bi.record_editor",
-    type: "record_editor"
-}, {
-    pId: 2,
-    text: "bi.sign_editor",
-    type: "sign_editor"
-}, {
-    pId: 2,
-    text: "bi.shelter_editor",
-    type: "shelter_editor"
-}, {
-    pId: 2,
-    text: "bi.code_editor",
-    type: "code_editor"
-}, {
-    pId: 2,
-    text: "bi.textareaeditor",
-    type: "textareaeditor"
-}, {
-    pId: 6,
-    text: "bi.combo",
-    type: "combo"
-}, {
-    pId: 6,
-    text: "bi.combo(各种位置)",
-    type: "combo2"
-}, {
-    pId: 6,
-    text: "bi.expander",
-    type: "expander"
-}, {
-    pId: 6,
-    text: "bi.switcher",
-    type: "switcher"
-}, {
-    pId: 6,
-    text: "bi.searcher",
-    type: "searcher"
-}, {
-    pId: 6,
-    text: "bi.bubble_combo",
-    type: "bubble_combo"
-}, {
-    pId: 1,
-    text: "bi.customtree",
-    type: "customtree"
-}, {
-    pId: 1,
-    text: "bi.tree",
-    type: "tree"
-}, {
-    pId: 1,
-    text: "bi.sync_tree",
-    type: "synctree"
-}, {
-    pId: 1,
-    text: "bi.part_tree",
-    type: "parttree"
-}, {
-    pId: 1,
-    text: "bi.display_tree",
-    type: "displaytree"
-}, {
-    pId: 1,
-    text: "bi.simple_tree",
-    type: "simpletree"
-}, {
-    pId: 1,
-    text: "bi.level_tree",
-    type: "leveltree"
-}, {
-    pId: 1,
-    text: "bi.branch_tree",
-    type: "branch_tree"
-}, {
-    pId: 1,
-    text: "bi.handstand_branch_tree",
-    type: "handstand_branch_tree"
-}, {
-    pId: 2,
-    text: "bi.formula",
-    type: "formula"
-}, {
-    pId: 9,
-    text: "bi.farbtastic",
-    type: "farbtastic"
-}, {
-    pId: 9,
-    text: "bi.color_picker",
-    type: "color_picker"
-}, {
-    pId: 9,
-    text: "bi.color_picker_editor",
-    type: "color_picker_editor"
-}, {
-    pId: 7,
-    text: "bi.table_view",
-    type: "table_view"
-}, {
-    pId: 7,
-    text: "bi.table_tree",
-    type: "tabletree"
-}, {
-    pId: 7,
-    text: "bi.layer_tree_table",
-    type: "layer_tree_table"
-}, {
-    pId: 7,
-    text: "bi.tabler",
-    type: "tabler"
-}, {
-    pId: 8,
-    text: "bi.chart",
-    type: "chart"
-}, {
-    pId: 8,
-    text: "charts",
-    type: "charts"
-}, {
-    pId: 5,
-    text: "bi.bubble",
-    type: "bubble"
-}, {
-    pId: 5,
-    text: "bi.toast",
-    type: "toast"
-}, {
-    pId: 5,
-    text: "bi.tooltip",
-    type: "tooltip"
-}, {
-    pId: 4,
-    text: "bi.tab",
-    type: "tab"
-}, {
-    pId: 4,
-    text: "bi.pager",
-    type: "pager"
-}, {
-    pId: 4,
-    text: "bi.loader",
-    type: "loader"
-}, {
-    pId: 4,
-    text: "bi.navigation",
-    type: "navigation"
-}, {
-    pId: 4,
-    text: "bi.scroll_view",
-    type: "scrollview"
-}, {
-    pId: 4,
-    text: "bi.number_pager",
-    type: "numberpager"
-}, {
-    pId: 4,
-    text: "bi.direction_pager",
-    type: "directionpager"
-}, {
-    pId: 4,
-    text: "bi.skip_pager",
-    type: "skippager"
-}, {
-    pId: 4,
-    text: "bi.all_pager",
-    type: "allpager"
-}, {
-    pId: 4,
-    text: "bi.lazyloader",
-    type: "lazy_loader"
-}, {
-    pId: 3,
-    text: "bi.calendar",
-    type: "calendar"
-}, {
-    pId: 3,
-    text: "bi.year_calendar",
-    type: "year_calendar"
-}, {
-    pId: 10,
-    text: "bi.canvas",
-    type: "canvas"
-}, {
-    pId: 10,
-    text: "bi.complex_canvas",
-    type: "complex_canvas"
-}, {
-    pId: 11,
-    text: "bi.svg",
-    type: "svg"
-}, {
-    text: "bi.zero_clip",
-    type: "zclip"
-}, {
-    text: "bi.grid_view",
-    type: "gridview"
-}, {
-    text: "bi.collection_view",
-    type: "collectionview"
-}, {
-    text: "bi.grid_table",
-    type: "gridtable"
-}];
-_Models.layout = [{
-    text: "bi.center_adapt",
-    type: "center_adapt"
-}, {
-    text: "bi.float_center_adapt",
-    type: "float_center_adapt"
-}, {
-    text: "bi.absolute_center_adapt",
-    type: "absolute_center_adapt"
-}, {
-    text: "bi.flex_center",
-    type: "flex_center"
-}, {
-    text: "bi.inline_center_adapt",
-    type: "inline_center_adapt"
-}, {
-    text: "bi.vertical_adapt",
-    type: "vertical_adapt"
-}, {
-    text: "bi.inline_vertical_adapt",
-    type: "inline_vertical_adapt"
-}, {
-    text: "bi.horizontal_adapt",
-    type: "horizontal_adapt"
-}, {
-    text: "bi.horizontal_auto",
-    type: "horizontal_auto"
-}, {
-    text: "bi.horizontal_float",
-    type: "horizontal_float"
-}, {
-    text: "bi.left_right_vertical_adapt",
-    type: "left_right_vertical_adapt"
-}, {
-    text: "bi.center",
-    type: "center"
-}, {
-    text: "bi.float_center",
-    type: "float_center"
-}, {
-    text: "bi.vertical",
-    type: "vertical"
-}, {
-    text: "bi.horizontal",
-    type: "horizontal"
-}, {
-    text: "bi.border",
-    type: "border"
-}, {
-    text: "bi.card",
-    type: "card"
-}, {
-    text: "bi.left, bi.right",
-    type: "flow"
-}, {
-    text: "bi.lattice",
-    type: "lattice"
-}, {
-    text: "bi.inline",
-    type: "inline"
-}, {
-    text: "bi.htape",
-    type: "htape"
-}, {
-    text: "bi.vtape",
-    type: "vtape"
-}, {
-    text: "bi.grid",
-    type: "grid"
-}, {
-    text: "bi.table",
-    type: "table"
-}, {
-    text: "bi.division",
-    type: "division"
-}, {
-    text: "bi.window",
-    type: "window"
-}, {
-    text: "bi.td",
-    type: "td"
-}];
-FINEUI.DETAIL = [{
-    id: -2,
-    text: "各种基础小控件"
-},{
-    pId: -2,
-    id: -1,
-    text: "各种基础小控件"
-}, {
-    pId: -2,
-    id: 1,
-    text: "文本框控件"
-}, {
-    pId: -2,
-    id: 12,
-    text: "下拉框控件(可测)"
-}, {
-    pId: -2,
-    id: 2,
-    text: "年份控件(可测)"
-}, {
-    pId: -2,
-    id: 3,
-    text: "月份控件(可测)"
-}, {
-    pId: -2,
-    id: 4,
-    text: "季度控件(可测)"
-}, {
-    pId: -2,
-    id: 5,
-    text: "简单日期控件(不参与测试)"
-}, {
-    pId: -2,
-    id: 6,
-    text: "复杂日期控件(可测)"
-}, {
-    pId: -2,
-    id: 7,
-    text: "下拉列表(可测)"
-}, {
-    pId: -2,
-    id: 8,
-    text: "选择字段列表(可测)"
-}, {
-    pId: -2,
-    id: 9,
-    text: "公式编辑器(可测)"
-}, {
-    id: 10,
-    pId: -2,
-    text: "数值区间控件(可测)"
-}, {
-    id: 11,
-    pId: -2,
-    text: "下拉复选框有确定按钮(已阅)"
-}, {
-    id: 13,
-    pId: -2,
-    text: "移动和复制到分组(可测)"
-}, {
-    id: 14,
-    pId: -2,
-    text: "单选下拉树(可测)"
-}, {
-    id: 23,
-    pId: -2,
-    text: "可选下拉树(可测)"
-}, {
-    id: 15,
-    pId: -2,
-    text: "提示对话框(可测)"
-}, {
-    id: 16,
-    pId: -2,
-    text: "复选下拉树(已阅)"
-}, {
-    pId: -2,
-    id: 17,
-    text: "时间区间控件"
-}, {
-    pId: -2,
-    id: 30,
-    text: "简单搜索控件"
-}, {
-    pId: -2,
-    id: 18,
-    text: "简单选择字段"
-}, {
-    pId: -2,
-    id: 19,
-    text: "过滤结构"
-}, {
-    pId: -2,
-    id: 20,
-    text: "选色控件"
-}, {
-    pId: -2,
-    id: 21,
-    text: "文本控件"
-}, {
-    pId: -2,
-    id: 22,
-    text: "路径选择"
-}, {
-    pId: -2,
-    id: 24,
-    text: "文件管理"
-}, {
-    pId: -2,
-    id: 25,
-    text: "表关联树"
-}, {
-    pId: -2,
-    id: 26,
-    text: "关联视图"
-}, {
-    pId: -2,
-    id: 27,
-    text: "表格"
-}, {
-    pId: -2,
-    id: 32,
-    text: "序号表格"
-}, {
-    pId: -2,
-    id: 28,
-    text: "图片组件&web组件"
-}, {
-    pId: -2,
-    id: 29,
-    text: "布局"
-}, {
-    pId: -2,
-    id: 31,
-    text: "详细图表"
-}, {
-    pId: -2,
-    id: 33,
-    text: "树标签"
-}, {
-    pId: -2,
-    id: 34,
-    text: "单值滑块"
-}, {
-    pId: -2,
-    id: 35,
-    text: "区间滑块"
-}, {
-    pId: -2,
-    id: 36,
-    text: "文本列表"
-}, {
-    pId: -2,
-    id: 37,
-    text: "树列表"
-}, {
-    pId: -2,
-    id: 38,
-    text: "日期面板"
-}, {
-    pId: -2,
-    id: 39,
-    text: "螺旋分析tab控件"
-}, {
-    pId: -2,
-    id: 40,
-    text: "数值微调器"
-},
-
-
-    {
-        pId: -1,
-        text: "各种通用按钮",
-        type: "buttons"
-    }, {
-        pId: -1,
-        text: "各种提示性信息",
-        type: "tips"
-    }, {
-        pId: -1,
-        text: "各种items",
-        type: "items"
-    }, {
-        pId: -1,
-        text: "各种节点node",
-        type: "nodes"
-    }, {
-        pId: -1,
-        text: "各种segment",
-        type: "segments"
-    }, {
-        pId: -1,
-        text: "各种面板",
-        type: "panes"
-    }, {
-        pId: -1,
-        text: "bi.loading_mask",
-        type: "loadingmask"
-    }, {
-        pId: -1,
-        text: "可以切换的树",
-        type: "switch_tree"
-    }, {
-        pId: -1,
-        text: "进度条",
-        type: "progressbar"
-    }, {
-        pId: 1,
-        text: "bi.text_editor",
-        type: "text_editor"
-    }, {
-        pId: 1,
-        text: "bi.search_editor",
-        type: "search_editor"
-    }, {
-        pId: 1,
-        text: "bi.adapt_editor",
-        type: "adapt_editor"
-    }, {
-        pId: 1,
-        text: "bi.sign_initial_editor",
-        type: "sign_initial_editor"
-    }, {
-        pId: 1,
-        text: "bi.sign_style_editor",
-        type: "sign_style_editor"
-    }, {
-        pId: 2,
-        text: "bi.year_combo",
-        type: "year_combo"
-    }, {
-        pId: 3,
-        text: "bi.month_combo",
-        type: "month_combo"
-    }, {
-        pId: 4,
-        text: "bi.quarter_combo",
-        type: "quarter_combo"
-    }, {
-        pId: 5,
-        text: "bi.date_combo",
-        type: "date_combo"
-    }, {
-        pId: 7,
-        text: "bi.down_list_combo",
-        type: "down_list_combo"
-    }, {
-        pId: 12,
-        text: "各种trigger",
-        type: "triggers"
-    }, {
-        pId: 12,
-        text: "bi.text_type_combo",
-        type: "text_icon_combo"
-    }, {
-        pId: 12,
-        text: "bi.static_combo",
-        type: "single_select_combo"
-    }, {
-        pId: 12,
-        text: "bi.text_type_down_list_combo",
-        type: "text_icon_down_list_combo"
-    }, {
-        pId: 12,
-        text: "bi.param_date_combo",
-        type: "param_date_combo"
-    }, {
-        pId: 12,
-        text: "bi.icon_combo",
-        type: "icon_combo"
-    }, {
-        pId: 12,
-        text: "bi.formula_combo",
-        type: "formula_combo"
-    }, {
-        pId: 9,
-        text: "bi.formula_insert",
-        type: "formula_insert"
-    }, {
-        pId: 9,
-        text: "bi.formula_pane",
-        type: "formula_pane"
-    }, {
-        pId: 8,
-        text: "bi.select_data_tree",
-        type: "select_data_tree"
-    }, {
-        pId: 8,
-        text: "bi.select_data_switcher",
-        type: "select_data_switcher"
-    }, {
-        pId: 8,
-        text: "bi.select_data_search_result",
-        type: "select_data_search_result"
-    }, {
-        pId: 8,
-        text: "bi.select_data_searcher(点这)",
-        type: "select_data_searcher"
-    }, {
-        pId: 6,
-        text: "bi.multidate_combo",
-        type: "multidate_combo"
-    }, {
-        pId: 17,
-        text: "bi.time_interval",
-        type: "time_interval"
-    }, {
-        pId: 10,
-        text: "bi.numerical_interval",
-        type: "numerical_interval"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_trigger",
-        type: "multi_select_trigger"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_search_pane",
-        type: "multi_select_search_pane"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_popup_view",
-        type: "multi_select_popup_view"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_check_pane",
-        type: "multi_select_check_pane"
-    }, {
-        pId: 11,
-        text: "bi.multi_select_combo",
-        type: "multi_select_combo"
-    }, {
-        pId: 13,
-        text: "bi.move2group_combo",
-        type: "move2group_combo"
-    }, {
-        pId: 13,
-        text: "bi.copy2group_combo",
-        type: "copy2group_combo"
-    }, {
-        pId: 14,
-        text: "bi.single_tree_combo",
-        type: "single_tree_combo"
-    }, {
-        pId: 14,
-        text: "bi.multilayer_single_tree_combo",
-        type: "multilayer_single_tree_combo"
-    }, {
-        pId: 23,
-        text: "bi.select_tree_combo",
-        type: "select_tree_combo"
-    }, {
-        pId: 23,
-        text: "bi.multilayer_select_tree_combo",
-        type: "multilayer_select_tree_combo"
-    }, {
-        pId: 15,
-        text: "bi.dialog",
-        type: "dialog"
-    }, {
-        pId: 16,
-        text: "bi.multi_tree",
-        type: "multi_tree"
-    }, {
-        pId: 18,
-        text: "bi.simple_select_data_searcher",
-        type: "simple_select_data_searcher"
-    }, {
-        pId: 19,
-        text: "bi.filter_pane",
-        type: "filter_pane"
-    }, {
-        pId: 19,
-        text: "bi.filter_operation",
-        type: "filter_operation"
-    }, {
-        pId: 19,
-        text: "bi.filter",
-        type: "filter"
-    }, {
-        pId: 20,
-        text: "bi.color_chooser",
-        type: "color_chooser"
-    }, {
-        pId: 21,
-        text: "bi.text_toolbar",
-        type: "text_toolbar"
-    }, {
-        pId: 21,
-        text: "bi.text_area",
-        type: "text_area"
-    }, {
-        pId: 22,
-        text: "bi.path_chooser",
-        type: "path_chooser"
-    }, {
-        pId: 22,
-        text: "bi.direction_path_chooser",
-        type: "direction_path_chooser"
-    }, {
-        pId: 24,
-        text: "bi.file_manager",
-        type: "file_manager"
-    }, {
-        pId: 25,
-        text: "bi.branch_relation",
-        type: "branch_relation"
-    }, {
-        pId: 26,
-        text: "bi.relation_view",
-        type: "relation_view"
-    }, {
-        pId: 27,
-        text: "bi.preview_table",
-        type: "preview_table"
-    }, {
-        pId: 27,
-        text: "bi.adaptive_table",
-        type: "adaptive_table"
-    }, {
-        pId: 27,
-        text: "bi.adaptive_table(冻结表头)",
-        type: "adaptive_table2"
-    }, {
-        pId: 27,
-        text: "bi.custom_scroll_table",
-        type: "custom_scroll_table"
-    }, {
-        pId: 27,
-        text: "bi.page_table",
-        type: "page_table"
-    }, {
-        pId: 27,
-        text: "bi.page_table(冻结)",
-        type: "page_table2"
-    }, {
-        pId: 27,
-        text: "bi.page_table(调整列宽)",
-        type: "page_table3"
-    }, {
-        pId: 27,
-        text: "bi.excel_table",
-        type: "excel_table"
-    }, {
-        pId: 27,
-        text: "bi.sortable_table",
-        type: "sortable_table"
-    }, {
-        pId: 27,
-        text: "bi.excel_view_display_manager",
-        type: "excel_view_display_manager"
-    }, {
-        pId: 32,
-        text: "bi.sequence_table",
-        type: "sequence_table"
-    }, {
-        pId: 32,
-        text: "bi.sequence_table(带有汇总)",
-        type: "sequence_table2"
-    }, {
-        pId: 28,
-        text: "bi.upload_image",
-        type: "upload_image"
-    }, {
-        pId: 28,
-        text: "bi.web_page",
-        type: "web_page"
-    }, {
-        pId: 29,
-        text: "bi.arrangement_droppable",
-        type: "arrangement_droppable"
-    }, {
-        pId: 29,
-        text: "bi.arrangement",
-        type: "arrangement"
-    }, {
-        pId: 29,
-        text: "bi.adaptive_arrangement",
-        type: "adaptive_arrangement"
-    }, {
-        pId: 29,
-        text: "bi.arrangement(网格布局)",
-        type: "grid_arrangement"
-    }, {
-        pId: 29,
-        text: "bi.adaptive_arrangement(网格布局)",
-        type: "grid_adaptive_arrangement"
-    }, {
-        pId: 30,
-        text: "bi.simple_searcher",
-        type: "simple_searcher"
-    }, {
-        pId: 31,
-        text: "选色",
-        type: "select_color_combo"
-    }, {
-        pId: 31,
-        text: "bi.detail_chart",
-        type: "detail_chart"
-    }, {
-        pId: 31,
-        text: "柱形",
-        type: "column_charts"
-    }, {
-        pId: 31,
-        text: "条形图",
-        type: "bar_charts"
-    }, {
-        pId: 31,
-        text: "面积图",
-        type: "area_charts"
-    }, {
-        pId: 31,
-        text: "其他",
-        type: "other_charts"
-    }, {
-        pId: 33,
-        text: "文本标签",
-        type: "list_label"
-    }, {
-        pId: 33,
-        text: "树标签",
-        type: "tree_label"
-    }, {
-        pId: 34,
-        text: "滑块",
-        type: "slider"
-    }, {
-        pId: 35,
-        text: "区间双滑块",
-        type: "interval_slider"
-    }, {
-        pId: 36,
-        text: "文本列表",
-        type: "string_list"
-    }, {
-        pId: 37,
-        text: "树列表",
-        type: "tree_list"
-    }, {
-        pId: 38,
-        text: "日期面板",
-        type: "data_pane"
-    }, {
-        pId: 39,
-        text: "螺旋分析tab控件",
-        type: "dynamic_group_tab"
-    }, {
-        pId: 40,
-        text: "数值微调器",
-        type: "finetuning_number_editor"
-    }];
\ No newline at end of file
diff --git a/demo/css/main.css b/demo/css/main.css
index b8d1bc014..7a34fff76 100644
--- a/demo/css/main.css
+++ b/demo/css/main.css
@@ -1,6 +1,44 @@
 * {
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+.layout-bg-white {
+  background-color: #ffffff;
+}
+.layout-bg-gray {
+  background-color: #eeeeee;
+}
+.layout-bg1 {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+.layout-bg2 {
+  color: #ffffff;
+  background-color: #008B8B;
+}
+.layout-bg3 {
+  color: #ffffff;
+  background-color: #6495ED;
+}
+.layout-bg4 {
+  color: #ffffff;
+  background-color: #ff69b4;
+}
+.layout-bg5 {
+  color: #ffffff;
+  background-color: #B8860B;
+}
+.layout-bg6 {
+  color: #ffffff;
+  background-color: #d9534f;
+}
+.layout-bg7 {
+  color: #ffffff;
+  background-color: #ea4738;
+}
+.layout-bg8 {
+  color: #ffffff;
+  background-color: #6495ed;
+}
 .demo-main .bg1 {
   background-color: #178cdf;
 }
diff --git a/demo/css/west.css b/demo/css/west.css
index 3fa43c065..600b31d56 100644
--- a/demo/css/west.css
+++ b/demo/css/west.css
@@ -1,3 +1,6 @@
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
 .demo-west {
-  background-color: #7f7f7f;
+  border-right: 1px solid #eaeaea;
 }
diff --git a/demo/js/center.js b/demo/js/center.js
index bab672ea6..48f0e7a65 100644
--- a/demo/js/center.js
+++ b/demo/js/center.js
@@ -2,26 +2,29 @@ Demo.Center = BI.inherit(BI.Widget, {
     props: {
         baseCls: "demo-center"
     },
-    beforeCreate: function () {
-        console.log("beforeCreate");
-    },
     render: function () {
+        var self = this;
         return {
             type: "bi.tab",
+            ref: function () {
+                self.tab = this;
+            },
             defaultShowIndex: 0,
             cardCreator: function (v) {
+                if (v === 0) {
+                    return BI.createWidget({
+                        type: "demo.face"
+                    })
+                }
                 return BI.createWidget({
-                    type: "bi.label",
-                    text: v
+                    type: v
                 });
             }
         }
     },
-    created: function () {
-        console.log("created");
-    },
-    mounted: function () {
-        console.log("mounted");
+
+    setValue: function (v) {
+        this.tab.setSelect(v);
     }
 });
 $.shortcut("demo.center", Demo.Center);
\ No newline at end of file
diff --git a/demo/js/config.js b/demo/js/config.js
new file mode 100644
index 000000000..e2a314c17
--- /dev/null
+++ b/demo/js/config.js
@@ -0,0 +1,124 @@
+Demo.CONFIG = [{
+    id: 1,
+    text: "布局"
+}, {
+    id: 2,
+    text: "基础控件"
+}, {
+    id: 3,
+    text: "实例控件"
+}, {
+    id: 4,
+    text: "详细控件"
+}, {
+    id: 5,
+    text: "通用组件"
+}, {
+    pId: 1,
+    text: "bi.center_adapt",
+    value: "demo.center_adapt"
+}, {
+    pId: 1,
+    text: "bi.float_center_adapt",
+    value: "float_center_adapt"
+}, {
+    pId: 1,
+    text: "bi.absolute_center_adapt",
+    value: "absolute_center_adapt"
+}, {
+    pId: 1,
+    text: "bi.flex_center",
+    value: "flex_center"
+}, {
+    pId: 1,
+    text: "bi.inline_center_adapt",
+    value: "inline_center_adapt"
+}, {
+    pId: 1,
+    text: "bi.vertical_adapt",
+    value: "vertical_adapt"
+}, {
+    pId: 1,
+    text: "bi.inline_vertical_adapt",
+    value: "inline_vertical_adapt"
+}, {
+    pId: 1,
+    text: "bi.horizontal_adapt",
+    value: "horizontal_adapt"
+}, {
+    pId: 1,
+    text: "bi.horizontal_auto",
+    value: "horizontal_auto"
+}, {
+    pId: 1,
+    text: "bi.horizontal_float",
+    value: "horizontal_float"
+}, {
+    pId: 1,
+    text: "bi.left_right_vertical_adapt",
+    value: "left_right_vertical_adapt"
+}, {
+    pId: 1,
+    text: "bi.center",
+    value: "center"
+}, {
+    pId: 1,
+    text: "bi.float_center",
+    value: "float_center"
+}, {
+    pId: 1,
+    text: "bi.vertical",
+    value: "vertical"
+}, {
+    pId: 1,
+    text: "bi.horizontal",
+    value: "horizontal"
+}, {
+    pId: 1,
+    text: "bi.border",
+    value: "border"
+}, {
+    pId: 1,
+    text: "bi.card",
+    value: "card"
+}, {
+    pId: 1,
+    text: "bi.left, bi.right",
+    value: "flow"
+}, {
+    pId: 1,
+    text: "bi.lattice",
+    value: "lattice"
+}, {
+    pId: 1,
+    text: "bi.inline",
+    value: "inline"
+}, {
+    pId: 1,
+    text: "bi.htape",
+    value: "htape"
+}, {
+    pId: 1,
+    text: "bi.vtape",
+    value: "vtape"
+}, {
+    pId: 1,
+    text: "bi.grid",
+    value: "grid"
+}, {
+    pId: 1,
+    text: "bi.table",
+    value: "table"
+}, {
+    pId: 1,
+    text: "bi.division",
+    value: "division"
+}, {
+    pId: 1,
+    text: "bi.window",
+    value: "window"
+}, {
+    pId: 1,
+    text: "bi.td",
+    value: "td"
+}];
\ No newline at end of file
diff --git a/demo/js/face.js b/demo/js/face.js
new file mode 100644
index 000000000..ae0a4206c
--- /dev/null
+++ b/demo/js/face.js
@@ -0,0 +1,52 @@
+Demo.Face = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-face"
+    },
+    render: function () {
+        return {
+            type: "bi.vertical",
+            hgap: 50,
+            vgap: 20,
+            items: [{
+                type: "bi.label",
+                text: "栅格布局",
+                height: 50
+            }, {
+                type: "bi.lattice",
+                columnSize: [0.1, 0.1, 0.3, 0.4, 0.1],
+                items: [{
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-1",
+                    cls: "layout-bg1 lattice-item",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-2",
+                    cls: "layout-bg2 lattice-item",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-3",
+                    cls: "layout-bg3 lattice-item",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-4",
+                    cls: "layout-bg4 lattice-item",
+                    hgap: 20
+                }, {
+                    type: "bi.label",
+                    height: 30,
+                    text: "Left-5",
+                    cls: "layout-bg5 lattice-item",
+                    hgap: 20
+                }]
+            }]
+        }
+    }
+});
+$.shortcut("demo.face", Demo.Face);
\ No newline at end of file
diff --git a/demo/js/layout/demo.absolute.js b/demo/js/layout/demo.absolute.js
new file mode 100644
index 000000000..d44c230f4
--- /dev/null
+++ b/demo/js/layout/demo.absolute.js
@@ -0,0 +1,19 @@
+Demo.AbsoluteLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-absolute"
+    },
+    render: function () {
+        return {
+            type: "bi.absolute",
+            items: [{
+                el: {
+                    type: "bi.button",
+                    text: "absolute"
+                },
+                left: 100,
+                top: 100
+            }]
+        }
+    }
+});
+$.shortcut("demo.absolute", Demo.AbsoluteLayout);
\ No newline at end of file
diff --git a/demo/js/layout/demo.center_adapt.js b/demo/js/layout/demo.center_adapt.js
new file mode 100644
index 000000000..d93db8c74
--- /dev/null
+++ b/demo/js/layout/demo.center_adapt.js
@@ -0,0 +1,81 @@
+Demo.CenterAdapt = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-absolute"
+    },
+    render: function () {
+        return {
+            type: "bi.grid",
+            columns: 1,
+            rows: 2,
+            items: [{
+                column: 0,
+                row: 0,
+                el: this._createNoWidth()
+            }, {
+                column: 0,
+                row: 1,
+                el: this._createBottom()
+            }]
+        }
+    },
+
+    _createNoWidth: function () {
+        return BI.createWidget({
+            type: "bi.center_adapt",
+            hgap: 10,
+            items: [{
+                type: "bi.label",
+                text: "Center Adapt 1，center adapt布局只会影响容器内部的位置（水平和垂直居中）而不会影响到内部控件本身属性",
+                cls: "layout-bg1",
+                height: 30
+            }, {
+                type: "bi.label",
+                text: "Center Adapt 2，根据内部控件的宽度的比例来计算",
+                cls: "layout-bg2",
+                height: 30
+            }, {
+                type: "bi.label",
+                text: "Center Adapt 3，这些label都是没有宽度的",
+                cls: "layout-bg3",
+                height: 30
+            }, {
+                type: "bi.label",
+                text: "Center Adapt 4",
+                cls: "layout-bg5",
+                height: 30
+            }]
+        })
+    },
+
+    _createBottom: function () {
+        return BI.createWidget({
+            type: "bi.center_adapt",
+            items: [{
+                type: "bi.text_button",
+                text: "这个是有宽度和高度的按钮-1",
+                height: "100%",
+                width: 160,
+                cls: "layout-bg1"
+            }, {
+                type: "bi.text_button",
+                text: "这个是有宽度和高度的按钮-2",
+                height: 30,
+                width: 160,
+                cls: "layout-bg2"
+            }, {
+                type: "bi.text_button",
+                text: "这个是有宽度和高度的按钮-3",
+                height: 30,
+                width: 160,
+                cls: "layout-bg3"
+            }, {
+                type: "bi.text_button",
+                text: "这个是有宽度和高度的按钮-4",
+                height: 30,
+                width: 160,
+                cls: "layout-bg5"
+            }]
+        })
+    },
+});
+$.shortcut("demo.center_adapt", Demo.CenterAdapt);
\ No newline at end of file
diff --git a/demo/js/main.js b/demo/js/main.js
index da1c12221..293507c35 100644
--- a/demo/js/main.js
+++ b/demo/js/main.js
@@ -3,24 +3,40 @@ Demo.Main = BI.inherit(BI.Widget, {
         baseCls: "demo-main"
     },
     render: function () {
+        var center;
         return {
             type: "bi.border",
             items: {
                 north: {
                     height: 50,
                     el: {
-                        type: "demo.north"
+                        type: "demo.north",
+                        listeners: [{
+                            eventName: Demo.North.EVENT_VALUE_CHANGE,
+                            action: function () {
+                                center.setValue(0);
+                            }
+                        }]
                     }
                 },
                 west: {
                     width: 230,
                     el: {
-                        type: "demo.west"
+                        type: "demo.west",
+                        listeners: [{
+                            eventName: Demo.West.EVENT_VALUE_CHANGE,
+                            action: function (v) {
+                                center.setValue(v);
+                            }
+                        }]
                     }
                 },
                 center: {
                     el: {
                         type: "demo.center",
+                        ref: function (_ref) {
+                            center = _ref;
+                        }
                     }
                 }
             }
diff --git a/demo/js/north.js b/demo/js/north.js
index f45c41f41..89b07f7d8 100644
--- a/demo/js/north.js
+++ b/demo/js/north.js
@@ -3,15 +3,22 @@ Demo.North = BI.inherit(BI.Widget, {
         baseCls: "demo-north"
     },
     render: function () {
+        var self = this;
         return {
             type: "bi.htape",
             items: [{
                 width: 230,
                 el: {
-                    type: "bi.label",
+                    type: "bi.text_button",
+                    listeners: [{
+                        eventName: BI.Button.EVENT_CHANGE,
+                        action: function () {
+                            self.fireEvent(Demo.North.EVENT_VALUE_CHANGE, 0)
+                        }
+                    }],
                     cls: "logo",
                     height: 50,
-                    text: "FineUI"
+                    text: "FineUI2.0"
                 }
             }, {
                 el: {
@@ -21,4 +28,5 @@ Demo.North = BI.inherit(BI.Widget, {
         }
     }
 });
+Demo.North.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
 $.shortcut("demo.north", Demo.North);
\ No newline at end of file
diff --git a/demo/js/west.js b/demo/js/west.js
index 7efe65ccf..922e336bd 100644
--- a/demo/js/west.js
+++ b/demo/js/west.js
@@ -3,13 +3,21 @@ Demo.West = BI.inherit(BI.Widget, {
         baseCls: "demo-west"
     },
     render: function () {
+        var self = this;
         return {
             type: "bi.vertical",
             items: [{
-                type: "bi.vertical",
-                items: []
+                type: "bi.multilayer_single_level_tree",
+                listeners: [{
+                    eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE,
+                    action: function (v) {
+                        self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v);
+                    }
+                }],
+                items: Demo.CONFIG
             }]
         }
     }
 });
+Demo.West.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
 $.shortcut("demo.west", Demo.West);
\ No newline at end of file
diff --git a/demo/less/main.less b/demo/less/main.less
index 263f68859..02d570723 100644
--- a/demo/less/main.less
+++ b/demo/less/main.less
@@ -2,6 +2,54 @@
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
+.layout-bg-white {
+  background-color: #ffffff;
+}
+
+.layout-bg-gray {
+  background-color: #eeeeee;
+}
+
+.layout-bg1 {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+
+.layout-bg2 {
+  color: #ffffff;
+  background-color: #008B8B;
+}
+
+.layout-bg3 {
+  color: #ffffff;
+  background-color: #6495ED;
+}
+
+.layout-bg4 {
+  color: #ffffff;
+  background-color: #ff69b4;
+}
+
+.layout-bg5 {
+  color: #ffffff;
+  background-color: #B8860B;
+}
+
+.layout-bg6 {
+  color: #ffffff;
+  background-color: #d9534f;
+}
+
+.layout-bg7 {
+  color: #ffffff;
+  background-color: #ea4738;
+}
+
+.layout-bg8 {
+  color: #ffffff;
+  background-color: #6495ed;
+}
+
 .demo-main {
   & .bg1 {
     background-color: #178cdf;
diff --git a/demo/less/west.less b/demo/less/west.less
index 8fc638f67..c8e14e9c1 100644
--- a/demo/less/west.less
+++ b/demo/less/west.less
@@ -1,3 +1,5 @@
+@import "index";
+
 .demo-west {
-  background-color: #7f7f7f;
+  border-right: 1px solid @color-bi-border-line;
 }
\ No newline at end of file
diff --git a/dist/case.js b/dist/case.js
index a9e4f2c7a..32e9c7e42 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -8022,4 +8022,34 @@ BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
         this.text.setText(text);
     }
 });
-$.shortcut("bi.small_text_trigger", BI.SmallTextTrigger);
\ No newline at end of file
+$.shortcut("bi.small_text_trigger", BI.SmallTextTrigger);/**
+ * 复制
+ * Created by GUY on 2016/2/16.
+ * @class BI.ZeroClip
+ * @extends BI.BasicButton
+ */
+BI.ZeroClip = BI.inherit(BI.BasicButton, {
+    _defaultConfig: function () {
+        return BI.extend(BI.ZeroClip.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-zero-clip",
+            copy: BI.emptyFn,
+            beforeCopy: BI.emptyFn,
+            afterCopy: BI.emptyFn
+        })
+    },
+    _init: function () {
+        BI.ZeroClip.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        FR.$defaultImport('/com/fr/bi/web/js/third/jquery.zclip.js', 'js');
+        BI.nextTick(function () {
+            self.element.zclip({
+                path: "resources/ZeroClipboard.swf",
+                copy: o.copy,
+                beforeCopy: o.beforeCopy,
+                afterCopy: o.afterCopy
+            });
+        });
+    }
+});
+
+$.shortcut("bi.zero_clip", BI.ZeroClip);
\ No newline at end of file
diff --git a/dist/core.js b/dist/core.js
index 559811fa3..806cd26fd 100644
--- a/dist/core.js
+++ b/dist/core.js
@@ -25840,6 +25840,7 @@ BI.CardLayout = BI.inherit(BI.Layout, {
             .appendTo(this.element);
         widget.invisible();
         this.addWidget(this._getCardName(cardName), widget);
+        widget._mount();
         return widget;
     },
 
@@ -25918,7 +25919,7 @@ BI.CardLayout = BI.inherit(BI.Layout, {
             }
         });
         return flag;
-    },
+    }
 });
 $.shortcut('bi.card', BI.CardLayout);/**
  * 默认的布局方式
diff --git a/dist/resources/ZeroClipboard.swf b/dist/resources/ZeroClipboard.swf
new file mode 100644
index 000000000..13bf8e396
Binary files /dev/null and b/dist/resources/ZeroClipboard.swf differ
diff --git a/dist/widget.js b/dist/widget.js
index 5b882d9f8..057bfed2b 100644
--- a/dist/widget.js
+++ b/dist/widget.js
@@ -16987,10 +16987,10 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
                 }]
             }
         });
-        this.tree.on(BI.Controller.EVENT_CHANGE, function (type) {
+        this.tree.on(BI.Controller.EVENT_CHANGE, function (type, v) {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
             if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, arguments);
+                self.fireEvent(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, v);
             }
         })
     },
diff --git a/src/case/zclip/zclip.js b/src/case/zclip/zclip.js
new file mode 100644
index 000000000..caf4fdb1b
--- /dev/null
+++ b/src/case/zclip/zclip.js
@@ -0,0 +1,31 @@
+/**
+ * 复制
+ * Created by GUY on 2016/2/16.
+ * @class BI.ZeroClip
+ * @extends BI.BasicButton
+ */
+BI.ZeroClip = BI.inherit(BI.BasicButton, {
+    _defaultConfig: function () {
+        return BI.extend(BI.ZeroClip.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-zero-clip",
+            copy: BI.emptyFn,
+            beforeCopy: BI.emptyFn,
+            afterCopy: BI.emptyFn
+        })
+    },
+    _init: function () {
+        BI.ZeroClip.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        FR.$defaultImport('/com/fr/bi/web/js/third/jquery.zclip.js', 'js');
+        BI.nextTick(function () {
+            self.element.zclip({
+                path: "resources/ZeroClipboard.swf",
+                copy: o.copy,
+                beforeCopy: o.beforeCopy,
+                afterCopy: o.afterCopy
+            });
+        });
+    }
+});
+
+$.shortcut("bi.zero_clip", BI.ZeroClip);
\ No newline at end of file
diff --git a/src/core/wrapper/layout/layout.card.js b/src/core/wrapper/layout/layout.card.js
index d24f5f79c..a1aa6b3d0 100644
--- a/src/core/wrapper/layout/layout.card.js
+++ b/src/core/wrapper/layout/layout.card.js
@@ -83,6 +83,7 @@ BI.CardLayout = BI.inherit(BI.Layout, {
             .appendTo(this.element);
         widget.invisible();
         this.addWidget(this._getCardName(cardName), widget);
+        widget._mount();
         return widget;
     },
 
@@ -161,6 +162,6 @@ BI.CardLayout = BI.inherit(BI.Layout, {
             }
         });
         return flag;
-    },
+    }
 });
 $.shortcut('bi.card', BI.CardLayout);
\ No newline at end of file
diff --git a/src/widget/multilayersingletree/multilayersingletree.leveltree.js b/src/widget/multilayersingletree/multilayersingletree.leveltree.js
index 93c25b2b5..7b0a35d17 100644
--- a/src/widget/multilayersingletree/multilayersingletree.leveltree.js
+++ b/src/widget/multilayersingletree/multilayersingletree.leveltree.js
@@ -94,10 +94,10 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
                 }]
             }
         });
-        this.tree.on(BI.Controller.EVENT_CHANGE, function (type) {
+        this.tree.on(BI.Controller.EVENT_CHANGE, function (type, v) {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
             if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, arguments);
+                self.fireEvent(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, v);
             }
         })
     },