forked from fanruan/fineui
Browse Source
* commit '9b2e82e9beaff6a33a7937056ed5a269e67f3a7c': (58 commits) add 整理 整理 update update函数 add add 加入虚拟dom add add 整理 整理 整理 整理 add demo的valuechooser用到的数据放到config中配置 svg 整理 add 删掉 BICst相关 ...es6
guy
8 years ago
887 changed files with 186672 additions and 43679 deletions
@ -1,2 +1,5 @@
|
||||
node_modules/ |
||||
/.idea/ |
||||
demo.js |
||||
demo.css |
||||
.DS_Store |
||||
|
||||
@ -0,0 +1,778 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-arrangement-block { |
||||
background: #e85050; |
||||
opacity: 0.8; |
||||
filter: alpha(opacity=80); |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-arrangement .arrangement-helper { |
||||
border: 1px solid #d4dadd; |
||||
background: #009de3; |
||||
z-index: 1000000000; |
||||
} |
||||
.bi-arrangement .arrangement-block { |
||||
z-index: 1000000000; |
||||
} |
||||
.bi-arrangement .arrangement-drop-container { |
||||
z-index: 1000000000; |
||||
} |
||||
.bi-arrangement .arrangement-drop-container .arrangement-drop-region { |
||||
overflow: hidden; |
||||
} |
||||
.bi-arrangement .arrangement-drop-container .drop-devider { |
||||
z-index: 1000000001; |
||||
background: #009de3; |
||||
} |
||||
.bi-arrangement .arrangement-drop-container .top-left, |
||||
.bi-arrangement .arrangement-drop-container .top-right, |
||||
.bi-arrangement .arrangement-drop-container .bottom-left, |
||||
.bi-arrangement .arrangement-drop-container .bottom-right, |
||||
.bi-arrangement .arrangement-drop-container .top-left-second, |
||||
.bi-arrangement .arrangement-drop-container .top-right-second, |
||||
.bi-arrangement .arrangement-drop-container .bottom-left-second, |
||||
.bi-arrangement .arrangement-drop-container .bottom-right-second, |
||||
.bi-arrangement .arrangement-drop-container .top-center, |
||||
.bi-arrangement .arrangement-drop-container .bottom-center, |
||||
.bi-arrangement .arrangement-drop-container .left-center, |
||||
.bi-arrangement .arrangement-drop-container .right-center, |
||||
.bi-arrangement .arrangement-drop-container .top-center-second, |
||||
.bi-arrangement .arrangement-drop-container .bottom-center-second, |
||||
.bi-arrangement .arrangement-drop-container .left-center-second, |
||||
.bi-arrangement .arrangement-drop-container .right-center-second { |
||||
z-index: 1000000001; |
||||
background: #009de3; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-arrangement-droppable { |
||||
background: #d8f3fe; |
||||
opacity: 0.8; |
||||
filter: alpha(opacity=80); |
||||
z-index: 100000; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-adapt-editor .adapt-editor-text { |
||||
font-size: 14px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/*************BI.SearchEditor******************/ |
||||
.bi-search-editor { |
||||
border: 1px solid #d4dadd; |
||||
} |
||||
.bi-search-editor .close-font { |
||||
font-size: 20px; |
||||
} |
||||
.bi-search-editor .search-font { |
||||
font-size: 20px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/*************BI.SearchEditor******************/ |
||||
.bi-small-search-editor .bi-editor { |
||||
font-size: 12px; |
||||
} |
||||
.bi-small-search-editor .bi-editor .bi-input { |
||||
font-size: 12px; |
||||
} |
||||
.bi-small-search-editor .bi-editor .bi-label { |
||||
font-size: 12px; |
||||
} |
||||
.bi-small-search-editor .close-font { |
||||
font-size: 18px; |
||||
} |
||||
.bi-small-search-editor .search-font { |
||||
font-size: 18px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-sign-initial-editor .sign-initial-editor-text { |
||||
font-size: 14px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-sign-style-editor .sign-style-editor-text { |
||||
max-width: 100%; |
||||
font-size: 12px; |
||||
} |
||||
.bi-sign-style-editor .sign-style-editor-tip { |
||||
max-width: 100%; |
||||
font-size: 12px; |
||||
color: #808080; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-text-editor { |
||||
border: 1px solid #d4dadd; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/*************BI.SearchEditor******************/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-date-picker { |
||||
background: #f4f4f4; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-date-trigger { |
||||
border: 1px solid #d4dadd; |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item, |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item .b-font:before { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled, |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled, |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled .b-font:before, |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled .b-font:before { |
||||
background-color: #ffffff; |
||||
} |
||||
.bi-down-list-combo .bi-down-list-spliter { |
||||
border-top: 1px solid #eaeaea; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-down-list-popup .bi-down-list-item:hover, |
||||
.bi-down-list-popup .bi-down-list-item.hover { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-down-list-popup .bi-down-list-item.disabled, |
||||
.bi-down-list-popup .bi-down-list-item.disabled:hover, |
||||
.bi-down-list-popup .bi-down-list-item.disabled:active { |
||||
background-color: #ffffff; |
||||
} |
||||
.bi-down-list-popup .bi-down-list-item:active { |
||||
color: #009de3; |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-down-list-popup .bi-down-list-item .list-item-text { |
||||
max-width: 203px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-excel-table > div.bottom-right > div > div > table { |
||||
border-right: 1px solid #eaeaea; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-excel-table-header-cell { |
||||
font-weight: bold; |
||||
background-color: #eaeaea; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-file-manager-file-item { |
||||
border-bottom: 1px solid #d4dadd; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-file-manager-folder-item { |
||||
border-bottom: 1px solid #d4dadd; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-file-manager-nav-button .file-manager-nav-button-text { |
||||
max-width: 200px; |
||||
background: #ffffff; |
||||
} |
||||
.bi-file-manager-nav-button .file-manager-nav-button-text.active { |
||||
background-color: #f4f4f4; |
||||
color: #808080; |
||||
} |
||||
.bi-file-manager-nav-button .file-manager-nav-button-triangle { |
||||
z-index: 1; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-file-manager-nav { |
||||
border-left: 1px solid #d4dadd; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-fine-tuning-number-editor { |
||||
border: 1px solid #d4dadd; |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
} |
||||
.bi-fine-tuning-number-editor .top-button { |
||||
border-left: 1px solid #d4dadd; |
||||
border-bottom: 1px solid #d4dadd; |
||||
} |
||||
.bi-fine-tuning-number-editor .bottom-button { |
||||
border-left: 1px solid #d4dadd; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-image-button-href .image-button-href-icon-button { |
||||
z-index: 1; |
||||
font-size: 16px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-image-button-size .image-button-size-button-group { |
||||
font-size: 12px; |
||||
color: #1a1a1a; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-upload-image .upload-image-text-button-label { |
||||
font-size: 14px; |
||||
color: #c4c6c6; |
||||
} |
||||
.bi-upload-image .upload-image-icon-button { |
||||
z-index: 1; |
||||
font-size: 16px; |
||||
background-color: #ffffff; |
||||
} |
||||
.bi-upload-image .upload-image-delete-label { |
||||
font-size: 14px; |
||||
color: #1a1a1a; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-interactive-arrangement .interactive-arrangement-dragtag-line { |
||||
z-index: 1000000000; |
||||
background-color: #f07d0a; |
||||
} |
||||
.bi-interactive-arrangement .interactive-arrangement-dragtag-icon { |
||||
z-index: 1000000000; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-month-trigger { |
||||
border: 1px solid #d4dadd; |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-select-check-pane .multi-select-continue-select { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-multi-select-check-pane .multi-select-check-selected { |
||||
color: #009de3; |
||||
text-decoration: underline; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-display-list { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-display-list .display-list-item { |
||||
color: #808080; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-select-combo .multi-select-trigger-icon-button { |
||||
border-left: 1px solid #d4dadd; |
||||
font-size: 16px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-select-popup-view .multi-select-no-toolbar { |
||||
color: #c4c6c6; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-select-trigger { |
||||
border: 1px solid #d4dadd; |
||||
-webkit-border-radius: 2px 2px 2px 2px; |
||||
-moz-border-radius: 2px 2px 2px 2px; |
||||
border-radius: 2px 2px 2px 2px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-select-search-pane { |
||||
background: #ffffff; |
||||
} |
||||
.bi-multi-select-search-pane .multi-select-toolbar { |
||||
color: #e85050; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-select-check-selected-button { |
||||
border: 1px solid #009de3; |
||||
-webkit-border-radius: 8px 8px 8px 8px; |
||||
-moz-border-radius: 8px 8px 8px 8px; |
||||
border-radius: 8px 8px 8px 8px; |
||||
color: #009de3; |
||||
background-color: #ffffff; |
||||
z-index: 1; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-string-list .popup-multi-string-list { |
||||
border-left: 1px solid #d4dadd; |
||||
border-right: 1px solid #d4dadd; |
||||
border-bottom: 1px solid #d4dadd; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-tree-check-pane { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-multi-tree-check-pane .multi-tree-continue-select { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-multi-tree-check-pane .multi-tree-check-selected { |
||||
color: #009de3; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-tree-display { |
||||
background-color: #f4f4f4; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-tree-combo .multi-select-trigger-icon-button { |
||||
border-left: 1px solid #d4dadd; |
||||
font-size: 16px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-tree-trigger { |
||||
border: 1px solid #d4dadd; |
||||
-webkit-border-radius: 2px 2px 2px 2px; |
||||
-moz-border-radius: 2px 2px 2px 2px; |
||||
border-radius: 2px 2px 2px 2px; |
||||
} |
||||
.bi-multi-tree-trigger .trigger-check-selected { |
||||
border: 1px solid #009de3; |
||||
-webkit-border-radius: 8px 8px 8px 8px; |
||||
-moz-border-radius: 8px 8px 8px 8px; |
||||
border-radius: 8px 8px 8px 8px; |
||||
color: #009de3; |
||||
background-color: #ffffff; |
||||
z-index: 1; |
||||
} |
||||
.bi-multi-tree-trigger .trigger-icon-button { |
||||
border-left: 1px solid #d4dadd; |
||||
font-size: 16px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-tree-popup .popup-view-tree { |
||||
min-height: 170px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-tree-search-pane { |
||||
background: #ffffff; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-tree-trigger { |
||||
border: 1px solid #d4dadd; |
||||
-webkit-border-radius: 2px 2px 2px 2px; |
||||
-moz-border-radius: 2px 2px 2px 2px; |
||||
border-radius: 2px 2px 2px 2px; |
||||
} |
||||
.bi-multi-tree-trigger .trigger-check-selected { |
||||
border: 1px solid #009de3; |
||||
-webkit-border-radius: 8px 8px 8px 8px; |
||||
-moz-border-radius: 8px 8px 8px 8px; |
||||
border-radius: 8px 8px 8px 8px; |
||||
color: #009de3; |
||||
background-color: #ffffff; |
||||
z-index: 1; |
||||
} |
||||
.bi-multi-tree-trigger .trigger-icon-button { |
||||
border-left: 1px solid #d4dadd; |
||||
font-size: 16px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-multi-tree-check-selected-button .trigger-check-selected { |
||||
border: 1px solid #009de3; |
||||
-webkit-border-radius: 8px 8px 8px 8px; |
||||
-moz-border-radius: 8px 8px 8px 8px; |
||||
border-radius: 8px 8px 8px 8px; |
||||
color: #009de3; |
||||
background-color: #ffffff; |
||||
z-index: 1; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-tree-list-popup { |
||||
border-left: 1px solid #d4dadd; |
||||
border-right: 1px solid #d4dadd; |
||||
border-bottom: 1px solid #d4dadd; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-numerical-interval .numerical-interval-small-editor { |
||||
border-top: 1px solid #d4dadd; |
||||
border-bottom: 1px solid #d4dadd; |
||||
border-left: 1px solid #d4dadd; |
||||
-moz-border-radius-topleft: 2px; |
||||
-webkit-border-top-left-radius: 2px; |
||||
-moz-border-radius-bottomleft: 2px; |
||||
-webkit-border-bottom-left-radius: 2px; |
||||
border-top-left-radius: 2px; |
||||
border-bottom-left-radius: 2px; |
||||
} |
||||
.bi-numerical-interval .numerical-interval-big-editor { |
||||
border-top: 1px solid #d4dadd; |
||||
border-bottom: 1px solid #d4dadd; |
||||
border-right: 1px solid #d4dadd; |
||||
-moz-border-radius-topright: 2px; |
||||
-webkit-border-top-right-radius: 2px; |
||||
-moz-border-radius-bottomright: 2px; |
||||
-webkit-border-bottom-right-radius: 2px; |
||||
border-top-right-radius: 2px; |
||||
border-bottom-right-radius: 2px; |
||||
} |
||||
.bi-numerical-interval .numerical-interval-big-combo { |
||||
border: 1px solid #d4dadd; |
||||
-moz-border-radius-topleft: 2px; |
||||
-webkit-border-top-left-radius: 2px; |
||||
-moz-border-radius-bottomleft: 2px; |
||||
-webkit-border-bottom-left-radius: 2px; |
||||
border-top-left-radius: 2px; |
||||
border-bottom-left-radius: 2px; |
||||
} |
||||
.bi-numerical-interval .numerical-interval-big-combo .bi-icon-combo-trigger .icon-combo-trigger-icon { |
||||
font-size: 14px; |
||||
} |
||||
.bi-numerical-interval .numerical-interval-small-combo { |
||||
border: 1px solid #d4dadd; |
||||
-moz-border-radius-topright: 2px; |
||||
-webkit-border-top-right-radius: 2px; |
||||
-moz-border-radius-bottomright: 2px; |
||||
-webkit-border-bottom-right-radius: 2px; |
||||
border-top-right-radius: 2px; |
||||
border-bottom-right-radius: 2px; |
||||
} |
||||
.bi-numerical-interval .numerical-interval-small-combo .bi-icon-combo-trigger .icon-combo-trigger-icon { |
||||
font-size: 14px; |
||||
} |
||||
.bi-numerical-interval.number-error .bi-input { |
||||
color: #e85050; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-numerical-interval-popup .numerical-interval-popup-item.hover, |
||||
.bi-numerical-interval-popup .numerical-interval-popup-item:hover { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-numerical-interval-popup .numerical-interval-popup-item.active, |
||||
.bi-numerical-interval-popup .numerical-interval-popup-item:active { |
||||
background-color: #f4f4f4; |
||||
color: #009de3; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-page-table-cell { |
||||
-webkit-user-select: initial; |
||||
-khtml-user-select: initial; |
||||
-moz-user-select: initial; |
||||
-ms-user-select: initial; |
||||
-o-user-select: initial; |
||||
user-select: initial; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-path-chooser .path-chooser-radio { |
||||
z-index: 1; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-path-region { |
||||
background: #eaeaea; |
||||
} |
||||
.bi-path-region .path-region-label { |
||||
z-index: 1; |
||||
background: #ffffff; |
||||
border: 1px solid #ffffff; |
||||
} |
||||
.bi-path-region .path-region-label.active { |
||||
background: #009de3; |
||||
color: #ffffff; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-preview-table-cell { |
||||
min-height: 25px; |
||||
min-width: 80px; |
||||
max-width: 220px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-preview-table > div > table > thead > tr.odd, |
||||
.bi-preview-table > div > div > div > table > thead > tr.odd { |
||||
background-color: #eaeaea; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-preview-table-header-cell { |
||||
font-weight: bold; |
||||
min-height: 25px; |
||||
min-width: 80px; |
||||
max-width: 220px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-quarter-trigger { |
||||
border: 1px solid #d4dadd; |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-relation-view-item.active { |
||||
color: #ffffff; |
||||
background-color: #009de3; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-relation-view-region .relation-view-region-container { |
||||
background: #ffffff; |
||||
border: 1px solid #d4dadd; |
||||
z-index: 1; |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
} |
||||
.bi-relation-view-region .relation-view-region-container.other-package { |
||||
border: 1px dashed #d4dadd; |
||||
} |
||||
.bi-relation-view-region .relation-view-region-container .relation-view-region-title { |
||||
border-bottom: 1px solid #d4dadd; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-sequence-table-dynamic-number .sequence-table-title-cell { |
||||
overflow: hidden; |
||||
overflow-x: hidden; |
||||
overflow-y: hidden; |
||||
-webkit-box-sizing: border-box; |
||||
/*Safari3.2+*/ |
||||
-moz-box-sizing: border-box; |
||||
/*Firefox3.5+*/ |
||||
-ms-box-sizing: border-box; |
||||
/*IE8*/ |
||||
box-sizing: border-box; |
||||
/*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ |
||||
border: 1px solid #eaeaea; |
||||
} |
||||
.bi-sequence-table-dynamic-number .sequence-table-number-cell { |
||||
-webkit-box-sizing: border-box; |
||||
/*Safari3.2+*/ |
||||
-moz-box-sizing: border-box; |
||||
/*Firefox3.5+*/ |
||||
-ms-box-sizing: border-box; |
||||
/*IE8*/ |
||||
box-sizing: border-box; |
||||
/*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ |
||||
border-left: 1px solid #eaeaea; |
||||
border-right: 1px solid #eaeaea; |
||||
border-bottom: 1px solid #eaeaea; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-sequence-table-list-number .sequence-table-title-cell { |
||||
overflow: hidden; |
||||
overflow-x: hidden; |
||||
overflow-y: hidden; |
||||
-webkit-box-sizing: border-box; |
||||
/*Safari3.2+*/ |
||||
-moz-box-sizing: border-box; |
||||
/*Firefox3.5+*/ |
||||
-ms-box-sizing: border-box; |
||||
/*IE8*/ |
||||
box-sizing: border-box; |
||||
/*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ |
||||
border: 1px solid #eaeaea; |
||||
} |
||||
.bi-sequence-table-list-number .sequence-table-number-cell { |
||||
-webkit-box-sizing: border-box; |
||||
/*Safari3.2+*/ |
||||
-moz-box-sizing: border-box; |
||||
/*Firefox3.5+*/ |
||||
-ms-box-sizing: border-box; |
||||
/*IE8*/ |
||||
box-sizing: border-box; |
||||
/*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ |
||||
border-left: 1px solid #eaeaea; |
||||
border-right: 1px solid #eaeaea; |
||||
border-bottom: 1px solid #eaeaea; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-sequence-table-tree-number .sequence-table-title-cell { |
||||
overflow: hidden; |
||||
overflow-x: hidden; |
||||
overflow-y: hidden; |
||||
-webkit-box-sizing: border-box; |
||||
/*Safari3.2+*/ |
||||
-moz-box-sizing: border-box; |
||||
/*Firefox3.5+*/ |
||||
-ms-box-sizing: border-box; |
||||
/*IE8*/ |
||||
box-sizing: border-box; |
||||
/*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ |
||||
border: 1px solid #eaeaea; |
||||
} |
||||
.bi-sequence-table-tree-number .sequence-table-number-cell { |
||||
-webkit-box-sizing: border-box; |
||||
/*Safari3.2+*/ |
||||
-moz-box-sizing: border-box; |
||||
/*Firefox3.5+*/ |
||||
-ms-box-sizing: border-box; |
||||
/*IE8*/ |
||||
box-sizing: border-box; |
||||
/*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ |
||||
border-left: 1px solid #eaeaea; |
||||
border-right: 1px solid #eaeaea; |
||||
border-bottom: 1px solid #eaeaea; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-singletree-combo .singletree-trigger { |
||||
border: 1px solid #d4dadd; |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
} |
||||
.bi-singletree-combo .bi-singletree-popup .singletree-toolbar { |
||||
color: #c4c6c6; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-web-page .web-page-button { |
||||
z-index: 1; |
||||
font-size: 14px; |
||||
background-color: #ffffff; |
||||
} |
||||
.bi-web-page .web-page-text-button-label { |
||||
font-size: 16px; |
||||
color: #c4c6c6; |
||||
} |
||||
.bi-web-page .web-page-delete-label { |
||||
font-size: 14px; |
||||
color: #1a1a1a; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-year-popup .year-popup-navigation { |
||||
border-top: 1px solid #eaeaea; |
||||
line-height: 30px; |
||||
color: #009de3; |
||||
} |
||||
.bi-year-popup .year-popup-navigation > .center-element { |
||||
border-left: 1px solid #eaeaea; |
||||
} |
||||
.bi-year-popup .year-popup-navigation > .first-element { |
||||
border-left: none; |
||||
} |
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-year-trigger { |
||||
border: 1px solid #d4dadd; |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
} |
||||
@ -0,0 +1,12 @@
|
||||
$(function () { |
||||
var ref; |
||||
BI.createWidget({ |
||||
type: "demo.main", |
||||
ref: function (_ref) { |
||||
console.log(_ref); |
||||
ref = _ref; |
||||
}, |
||||
element: '#wrapper' |
||||
}); |
||||
// ref.destroy();
|
||||
}); |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
@ -0,0 +1,41 @@
|
||||
.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; |
||||
} |
||||
@ -0,0 +1,13 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.demo-north { |
||||
background-color: #3c8dbc; |
||||
} |
||||
.demo-north .logo { |
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
color: #ffffff; |
||||
background-color: #367fa9; |
||||
font-size: 20px; |
||||
font-weight: 300; |
||||
} |
||||
@ -1,7 +1,6 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-color-picker > .center-element { |
||||
border-left: 1px solid #ffffff; |
||||
border-top: 1px solid #ffffff; |
||||
.demo-west { |
||||
border-right: 1px solid #eaeaea; |
||||
} |
||||
@ -0,0 +1,75 @@
|
||||
Demo.Button = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-button" |
||||
}, |
||||
render: function () { |
||||
var items = [ |
||||
{ |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '一般按钮', |
||||
level: 'common', |
||||
height: 30 |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '表示成功状态按钮', |
||||
level: 'success', |
||||
height: 30 |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '表示警告状态的按钮', |
||||
level: 'warning', |
||||
height: 30 |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '表示忽略状态的按钮', |
||||
level: 'ignore', |
||||
height: 30 |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '普通灰化按钮', |
||||
disabled: true, |
||||
level: 'success', |
||||
height: 30 |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '忽略状态灰化按钮', |
||||
disabled: true, |
||||
level: 'ignore', |
||||
height: 30 |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '带图标的按钮', |
||||
//level: 'ignore',
|
||||
iconClass: "rename-font", |
||||
height: 30 |
||||
} |
||||
} |
||||
]; |
||||
BI.each(items, function (i, item) { |
||||
item.el.handler = function () { |
||||
BI.Msg.alert('按钮', this.options.text); |
||||
} |
||||
}); |
||||
return { |
||||
type: "bi.left", |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items: items |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.button", Demo.Button); |
||||
@ -0,0 +1,24 @@
|
||||
Demo.Button = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-button" |
||||
}, |
||||
render: function () { |
||||
var items = [ |
||||
{ |
||||
el: { |
||||
type: 'bi.icon_button', |
||||
cls: "rename-font", |
||||
width: 20, |
||||
height: 20 |
||||
} |
||||
} |
||||
]; |
||||
return { |
||||
type: "bi.left", |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items: items |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.icon_button", Demo.Button); |
||||
@ -0,0 +1,24 @@
|
||||
Demo.Button = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-button" |
||||
}, |
||||
render: function () { |
||||
var items = [ |
||||
{ |
||||
el: { |
||||
type: 'bi.image_button', |
||||
src: "http://www.easyicon.net/api/resizeApi.php?id=1206741&size=128", |
||||
width: 100, |
||||
height: 100 |
||||
} |
||||
} |
||||
]; |
||||
return { |
||||
type: "bi.left", |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items: items |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.image_button", Demo.Button); |
||||
@ -0,0 +1,23 @@
|
||||
Demo.Button = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-button" |
||||
}, |
||||
render: function () { |
||||
var items = [ |
||||
{ |
||||
el: { |
||||
type: 'bi.text_button', |
||||
text: '文字按钮', |
||||
height: 30 |
||||
} |
||||
} |
||||
]; |
||||
return { |
||||
type: "bi.left", |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items: items |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.text_button", Demo.Button); |
||||
@ -0,0 +1,138 @@
|
||||
Demo.Label = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-label" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "这是一个label控件，默认居中", |
||||
textAlign: "center" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "这是一个label控件, 高度为30，默认居中", |
||||
textAlign: "center", |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "这是一个label控件，使用水平居左", |
||||
textAlign: "left", |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "这是一个label控件，whiteSpace是normal，不设置高度，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg5", |
||||
text: "这是一个label控件，whiteSpace是默认的nowrap，不设置高度，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg7", |
||||
text: "这是一个label控件，whiteSpace是默认的nowrap，高度为30，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "这是一个label控件，whiteSpace设置为normal，高度为60，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
height: 60 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg5", |
||||
text: "这是一个label控件，whiteSpace设置为normal，textHeight控制text的lineHeight，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textHeight: 30, |
||||
height: 60 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "这是一个label控件，whiteSpace设置为nowrap，textWidth控制text的width", |
||||
textWidth: 200, |
||||
height: 60 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg8", |
||||
text: "这是一个label控件，whiteSpace设置为normal，textWidth控制text的width，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textWidth: 200, |
||||
height: 60 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg7", |
||||
text: "whiteSpace为默认的nowrap，高度设置为60，宽度设置为300", |
||||
height: 60, |
||||
width: 300 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "设置了宽度300，高度60，whiteSpace设置为normal", |
||||
whiteSpace: "normal", |
||||
width: 300, |
||||
height: 60 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg8", |
||||
text: "textWidth设置为200，textHeight设置为30，width设置300，凑点字数看效果", |
||||
width: 300, |
||||
textWidth: 200, |
||||
textHeight: 30, |
||||
height: 60, |
||||
whiteSpace: "normal" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "textWidth设置为200，width设置300，看下水平居左的换行效果", |
||||
textAlign: "left", |
||||
width: 300, |
||||
textWidth: 200, |
||||
textHeight: 30, |
||||
height: 60, |
||||
whiteSpace: "normal" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "使用默认的nowrap，再去设置textHeight，只会有一行的效果", |
||||
textAlign: "left", |
||||
width: 300, |
||||
textWidth: 200, |
||||
textHeight: 30, |
||||
height: 60 |
||||
}, { |
||||
type: "bi.left", |
||||
items: [{ |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "在float布局中自适应的,不设高度和宽度，文字多长这个就有多长" |
||||
}], |
||||
height: 30 |
||||
}, { |
||||
type: "bi.left", |
||||
items: [{ |
||||
type: "bi.label", |
||||
cls: "layout-bg4", |
||||
text: "在float布局中自适应的，设置了宽度200，后面还有", |
||||
width: 200 |
||||
}], |
||||
height: 30 |
||||
}, { |
||||
type: "bi.left", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "在float布局中自适应的，设置了高度，文字多长这个就有多长", |
||||
cls: "layout-bg5", |
||||
height: 30 |
||||
}], |
||||
height: 30 |
||||
}], |
||||
hgap: 300, |
||||
vgap: 20 |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.label", Demo.Label); |
||||
@ -0,0 +1,23 @@
|
||||
Demo.Message = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-bubble" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.center_adapt", |
||||
items : [ |
||||
{ |
||||
el : { |
||||
type : 'bi.button', |
||||
text : '点击我弹出一个消息框', |
||||
height : 30, |
||||
handler : function() { |
||||
BI.Msg.alert('测试消息框', '我是测试消息框的内容'); |
||||
} |
||||
} |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.message", Demo.Message); |
||||
@ -0,0 +1,120 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "默认的分页" |
||||
}, { |
||||
type: "bi.pager", |
||||
height: 50, |
||||
pages: 18, |
||||
groups: 5, |
||||
curr: 6, |
||||
first: "首页", |
||||
last: "尾页" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "显示上一页、下一页、首页、尾页" |
||||
}, { |
||||
type: "bi.pager", |
||||
dynamicShow: false, |
||||
height: 50, |
||||
pages: 18, |
||||
groups: 5, |
||||
curr: 1, |
||||
first: "首页>", |
||||
last: "<尾页" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "显示上一页、下一页" |
||||
}, { |
||||
type: "bi.pager", |
||||
dynamicShow: false, |
||||
dynamicShowFirstLast: true, |
||||
height: 50, |
||||
pages: 18, |
||||
groups: 5, |
||||
curr: 1, |
||||
first: "首页>", |
||||
last: "<尾页" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "自定义上一页、下一页" |
||||
}, { |
||||
type: "bi.pager", |
||||
dynamicShow: false, |
||||
height: 50, |
||||
pages: 18, |
||||
groups: 5, |
||||
curr: 6, |
||||
prev: { |
||||
type: "bi.button", |
||||
cls: "", |
||||
text: "上一页", |
||||
value: "prev", |
||||
once: false, |
||||
height: 30, |
||||
handler: function () { |
||||
|
||||
} |
||||
}, |
||||
next: { |
||||
type: "bi.button", |
||||
cls: "", |
||||
text: "下一页", |
||||
value: "next", |
||||
once: false, |
||||
handler: function () { |
||||
|
||||
} |
||||
} |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "不知道总页数的情况(测试条件 1<=page<=3)" |
||||
}, { |
||||
type: "bi.pager", |
||||
dynamicShow: false, |
||||
height: 50, |
||||
pages: false, |
||||
curr: 1, |
||||
prev: { |
||||
type: "bi.button", |
||||
cls: "", |
||||
text: "上一页", |
||||
value: "prev", |
||||
once: false, |
||||
height: 30, |
||||
handler: function () { |
||||
|
||||
} |
||||
}, |
||||
next: { |
||||
type: "bi.button", |
||||
cls: "", |
||||
text: "下一页", |
||||
value: "next", |
||||
once: false, |
||||
handler: function () { |
||||
|
||||
} |
||||
}, |
||||
hasPrev: function (v) { |
||||
return v > 1; |
||||
}, |
||||
hasNext: function (v) { |
||||
return v < 3; |
||||
} |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.pager", Demo.Func); |
||||
@ -0,0 +1,32 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
var svg = BI.createWidget({ |
||||
type: "bi.svg", |
||||
width: 500, |
||||
height: 600 |
||||
}); |
||||
|
||||
var circle = svg.circle(100, 100, 10); |
||||
circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000); |
||||
|
||||
var el = svg.rect(10, 200, 300, 200); |
||||
el.transform("t100,100r45t-100,0"); |
||||
|
||||
svg.path("M10,10L50,50M50,10L10,50") |
||||
.attr({stroke: "red"}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: svg, |
||||
left: 100, |
||||
top: 50 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.svg", Demo.Func); |
||||
@ -0,0 +1,33 @@
|
||||
Demo.CodeEditor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-editor" |
||||
}, |
||||
render: function () { |
||||
var editor = BI.createWidget({ |
||||
type: "bi.code_editor", |
||||
cls: "mvc-border", |
||||
width: 600, |
||||
height: 400 |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.vertical", |
||||
element: this, |
||||
hgap: 30, |
||||
vgap: 20, |
||||
items: [editor, { |
||||
type: "bi.button", |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.toast(JSON.stringify(editor.getValue())); |
||||
} |
||||
}, { |
||||
type: "bi.button", |
||||
text: "setValue", |
||||
handler: function () { |
||||
editor.setValue("测试数据"); |
||||
} |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.code_editor", Demo.CodeEditor); |
||||
@ -0,0 +1,96 @@
|
||||
Demo.Editor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-editor" |
||||
}, |
||||
render: function () { |
||||
var editor1 = BI.createWidget({ |
||||
type: "bi.editor", |
||||
cls: "mvc-border", |
||||
watermark: "alert信息显示在下面", |
||||
errorText: "字段不可重名!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", |
||||
width: 200, |
||||
height: 30 |
||||
}); |
||||
editor1.on(BI.Editor.EVENT_ENTER, function () { |
||||
editor1.blur(); |
||||
}); |
||||
var editor2 = BI.createWidget({ |
||||
type: "bi.editor", |
||||
cls: "mvc-border", |
||||
watermark: "输入'a'会有错误信息", |
||||
disabled: true, |
||||
errorText: "字段不可重名", |
||||
validationChecker: function (v) { |
||||
if (v == "a") { |
||||
return false; |
||||
} |
||||
return true; |
||||
}, |
||||
allowBlank: true, |
||||
width: 200, |
||||
height: 30 |
||||
}); |
||||
var editor3 = BI.createWidget({ |
||||
type: "bi.editor", |
||||
cls: "mvc-border", |
||||
watermark: "输入'a'会有错误信息且回车键不能退出编辑", |
||||
errorText: "字段不可重名", |
||||
validationChecker: function (v) { |
||||
if (v == "a") { |
||||
return false; |
||||
} |
||||
return true; |
||||
}, |
||||
quitChecker: function (v) { |
||||
return false; |
||||
}, |
||||
allowBlank: true, |
||||
width: 300, |
||||
height: 30 |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: editor1, |
||||
left: 0, |
||||
top: 0 |
||||
}, { |
||||
el: editor2, |
||||
left: 250, |
||||
top: 30 |
||||
}, { |
||||
el: editor3, |
||||
left: 500, |
||||
top: 60 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
text: "disable", |
||||
handler: function () { |
||||
editor1.setEnable(false); |
||||
editor2.setEnable(false); |
||||
editor3.setEnable(false); |
||||
}, |
||||
height: 30 |
||||
}, |
||||
left: 100, |
||||
bottom: 60 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
text: "enable", |
||||
handler: function () { |
||||
editor1.setEnable(true); |
||||
editor2.setEnable(true); |
||||
editor3.setEnable(true); |
||||
}, |
||||
height: 30 |
||||
}, |
||||
left: 200, |
||||
bottom: 60 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.editor", Demo.Editor); |
||||
@ -0,0 +1,21 @@
|
||||
Demo.CodeEditor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-editor" |
||||
}, |
||||
render: function () { |
||||
this.formula = BI.createWidget({ |
||||
type : 'bi.formula_editor', |
||||
width : 300, |
||||
height : 200, |
||||
value : 'SUM(C5, 16, 26)' |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.left", |
||||
element: this, |
||||
items: [this.formula], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.formula_editor", Demo.CodeEditor); |
||||
@ -0,0 +1,26 @@
|
||||
Demo.CodeEditor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-editor" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.adaptive", |
||||
cls: "layout-bg1", |
||||
items: [{ |
||||
type: "bi.multifile_editor", |
||||
width: 400, |
||||
height: 300 |
||||
}], |
||||
width: 400, |
||||
height: 300 |
||||
}, |
||||
top: 50, |
||||
left: 50 |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.multifile_editor", Demo.CodeEditor); |
||||
@ -0,0 +1,39 @@
|
||||
Demo.CodeEditor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-editor" |
||||
}, |
||||
render: function () { |
||||
var editor = BI.createWidget({ |
||||
type: "bi.textarea_editor", |
||||
cls: "mvc-border", |
||||
width: 600, |
||||
height: 400 |
||||
}); |
||||
editor.on(BI.TextAreaEditor.EVENT_FOCUS, function () { |
||||
BI.Msg.toast("Focus"); |
||||
}); |
||||
editor.on(BI.TextAreaEditor.EVENT_BLUR, function () { |
||||
BI.Msg.toast("Blur"); |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.vertical", |
||||
element: this, |
||||
hgap: 30, |
||||
vgap: 20, |
||||
items: [editor, { |
||||
type: "bi.button", |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.toast(JSON.stringify(editor.getValue())); |
||||
} |
||||
}, { |
||||
type: "bi.button", |
||||
text: "setValue", |
||||
handler: function () { |
||||
editor.setValue("测试数据"); |
||||
} |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.textarea_editor", Demo.CodeEditor); |
||||
@ -0,0 +1,62 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
var items = [], header = [], columnSize = []; |
||||
|
||||
var rowCount = 100, columnCount = 100; |
||||
for (var i = 0; i < 1; i++) { |
||||
header[i] = []; |
||||
for (var j = 0; j < columnCount; j++) { |
||||
header[i][j] = { |
||||
type: "bi.label", |
||||
text: "表头" + i + "-" + j |
||||
} |
||||
columnSize[j] = 100; |
||||
} |
||||
} |
||||
for (var i = 0; i < rowCount; i++) { |
||||
items[i] = []; |
||||
for (var j = 0; j < columnCount; j++) { |
||||
items[i][j] = { |
||||
type: "bi.label", |
||||
text: (i < 3 ? 0 : i) + "-" + j |
||||
} |
||||
} |
||||
} |
||||
|
||||
var table = BI.createWidget({ |
||||
type: "bi.resizable_table", |
||||
el: { |
||||
type: "bi.collection_table" |
||||
}, |
||||
width: 600, |
||||
height: 500, |
||||
isResizeAdapt: true, |
||||
isNeedResize: true, |
||||
isNeedMerge: true, |
||||
mergeCols: [0, 1], |
||||
mergeRule: function (col1, col2) { |
||||
return BI.isEqual(col1, col2); |
||||
}, |
||||
isNeedFreeze: true, |
||||
freezeCols: [0, 1], |
||||
columnSize: columnSize, |
||||
items: items, |
||||
header: header |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: table, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.collection_table", Demo.Func); |
||||
@ -0,0 +1,57 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
var items = [], header = [], columnSize = []; |
||||
|
||||
var rowCount = 100, columnCount = 100; |
||||
for (var i = 0; i < 1; i++) { |
||||
header[i] = []; |
||||
for (var j = 0; j < columnCount; j++) { |
||||
header[i][j] = { |
||||
type: "bi.label", |
||||
text: "表头" + i + "-" + j |
||||
} |
||||
columnSize[j] = 100; |
||||
} |
||||
} |
||||
for (var i = 0; i < rowCount; i++) { |
||||
items[i] = []; |
||||
for (var j = 0; j < columnCount; j++) { |
||||
items[i][j] = { |
||||
type: "bi.label", |
||||
text: (i < 3 ? 0 : i) + "-" + j |
||||
} |
||||
} |
||||
} |
||||
|
||||
var table = BI.createWidget({ |
||||
type: "bi.resizable_table", |
||||
el: { |
||||
type: "bi.grid_table", |
||||
}, |
||||
width: 600, |
||||
height: 500, |
||||
isResizeAdapt: true, |
||||
isNeedResize: true, |
||||
isNeedFreeze: true, |
||||
freezeCols: [0, 1], |
||||
columnSize: columnSize, |
||||
items: items, |
||||
header: header |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: table, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.grid_table", Demo.Func); |
||||
@ -0,0 +1,57 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
var items = [], header = [], columnSize = []; |
||||
|
||||
var rowCount = 100, columnCount = 100; |
||||
for (var i = 0; i < 1; i++) { |
||||
header[i] = []; |
||||
for (var j = 0; j < columnCount; j++) { |
||||
header[i][j] = { |
||||
type: "bi.label", |
||||
text: "表头" + i + "-" + j |
||||
} |
||||
columnSize[j] = 100; |
||||
} |
||||
} |
||||
for (var i = 0; i < rowCount; i++) { |
||||
items[i] = []; |
||||
for (var j = 0; j < columnCount; j++) { |
||||
items[i][j] = { |
||||
type: "bi.label", |
||||
text: (i < 3 ? 0 : i) + "-" + j |
||||
} |
||||
} |
||||
} |
||||
|
||||
var table = BI.createWidget({ |
||||
type: "bi.resizable_table", |
||||
el: { |
||||
type: "bi.grid_table", |
||||
}, |
||||
width: 600, |
||||
height: 500, |
||||
isResizeAdapt: true, |
||||
isNeedResize: true, |
||||
isNeedFreeze: true, |
||||
freezeCols: [0, 1], |
||||
columnSize: columnSize, |
||||
items: items, |
||||
header: header |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: table, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.resizable_table", Demo.Func); |
||||
@ -0,0 +1,367 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
var items = [[{ |
||||
text: "第一行第一列" |
||||
}, { |
||||
text: "第一行第一列" |
||||
}, { |
||||
text: "第一行第一列" |
||||
}], [{ |
||||
text: "第一行第一列" |
||||
}, { |
||||
text: "第一行第一列" |
||||
}, { |
||||
text: "第一行第一列" |
||||
}], [{ |
||||
text: "第三行第一列" |
||||
}, { |
||||
text: "第三行第二列" |
||||
}, { |
||||
text: "第三行第三列" |
||||
}], [{ |
||||
text: "第四行第一列" |
||||
}, { |
||||
text: "第四行第二列" |
||||
}, { |
||||
text: "第四行第三列" |
||||
}], [{ |
||||
text: "第五行第一列" |
||||
}, { |
||||
text: "第五行第二列" |
||||
}, { |
||||
text: "第五行第三列" |
||||
}], [{ |
||||
text: "第六行第一列" |
||||
}, { |
||||
text: "第六行第二列" |
||||
}, { |
||||
text: "第六行第三列" |
||||
}], [{ |
||||
text: "第七行第一列" |
||||
}, { |
||||
text: "第七行第二列" |
||||
}, { |
||||
text: "第七行第三列" |
||||
}], [{ |
||||
text: "第八行第一列" |
||||
}, { |
||||
text: "第八行第二列" |
||||
}, { |
||||
text: "第八行第三列" |
||||
}], [{ |
||||
text: "第九行第一列" |
||||
}, { |
||||
text: "第九行第二列" |
||||
}, { |
||||
text: "第九行第三列" |
||||
}], [{ |
||||
text: "第十行第一列" |
||||
}, { |
||||
text: "第十行第二列" |
||||
}, { |
||||
text: "第十行第三列" |
||||
}], [{ |
||||
text: "第十一行第一列" |
||||
}, { |
||||
text: "第十一行第二列" |
||||
}, { |
||||
text: "第十一行第三列" |
||||
}], [{ |
||||
text: "第十二行第一列" |
||||
}, { |
||||
text: "第十二行第二列" |
||||
}, { |
||||
text: "第十二行第三列" |
||||
}], [{ |
||||
text: "第十三行第一列" |
||||
}, { |
||||
text: "第十三行第二列" |
||||
}, { |
||||
text: "第十三行第三列" |
||||
}], [{ |
||||
text: "第十四行第一列" |
||||
}, { |
||||
text: "第十四行第二列" |
||||
}, { |
||||
text: "第十四行第三列" |
||||
}], [{ |
||||
text: "第十五行第一列" |
||||
}, { |
||||
text: "第十五行第二列" |
||||
}, { |
||||
text: "第十五行第三列" |
||||
}], [{ |
||||
text: "第十六行第一列" |
||||
}, { |
||||
text: "第十六行第二列" |
||||
}, { |
||||
text: "第十六行第三列" |
||||
}], [{ |
||||
text: "第十七行第一列" |
||||
}, { |
||||
text: "第十七行第二列" |
||||
}, { |
||||
text: "第十七行第三列" |
||||
}], [{ |
||||
text: "第十八行第一列" |
||||
}, { |
||||
text: "第十八行第二列" |
||||
}, { |
||||
text: "第十八行第三列" |
||||
}]]; |
||||
|
||||
|
||||
var items2 = [[{ |
||||
text: "第一行第一列" |
||||
}, { |
||||
text: "第一行第二列" |
||||
}, { |
||||
text: "第一行第三列" |
||||
}, { |
||||
text: "第一行第四列" |
||||
}, { |
||||
text: "第一行第五列" |
||||
}], [{ |
||||
text: "第二行第一列" |
||||
}, { |
||||
text: "第二行第二列" |
||||
}, { |
||||
text: "第二行第三列" |
||||
}, { |
||||
text: "第二行第四列" |
||||
}, { |
||||
text: "第二行第五列" |
||||
}], [{ |
||||
text: "第二行第一列" |
||||
}, { |
||||
text: "第二行第二列" |
||||
}, { |
||||
text: "第三行第三列" |
||||
}, { |
||||
text: "第三行第四列" |
||||
}, { |
||||
text: "第三行第五列" |
||||
}], [{ |
||||
text: "第二行第一列" |
||||
}, { |
||||
text: "第四行第二列" |
||||
}, { |
||||
text: "第四行第三列" |
||||
}, { |
||||
text: "第四行第四列" |
||||
}, { |
||||
text: "第四行第五列" |
||||
}] |
||||
|
||||
|
||||
, [{ |
||||
text: "第五行第一列" |
||||
}, { |
||||
text: "第五行第一列" |
||||
}, { |
||||
text: "第五行第三列" |
||||
}, { |
||||
text: "第五行第四列" |
||||
}, { |
||||
text: "第五行第五列" |
||||
}], [{ |
||||
text: "第六行第一列" |
||||
}, { |
||||
text: "第六行第一列" |
||||
}, { |
||||
text: "第六行第三列" |
||||
}, { |
||||
text: "第六行第四列" |
||||
}, { |
||||
text: "第六行第五列" |
||||
}], [{ |
||||
text: "第七行第一列" |
||||
}, { |
||||
text: "第七行第二列" |
||||
}, { |
||||
text: "第七行第三列" |
||||
}, { |
||||
text: "第七行第四列" |
||||
}, { |
||||
text: "第七行第五列" |
||||
}], [{ |
||||
text: "第八行第一列" |
||||
}, { |
||||
text: "第八行第二列" |
||||
}, { |
||||
text: "第八行第三列" |
||||
}, { |
||||
text: "第八行第四列" |
||||
}, { |
||||
text: "第八行第五列" |
||||
}], [{ |
||||
text: "第九行第一列" |
||||
}, { |
||||
text: "第九行第二列" |
||||
}, { |
||||
text: "第九行第三列" |
||||
}, { |
||||
text: "第九行第四列" |
||||
}, { |
||||
text: "第九行第五列" |
||||
}], [{ |
||||
text: "第十行第一列" |
||||
}, { |
||||
text: "第十行第二列" |
||||
}, { |
||||
text: "第十行第三列" |
||||
}, { |
||||
text: "第十行第四列" |
||||
}, { |
||||
text: "第十行第五列" |
||||
}], [{ |
||||
text: "第十一行第一列" |
||||
}, { |
||||
text: "第十一行第二列" |
||||
}, { |
||||
text: "第十一行第三列" |
||||
}, { |
||||
text: "第十一行第四列" |
||||
}, { |
||||
text: "第十一行第五列" |
||||
}], [{ |
||||
text: "第十二行第一列" |
||||
}, { |
||||
text: "第十二行第二列" |
||||
}, { |
||||
text: "第十二行第三列" |
||||
}, { |
||||
text: "第十二行第四列" |
||||
}, { |
||||
text: "第十二行第五列" |
||||
}], [{ |
||||
text: "第十三行第一列" |
||||
}, { |
||||
text: "第十三行第二列" |
||||
}, { |
||||
text: "第十三行第三列" |
||||
}, { |
||||
text: "第十三行第四列" |
||||
}, { |
||||
text: "第十三行第五列" |
||||
}], [{ |
||||
text: "第十四行第一列" |
||||
}, { |
||||
text: "第十四行第二列" |
||||
}, { |
||||
text: "第十四行第三列" |
||||
}, { |
||||
text: "第十四行第四列" |
||||
}, { |
||||
text: "第十四行第五列" |
||||
}]]; |
||||
|
||||
var header = [[{ |
||||
text: "表头1" |
||||
}, { |
||||
text: "表头2" |
||||
}, { |
||||
text: "表头3" |
||||
}]]; |
||||
|
||||
var header2 = [[{ |
||||
text: "表头1" |
||||
}, { |
||||
text: "表头2" |
||||
}, { |
||||
text: "表头3" |
||||
}, { |
||||
text: "表头4" |
||||
}, { |
||||
text: "表头5" |
||||
}]]; |
||||
|
||||
var table1 = BI.createWidget({ |
||||
type: "bi.table_view", |
||||
isNeedResize: true, |
||||
isNeedMerge: true, |
||||
mergeCols: [0, 1], |
||||
columnSize: [100, 200, 300], |
||||
items: items, |
||||
header: header |
||||
}); |
||||
var table2 = BI.createWidget({ |
||||
type: "bi.table_view", |
||||
isNeedMerge: true, |
||||
isNeedFreeze: true, |
||||
freezeCols: [0, 1], |
||||
mergeCols: [0, 1], |
||||
columnSize: [100, 200, 300, 400, 500], |
||||
items: items2, |
||||
header: header2 |
||||
}); |
||||
var table3 = BI.createWidget({ |
||||
type: "bi.table_view", |
||||
isNeedMerge: true, |
||||
isNeedFreeze: true, |
||||
freezeCols: [4], |
||||
mergeCols: [0, 1], |
||||
columnSize: [100, 200, 300, 400, 100], |
||||
items: items2, |
||||
header: header2 |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.grid", |
||||
columns: 2, |
||||
rows: 2, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: table1 |
||||
}, { |
||||
column: 1, |
||||
row: 0, |
||||
el: table2 |
||||
}, { |
||||
column: 0, |
||||
row: 1, |
||||
el: table3 |
||||
}, { |
||||
column: 1, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.button", |
||||
text: "第一个表setColumnSize([300, 200, 100])", |
||||
handler: function () { |
||||
table1.setColumnSize([300, 200, 100]); |
||||
} |
||||
}, { |
||||
type: "bi.button", |
||||
text: "第二个表setColumnSize([50, 100, 150, 200, 250])", |
||||
handler: function () { |
||||
table2.setColumnSize([50, 100, 150, 200, 250]); |
||||
} |
||||
}, { |
||||
type: "bi.button", |
||||
text: "第三个表setColumnSize([50, 100, 150, 200, 50])", |
||||
handler: function () { |
||||
table3.setColumnSize([50, 100, 150, 200, 50]); |
||||
} |
||||
}], |
||||
vgap: 10 |
||||
} |
||||
}] |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.table_view", Demo.Func); |
||||
@ -0,0 +1,58 @@
|
||||
Demo.Bubble = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-bubble" |
||||
}, |
||||
render: function () { |
||||
var btns = []; |
||||
var items = [ |
||||
{ |
||||
el: { |
||||
ref: function (_ref) { |
||||
btns.push(_ref); |
||||
}, |
||||
type: 'bi.button', |
||||
text: 'bubble测试', |
||||
height: 30, |
||||
handler: function () { |
||||
BI.Bubbles.show("singleBubble1", "bubble测试", this); |
||||
} |
||||
} |
||||
}, { |
||||
el: { |
||||
ref: function (_ref) { |
||||
btns.push(_ref); |
||||
}, |
||||
type: 'bi.button', |
||||
text: 'bubble测试(居中显示)', |
||||
height: 30, |
||||
handler: function () { |
||||
BI.Bubbles.show("singleBubble2", "bubble测试", this, { |
||||
offsetStyle: "center" |
||||
}); |
||||
} |
||||
} |
||||
}, { |
||||
el: { |
||||
ref: function (_ref) { |
||||
btns.push(_ref); |
||||
}, |
||||
type: 'bi.button', |
||||
text: 'bubble测试(右边显示)', |
||||
height: 30, |
||||
handler: function () { |
||||
BI.Bubbles.show("singleBubble3", "bubble测试", this, { |
||||
offsetStyle: "right" |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
]; |
||||
return { |
||||
type: "bi.left", |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items: items |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.bubble", Demo.Bubble); |
||||
@ -0,0 +1,39 @@
|
||||
Demo.Title = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-title" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
height: 50, |
||||
title: "title提示", |
||||
text: "移上去有title提示", |
||||
textAlign: "center" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
height: 50, |
||||
disabled: true, |
||||
warningTitle: "title错误提示", |
||||
text: "移上去有title错误提示", |
||||
textAlign: "center" |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
height: 50, |
||||
disabled: true, |
||||
tipType: "success", |
||||
title: "自定义title提示效果", |
||||
warningTitle: "自定义title提示效果", |
||||
text: "自定义title提示效果", |
||||
textAlign: "center" |
||||
}], |
||||
hgap: 300, |
||||
vgap: 20 |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.title", Demo.Title); |
||||
@ -0,0 +1,55 @@
|
||||
Demo.Toast = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-toast" |
||||
}, |
||||
render: function () { |
||||
var items = [ |
||||
{ |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '简单Toast测试', |
||||
height : 30, |
||||
handler: function(){ |
||||
BI.Msg.toast("这是一条简单的数据"); |
||||
} |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '很长的Toast测试', |
||||
height : 30, |
||||
handler: function(){ |
||||
BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据") |
||||
} |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '非常长的Toast测试', |
||||
height : 30, |
||||
handler: function(){ |
||||
BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据") |
||||
} |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.button', |
||||
text: '错误提示Toast测试', |
||||
level: "warning", |
||||
height : 30, |
||||
handler: function(){ |
||||
BI.Msg.toast("错误提示Toast测试", "warning"); |
||||
} |
||||
} |
||||
} |
||||
]; |
||||
BI.createWidget({ |
||||
type: "bi.left", |
||||
element: this, |
||||
vgap : 200, |
||||
hgap : 20, |
||||
items: items |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.toast", Demo.Toast); |
||||
@ -0,0 +1,9 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
} |
||||
}); |
||||
$.shortcut("demo.part_tree", Demo.Func); |
||||
@ -0,0 +1,9 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
} |
||||
}); |
||||
$.shortcut("demo.sync_tree", Demo.Func); |
||||
@ -0,0 +1,52 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
_createDefaultTree: function(){ |
||||
var tree = BI.createWidget({ |
||||
type: "bi.tree_view" |
||||
}); |
||||
tree.initTree([ |
||||
{"id":1, "pId":0, "text":"test1", open:true}, |
||||
{"id":11, "pId":1, "text":"test11"}, |
||||
{"id":12, "pId":1, "text":"test12"}, |
||||
{"id":111, "pId":11, "text":"test111"}, |
||||
{"id":2, "pId":0, "text":"test2", open:true}, |
||||
{"id":21, "pId":2, "text":"test21"}, |
||||
{"id":22, "pId":2, "text":"test22"} |
||||
]) |
||||
return tree; |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
BI.createWidget({ |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 1, |
||||
element: this, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
el: this._createDefaultTree() |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
text: 'tree.initTree([{"id":1, "pId":0, "text":"test1", open:true},{"id":11, "pId":1, "text":"test11"},{"id":12, "pId":1, "text":"test12"},{"id":111, "pId":11, "text":"test111"}])', |
||||
whiteSpace: "normal" |
||||
}, |
||||
height: 50 |
||||
} |
||||
] |
||||
} |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.tree_view", Demo.Func); |
||||
@ -0,0 +1,96 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
_createNav: function(v){ |
||||
var m = this.MONTH, y = this.YEAR; |
||||
m += v; |
||||
while(m < 0){ |
||||
y--; |
||||
m += 12; |
||||
} |
||||
while(m > 11){ |
||||
y++; |
||||
m -= 12; |
||||
} |
||||
var calendar = BI.createWidget({ |
||||
type: "bi.calendar", |
||||
logic: { |
||||
dynamic: false |
||||
}, |
||||
year: y, |
||||
month: m, |
||||
day: this.DAY |
||||
}) |
||||
calendar.setValue(this.selectedTime); |
||||
return calendar; |
||||
}, |
||||
|
||||
_stringfyTimeObject: function(timeOb){ |
||||
return timeOb.year + "-" + (timeOb.month + 1) + "-" + timeOb.day; |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
var combo1 = BI.createWidget({ |
||||
type: "bi.bubble_combo", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "测试", |
||||
height: 25 |
||||
}, |
||||
popup: { |
||||
el: { |
||||
type: "bi.button_group", |
||||
items: BI.makeArray(100, { |
||||
type: "bi.text_item", |
||||
height: 25, |
||||
text: "item" |
||||
}), |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}] |
||||
}, |
||||
maxHeight: 200 |
||||
} |
||||
}) |
||||
var combo2 = BI.createWidget({ |
||||
type: "bi.bubble_combo", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "测试", |
||||
height: 25 |
||||
}, |
||||
popup: { |
||||
type: "bi.bubble_bar_popup_view", |
||||
el: { |
||||
type: "bi.button_group", |
||||
items: BI.makeArray(100, { |
||||
type: "bi.text_item", |
||||
height: 25, |
||||
text: "item" |
||||
}), |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}] |
||||
}, |
||||
maxHeight: 200, |
||||
minWidth: 600 |
||||
} |
||||
}) |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: combo1, |
||||
left: 100, |
||||
top: 100 |
||||
}, { |
||||
el: combo2, |
||||
left: 100, |
||||
bottom: 100 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.bubble_combo", Demo.Func); |
||||
@ -0,0 +1,84 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
_createNav: function(v){ |
||||
var m = this.MONTH, y = this.YEAR; |
||||
m += v; |
||||
while(m < 0){ |
||||
y--; |
||||
m += 12; |
||||
} |
||||
while(m > 11){ |
||||
y++; |
||||
m -= 12; |
||||
} |
||||
var calendar = BI.createWidget({ |
||||
type: "bi.calendar", |
||||
logic: { |
||||
dynamic: false |
||||
}, |
||||
year: y, |
||||
month: m, |
||||
day: this.DAY |
||||
}) |
||||
calendar.setValue(this.selectedTime); |
||||
return calendar; |
||||
}, |
||||
|
||||
_stringfyTimeObject: function(timeOb){ |
||||
return timeOb.year + "-" + (timeOb.month + 1) + "-" + timeOb.day; |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, d = new Date(); |
||||
this.YEAR = d.getFullYear(); |
||||
this.MONTH = d.getMonth(); |
||||
this.DAY = d.getDate(); |
||||
|
||||
this.selectedTime = { |
||||
year: this.YEAR, |
||||
month: this.MONTH, |
||||
day: this.DAY |
||||
}; |
||||
|
||||
var tip = BI.createWidget({ |
||||
type: "bi.label" |
||||
}); |
||||
|
||||
var nav = BI.createWidget({ |
||||
type: "bi.navigation", |
||||
element: this, |
||||
tab: { |
||||
height: 30, |
||||
items: [{ |
||||
once: false, |
||||
text: "后退", |
||||
value: -1, |
||||
cls: "mvc-button layout-bg3" |
||||
},tip, { |
||||
once: false, |
||||
text: "前进", |
||||
value: 1, |
||||
cls: "mvc-button layout-bg4" |
||||
}] |
||||
}, |
||||
cardCreator: BI.bind(this._createNav, this), |
||||
|
||||
afterCardCreated: function(){ |
||||
|
||||
}, |
||||
|
||||
afterCardShow: function(){ |
||||
this.setValue(self.selectedTime); |
||||
} |
||||
}) |
||||
|
||||
nav.on(BI.Navigation.EVENT_CHANGE, function(){ |
||||
self.selectedTime = nav.getValue(); |
||||
tip.setText(self._stringfyTimeObject(self.selectedTime)); |
||||
}); |
||||
tip.setText(this._stringfyTimeObject(this.selectedTime)); |
||||
} |
||||
}); |
||||
$.shortcut("demo.calendar", Demo.Func); |
||||
@ -0,0 +1,21 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.color_chooser", |
||||
width: 30, |
||||
height: 30 |
||||
}, |
||||
left: 100, |
||||
top: 250 |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.color_chooser", Demo.Func); |
||||
@ -0,0 +1,35 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
var canvas = BI.createWidget({ |
||||
type: "bi.complex_canvas", |
||||
width: 500, |
||||
height: 600 |
||||
}); |
||||
canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, { |
||||
offset: 20, |
||||
strokeStyle: "red", |
||||
lineWidth: 2 |
||||
}); |
||||
|
||||
canvas.branch(220, 155, 120, 110, 150, 200, { |
||||
offset: 40 |
||||
}); |
||||
|
||||
canvas.stroke(); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: canvas, |
||||
left: 100, |
||||
top: 50 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.complex_canvas", Demo.Func); |
||||
@ -0,0 +1,42 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
var editor = BI.createWidget({ |
||||
type: "bi.text_editor", |
||||
width: 200, |
||||
height: 30, |
||||
value: "这是复制的内容" |
||||
}); |
||||
var zclip = BI.createWidget({ |
||||
type: 'bi.zero_clip', |
||||
width: 100, |
||||
height: 100, |
||||
cls: 'layout-bg1', |
||||
copy: function () { |
||||
return editor.getValue(); |
||||
}, |
||||
|
||||
afterCopy: function () { |
||||
BI.Msg.toast(editor.getValue()); |
||||
} |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: editor, |
||||
left: 100, |
||||
top: 50, |
||||
}, { |
||||
el: zclip, |
||||
left: 100, |
||||
top: 100 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.zclip", Demo.Func); |
||||
@ -0,0 +1,149 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
var relation = BI.createWidget({ |
||||
type: "bi.branch_relation", |
||||
items: [ |
||||
{ |
||||
id: -1, |
||||
value: "根目录", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 1, |
||||
pId: -1, |
||||
value: "第一级目录1", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 11, |
||||
pId: 1, |
||||
value: "第二级文件1", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 12, |
||||
pId: 1, |
||||
value: "第二级目录1", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 121, |
||||
pId: 12, |
||||
value: "第三级目录1", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 122, |
||||
pId: 12, |
||||
value: "第三级文件1", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 1211, |
||||
pId: 121, |
||||
value: "第四级目录", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 12111, |
||||
pId: 1211, |
||||
value: "第五级文件1", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 2, |
||||
pId: -1, |
||||
value: "第一级目录2", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 21, |
||||
pId: 2, |
||||
value: "第二级目录2", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 22, |
||||
pId: 2, |
||||
value: "第二级文件2", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 211, |
||||
pId: 21, |
||||
value: "第三级目录2", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 212, |
||||
pId: 21, |
||||
value: "第三级文件2", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
}, |
||||
{ |
||||
id: 2111, |
||||
pId: 211, |
||||
value: "第四级文件2", |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
width: 180, |
||||
height: 100 |
||||
} |
||||
], |
||||
|
||||
direction: BI.Direction.Right, |
||||
align: BI.HorizontalAlign.Right, |
||||
|
||||
centerOffset: -50 |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.adaptive", |
||||
element: this, |
||||
items: [relation] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.branch_relation", Demo.Func); |
||||
@ -0,0 +1,233 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
_createBranchTree: function () { |
||||
var tree = BI.createWidget({ |
||||
type: "bi.branch_tree", |
||||
items: [{ |
||||
el: { |
||||
text: "且", |
||||
value: "且1", |
||||
cls: "layout-bg7" |
||||
}, |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1", |
||||
value: "这里是一段文字1" |
||||
}, { |
||||
el: { |
||||
text: "或", |
||||
value: "或2", |
||||
cls: "layout-bg7" |
||||
}, |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1435", |
||||
value: "这里是一段文字1435" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1xx", |
||||
value: "这里是一段文字1xx" |
||||
}, { |
||||
el: { |
||||
text: "且", |
||||
value: "且3", |
||||
cls: "layout-bg7" |
||||
}, |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "可以理解为一个条件", |
||||
value: "可以理解为一个条件" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "可以理解为一个条件v", |
||||
value: "可以理解为一个条件v" |
||||
}] |
||||
}] |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1xa", |
||||
value: "这里是一段文字1xa" |
||||
}] |
||||
}] |
||||
}); |
||||
return tree; |
||||
}, |
||||
|
||||
_createBranchMapTree: function () { |
||||
var tree = BI.createWidget({ |
||||
type: "bi.branch_tree", |
||||
el: { |
||||
type: "bi.virtual_group" |
||||
}, |
||||
items: [{ |
||||
text: "且", |
||||
value: "且1", |
||||
cls: "layout-bg7", |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1", |
||||
value: "这里是一段文字1" |
||||
}, { |
||||
text: "或", |
||||
value: "或2", |
||||
cls: "layout-bg7", |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1435", |
||||
value: "这里是一段文字1435" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1xx", |
||||
value: "这里是一段文字1xx" |
||||
}, { |
||||
text: "且", |
||||
value: "且3", |
||||
cls: "layout-bg7", |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "可以理解为一个条件", |
||||
value: "可以理解为一个条件" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "可以理解为一个条件v", |
||||
value: "可以理解为一个条件v" |
||||
}] |
||||
}] |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1xa", |
||||
value: "这里是一段文字1xa" |
||||
}] |
||||
}] |
||||
}); |
||||
return tree; |
||||
}, |
||||
|
||||
render: function () { |
||||
var tree = this._createBranchTree(); |
||||
var mapTree = this._createBranchMapTree(); |
||||
|
||||
function getItems() { |
||||
return [{ |
||||
text: "且", |
||||
value: "且", |
||||
cls: "layout-bg7", |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字", |
||||
value: "这里是一段文字" |
||||
}, { |
||||
text: "或", |
||||
value: "或2", |
||||
cls: "layout-bg7", |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字", |
||||
value: "这里是一段文字" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字" , |
||||
value: "这里是一段文字" |
||||
}, { |
||||
text: "且", |
||||
value: "且3", |
||||
cls: "layout-bg7", |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "可以理解为一个条件", |
||||
value: "可以理解为一个条件" |
||||
}] |
||||
}] |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1xa", |
||||
value: "这里是一段文字1xa" |
||||
}] |
||||
}]; |
||||
} |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.center", |
||||
element: this, |
||||
items: [{ |
||||
type: "bi.vtape", |
||||
items: [{ |
||||
el: tree |
||||
}, { |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.alert("", tree.getValue()); |
||||
} |
||||
} |
||||
}] |
||||
}, { |
||||
type: "bi.vtape", |
||||
items: [{ |
||||
el: mapTree |
||||
}, { |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "populate", |
||||
handler: function () { |
||||
mapTree.populate(getItems()); |
||||
} |
||||
} |
||||
}, { |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.alert("", mapTree.getValue()); |
||||
} |
||||
} |
||||
}] |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.branch_tree", Demo.Func); |
||||
@ -0,0 +1,43 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
var tree = BI.createWidget({ |
||||
type: "bi.display_tree", |
||||
element: this |
||||
}); |
||||
|
||||
tree.initTree([{ |
||||
id: 1, |
||||
text: "第一项", |
||||
open: true |
||||
}, { |
||||
id: 2, |
||||
text: "第二项" |
||||
}, { |
||||
id: 11, |
||||
pId: 1, |
||||
text: "子项1(共2个)", |
||||
open: true |
||||
}, { |
||||
id: 111, |
||||
pId: 11, |
||||
text: "子子项1" |
||||
}, { |
||||
id: 112, |
||||
pId: 11, |
||||
text: "子子项2" |
||||
}, { |
||||
id: 12, |
||||
pId: 1, |
||||
text: "子项2" |
||||
}, { |
||||
id: 13, |
||||
pId: 1, |
||||
text: "子项3" |
||||
}]); |
||||
} |
||||
}); |
||||
$.shortcut("demo.display_tree", Demo.Func); |
||||
@ -0,0 +1,103 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
_createHandStandBranchTree: function () { |
||||
var tree = BI.createWidget({ |
||||
type: "bi.handstand_branch_tree", |
||||
expander: {}, |
||||
el: { |
||||
layouts: [{ |
||||
type: "bi.horizontal_adapt", |
||||
verticalAlign: BI.VerticalAlign.Top |
||||
}] |
||||
}, |
||||
items: [{ |
||||
el: { |
||||
text: "且", |
||||
value: "且1", |
||||
cls: "layout-bg7" |
||||
}, |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1", |
||||
value: "这里是一段文字1" |
||||
}, { |
||||
el: { |
||||
text: "或", |
||||
value: "或2", |
||||
cls: "layout-bg7" |
||||
}, |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1435", |
||||
value: "这里是一段文字1435" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1xx", |
||||
value: "这里是一段文字1xx" |
||||
}, { |
||||
el: { |
||||
text: "且", |
||||
value: "且3", |
||||
cls: "layout-bg7" |
||||
}, |
||||
children: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "可以理解为一个条件", |
||||
value: "可以理解为一个条件" |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "可以理解为一个条件v", |
||||
value: "可以理解为一个条件v" |
||||
}] |
||||
}] |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
textAlign: "left", |
||||
text: "这里是一段文字1xa", |
||||
value: "这里是一段文字1xa" |
||||
}] |
||||
}] |
||||
}); |
||||
return tree; |
||||
}, |
||||
|
||||
render: function () { |
||||
var tree = this._createHandStandBranchTree(); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.center", |
||||
element: this, |
||||
items: [{ |
||||
type: "bi.vtape", |
||||
items: [{ |
||||
el: tree |
||||
}, { |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.alert("", tree.getValue()); |
||||
} |
||||
} |
||||
}] |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.handstand_branch_tree", Demo.Func); |
||||
@ -0,0 +1,87 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
var tree = BI.createWidget({ |
||||
type: "bi.level_tree", |
||||
chooseType: 0, |
||||
items: [{ |
||||
id: 1, |
||||
text: "第一项", |
||||
value: 1, |
||||
isParent: true |
||||
}, { |
||||
id: 2, |
||||
text: "第二项", |
||||
value: 2, |
||||
isParent: true |
||||
}, { |
||||
id: 3, |
||||
text: "第三项", |
||||
value: 1, |
||||
isParent: true, |
||||
open: true |
||||
}, { |
||||
id: 4, |
||||
text: "第四项", |
||||
value: 1 |
||||
}, { |
||||
id: 11, |
||||
pId: 1, |
||||
text: "子项1", |
||||
value: 11 |
||||
}, { |
||||
id: 12, |
||||
pId: 1, |
||||
text: "子项2", |
||||
value: 12 |
||||
}, { |
||||
id: 13, |
||||
pId: 1, |
||||
text: "子项3", |
||||
value: 13 |
||||
}, { |
||||
id: 21, |
||||
pId: 2, |
||||
text: "子项1", |
||||
value: 21 |
||||
}, { |
||||
id: 31, |
||||
pId: 3, |
||||
text: "子项1", |
||||
value: 31 |
||||
}, { |
||||
id: 32, |
||||
pId: 3, |
||||
text: "子项2", |
||||
value: 32 |
||||
}, { |
||||
id: 33, |
||||
pId: 3, |
||||
text: "子项3", |
||||
value: 33 |
||||
}] |
||||
}) |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.vtape", |
||||
element: this, |
||||
items: [{ |
||||
el: tree |
||||
}, { |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.alert("", tree.getValue()); |
||||
} |
||||
} |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.level_tree", Demo.Func); |
||||
@ -0,0 +1,86 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
render: function () { |
||||
//value值一定要是字符串
|
||||
var tree = BI.createWidget({ |
||||
type: "bi.simple_tree", |
||||
items: [] |
||||
}); |
||||
|
||||
tree.populate([{ |
||||
id: 1, |
||||
text: "第一项", |
||||
value: "1" |
||||
}, { |
||||
id: 2, |
||||
text: "第二项", |
||||
value: "2" |
||||
}, { |
||||
id: 3, |
||||
text: "第三项", |
||||
value: "3", |
||||
open: true |
||||
}, { |
||||
id: 11, |
||||
pId: 1, |
||||
text: "子项1", |
||||
value: "11" |
||||
}, { |
||||
id: 12, |
||||
pId: 1, |
||||
text: "子项2", |
||||
value: "12" |
||||
}, { |
||||
id: 13, |
||||
pId: 1, |
||||
text: "子项3", |
||||
value: "13" |
||||
}, { |
||||
id: 31, |
||||
pId: 3, |
||||
text: "子项1", |
||||
value: "31" |
||||
}, { |
||||
id: 32, |
||||
pId: 3, |
||||
text: "子项2", |
||||
value: "32" |
||||
}, { |
||||
id: 33, |
||||
pId: 3, |
||||
text: "子项3", |
||||
value: "33" |
||||
}], "z"); |
||||
BI.createWidget({ |
||||
type: "bi.vtape", |
||||
element: this, |
||||
items: [{ |
||||
el: tree |
||||
}, { |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "setValue(['31', '32', '33'])", |
||||
handler: function () { |
||||
tree.setValue(['31', '32', '33']); |
||||
} |
||||
} |
||||
}, { |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.alert("", JSON.stringify(tree.getValue())); |
||||
} |
||||
} |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.simple_tree", Demo.Func); |
||||
@ -0,0 +1,25 @@
|
||||
Demo.Center = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-center" |
||||
}, |
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.tab", |
||||
ref: function () { |
||||
self.tab = this; |
||||
}, |
||||
defaultShowIndex: "demo.face", |
||||
cardCreator: function (v) { |
||||
return BI.createWidget({ |
||||
type: v |
||||
}); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.tab.setSelect(v); |
||||
} |
||||
}); |
||||
$.shortcut("demo.center", Demo.Center); |
||||
@ -0,0 +1,40 @@
|
||||
Demo.TreeValueChooser = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-tree-value-chooser" |
||||
}, |
||||
render: function () { |
||||
|
||||
var tree = []; |
||||
for (var i = 0; i < 21; i++) { |
||||
tree.push({ |
||||
value: i + "", |
||||
text: i + "", |
||||
id: i + "", |
||||
pId: null |
||||
}); |
||||
for (var j = 0; j < 9; j++) { |
||||
tree.push({ |
||||
value: i + "-" + j, |
||||
text: j + "", |
||||
id: i + "-" + j, |
||||
pId: i + "" |
||||
}) |
||||
} |
||||
} |
||||
var widget = BI.createWidget({ |
||||
type: "bi.tree_value_chooser_combo", |
||||
width: 300, |
||||
items: tree, |
||||
itemsCreator: function (op, callback) { |
||||
callback(tree); |
||||
} |
||||
}); |
||||
return { |
||||
type: "bi.vertical", |
||||
hgap: 200, |
||||
vgap: 10, |
||||
items: [widget] |
||||
}; |
||||
} |
||||
}); |
||||
$.shortcut("demo.tree_value_chooser", Demo.TreeValueChooser); |
||||
@ -0,0 +1,20 @@
|
||||
Demo.ValueChooserCombo = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-value-chooser-combo" |
||||
}, |
||||
render: function () { |
||||
var widget = BI.createWidget({ |
||||
type: "bi.value_chooser_combo", |
||||
itemsCreator: function (op, callback) { |
||||
callback(BI.deepClone(Demo.MULTI_COMBO_ITEMS)); |
||||
} |
||||
}); |
||||
return { |
||||
type: "bi.vertical", |
||||
hgap: 200, |
||||
vgap: 10, |
||||
items: [widget] |
||||
}; |
||||
} |
||||
}); |
||||
$.shortcut("demo.value_chooser_combo", Demo.ValueChooserCombo); |
||||
@ -0,0 +1,117 @@
|
||||
Demo.BASE_CONFIG = [{ |
||||
id: 2, |
||||
text: "基础控件", |
||||
open: true |
||||
}, { |
||||
pId: 2, |
||||
text: "bi.label", |
||||
value: "demo.label" |
||||
}, { |
||||
pId: 2, |
||||
text: "title提示", |
||||
value: "demo.title" |
||||
}, { |
||||
pId: 2, |
||||
text: "气泡提示", |
||||
value: "demo.bubble" |
||||
}, { |
||||
pId: 2, |
||||
text: "toast提示", |
||||
value: "demo.toast" |
||||
}, { |
||||
pId: 2, |
||||
text: "message提示", |
||||
value: "demo.message" |
||||
}, { |
||||
pId: 2, |
||||
id: 201, |
||||
text: "button" |
||||
}, { |
||||
pId: 201, |
||||
text: "bi.button", |
||||
value: "demo.button" |
||||
}, { |
||||
pId: 201, |
||||
text: "bi.text_button", |
||||
value: "demo.text_button" |
||||
}, { |
||||
pId: 201, |
||||
text: "bi.icon_button", |
||||
value: "demo.icon_button" |
||||
}, { |
||||
pId: 201, |
||||
text: "bi.image_button", |
||||
value: "demo.image_button" |
||||
}, { |
||||
pId: 2, |
||||
id: 202, |
||||
text: "editor" |
||||
}, { |
||||
pId: 202, |
||||
text: "bi.editor", |
||||
value: "demo.editor" |
||||
}, { |
||||
pId: 202, |
||||
text: "bi.code_editor", |
||||
value: "demo.code_editor" |
||||
}, { |
||||
pId: 202, |
||||
text: "bi.multifile_editor", |
||||
value: "demo.multifile_editor" |
||||
}, { |
||||
pId: 202, |
||||
text: "bi.textarea_editor", |
||||
value: "demo.textarea_editor" |
||||
}, { |
||||
pId: 202, |
||||
text: "bi.formula_editor", |
||||
value: "demo.formula_editor" |
||||
}, { |
||||
pId: 2, |
||||
id: 203, |
||||
text: "tree" |
||||
}, { |
||||
pId: 203, |
||||
text: "bi.tree_view", |
||||
value: "demo.tree_view" |
||||
}, { |
||||
pId: 203, |
||||
text: "bi.sync_tree", |
||||
value: "demo.sync_tree" |
||||
}, { |
||||
pId: 203, |
||||
text: "bi.part_tree", |
||||
value: "demo.part_tree" |
||||
}, { |
||||
pId: 2, |
||||
id: 204, |
||||
text: "table" |
||||
}, { |
||||
pId: 204, |
||||
text: "bi.table_view", |
||||
value: "demo.table_view" |
||||
}, { |
||||
pId: 204, |
||||
text: "bi.grid_table", |
||||
value: "demo.grid_table" |
||||
}, { |
||||
pId: 204, |
||||
text: "bi.collection_table", |
||||
value: "demo.collection_table" |
||||
}, { |
||||
pId: 204, |
||||
text: "bi.resizable_table", |
||||
value: "demo.resizable_table" |
||||
}, { |
||||
pId: 2, |
||||
text: "bi.canvas", |
||||
value: "demo.canvas" |
||||
}, { |
||||
pId: 2, |
||||
text: "bi.pager", |
||||
value: "demo.pager" |
||||
}, { |
||||
pId: 2, |
||||
text: "bi.svg", |
||||
value: "demo.svg" |
||||
}]; |
||||
@ -0,0 +1,97 @@
|
||||
Demo.CASE_CONFIG = [{ |
||||
id: 3, |
||||
text: "实例控件", |
||||
open: true, |
||||
}, { |
||||
pId: 3, |
||||
id: 301, |
||||
text: "editors" |
||||
}, { |
||||
pId: 301, |
||||
text: "bi.record_editor", |
||||
value: "demo.record_editor" |
||||
}, { |
||||
pId: 301, |
||||
text: "bi.shelter_editor", |
||||
value: "demo.shelter_editor" |
||||
}, { |
||||
pId: 301, |
||||
text: "bi.sign_editor", |
||||
value: "demo.sign_editor" |
||||
}, { |
||||
pId: 301, |
||||
text: "bi.state_editor", |
||||
value: "demo.state_editor" |
||||
}, { |
||||
pId: 3, |
||||
id: 302, |
||||
text: "combo" |
||||
}, { |
||||
pId: 302, |
||||
text: "bi.bubble_combo", |
||||
value: "demo.bubble_combo" |
||||
}, { |
||||
pId: 3, |
||||
id: 303, |
||||
text: "tree" |
||||
}, { |
||||
pId: 303, |
||||
text: "bi.branch_tree", |
||||
value: "demo.branch_tree" |
||||
}, { |
||||
pId: 303, |
||||
text: "bi.handstand_branch_tree", |
||||
value: "demo.handstand_branch_tree" |
||||
}, { |
||||
pId: 303, |
||||
text: "bi.display_tree", |
||||
value: "demo.display_tree" |
||||
}, { |
||||
pId: 303, |
||||
text: "bi.simple_tree", |
||||
value: "demo.simple_tree" |
||||
}, { |
||||
pId: 303, |
||||
text: "bi.level_tree", |
||||
value: "demo.level_tree" |
||||
}, { |
||||
pId: 303, |
||||
text: "bi.branch_relation", |
||||
value: "demo.branch_relation" |
||||
}, { |
||||
pId: 3, |
||||
id: 304, |
||||
text: "table" |
||||
}, { |
||||
pId: 304, |
||||
text: "bi.adaptive_table", |
||||
value: "demo.adaptive_table" |
||||
}, { |
||||
pId: 304, |
||||
text: "bi.tree_table", |
||||
value: "demo.tree_table" |
||||
}, { |
||||
pId: 304, |
||||
text: "bi.layer_tree_table", |
||||
value: "demo.layer_tree_table" |
||||
}, { |
||||
pId: 3, |
||||
text: "bi.calendar", |
||||
value: "demo.calendar" |
||||
}, { |
||||
pId: 3, |
||||
text: "bi.zclip", |
||||
value: "demo.zclip" |
||||
}, { |
||||
pId: 3, |
||||
text: "bi.complex_canvas", |
||||
value: "demo.complex_canvas" |
||||
}, { |
||||
pId: 3, |
||||
text: "bi.color_chooser", |
||||
value: "demo.color_chooser" |
||||
}, { |
||||
pId: 3, |
||||
text: "bi.segment", |
||||
value: "demo.segment" |
||||
}]; |
||||
@ -0,0 +1,15 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.COMPONENT_CONFIG = [{ |
||||
id: 15, |
||||
text: "部件" |
||||
}, { |
||||
pId: 15, |
||||
text: "bi.value_chooser_combo", |
||||
value: "demo.value_chooser_combo" |
||||
}, { |
||||
pId: 15, |
||||
text: "bi.tree_value_chooser_combo", |
||||
value: "demo.tree_value_chooser" |
||||
}]; |
||||
@ -0,0 +1,180 @@
|
||||
Demo.CORE_CONFIG = [{ |
||||
id: 1, |
||||
text: "核心控件", |
||||
}, { |
||||
id: 101, |
||||
pId: 1, |
||||
text: "布局" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.center_adapt", |
||||
value: "demo.center_adapt" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.vertical_adapt", |
||||
value: "demo.vertical_adapt" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.horizontal_adapt", |
||||
value: "demo.horizontal_adapt" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.horizontal_auto", |
||||
value: "demo.horizontal_auto" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.horizontal_float", |
||||
value: "demo.horizontal_float" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.left_right_vertical_adapt", |
||||
value: "demo.left_right_vertical_adapt" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.center", |
||||
value: "demo.center_layout" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.float_center", |
||||
value: "demo.float_center" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.vertical", |
||||
value: "demo.vertical" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.horizontal", |
||||
value: "demo.horizontal" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.border", |
||||
value: "demo.border" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.left, bi.right", |
||||
value: "demo.flow" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.inline", |
||||
value: "demo.inline" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.htape", |
||||
value: "demo.htape" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.vtape", |
||||
value: "demo.vtape" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.grid", |
||||
value: "demo.grid" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.table", |
||||
value: "demo.table_layout" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.td", |
||||
value: "demo.td" |
||||
}, { |
||||
pId: 1, |
||||
id: 102, |
||||
text: "抽象控件" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.button_group", |
||||
value: "demo.button_group" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.button_tree", |
||||
value: "demo.button_tree" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.virtual_group", |
||||
value: "demo.virtual_group" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.custom_tree", |
||||
value: "demo.custom_tree" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.grid_view", |
||||
value: "demo.grid_view" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.collection_view", |
||||
value: "demo.collection_view" |
||||
}, { |
||||
pId: 102, |
||||
id: 10201, |
||||
text: "组合控件" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.combo", |
||||
value: "demo.combo" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.expander", |
||||
value: "demo.expander" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.group_combo", |
||||
value: "demo.group_combo" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.loader", |
||||
value: "demo.loader" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.navigation", |
||||
value: "demo.navigation" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.searcher", |
||||
value: "demo.searcher" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.switcher", |
||||
value: "demo.switcher" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.tab", |
||||
value: "demo.tab" |
||||
}, { |
||||
pId: 102, |
||||
id: 10202, |
||||
text: "弹出层" |
||||
}, { |
||||
pId: 10202, |
||||
text: "bi.layer_float_box", |
||||
value: "demo.layer_float_box" |
||||
}, { |
||||
pId: 10202, |
||||
text: "bi.layer_popup", |
||||
value: "demo.layer_popup" |
||||
}, { |
||||
pId: 10202, |
||||
text: "bi.layer_searcher", |
||||
value: "demo.layer_searcher" |
||||
}, { |
||||
pId: 1, |
||||
text: "widget", |
||||
value: "demo.widget" |
||||
}, { |
||||
pId: 1, |
||||
text: "single", |
||||
value: "demo.single" |
||||
}, { |
||||
pId: 1, |
||||
text: "BasicButton", |
||||
value: "demo.basic_button" |
||||
}, { |
||||
pId: 1, |
||||
text: "NodeButton", |
||||
value: "demo.node_button" |
||||
}, { |
||||
pId: 1, |
||||
text: "pane", |
||||
value: "demo.pane" |
||||
}]; |
||||
@ -0,0 +1,16 @@
|
||||
Demo.WIDGET_CONFIG = [{ |
||||
id: 4, |
||||
text: "详细控件" |
||||
}, { |
||||
pId: 4, |
||||
text: "bi.multi_select_combo", |
||||
value: "demo.multi_select_combo" |
||||
}, { |
||||
pId: 4, |
||||
text: "bi.path_chooser", |
||||
value: "demo.path_chooser" |
||||
}, { |
||||
pId: 4, |
||||
text: "bi.relation_view", |
||||
value: "demo.relation_view" |
||||
}]; |
||||
@ -0,0 +1,11 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.layout", |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.combo", Demo.Func); |
||||
@ -0,0 +1,24 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.button_group", |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}, { |
||||
type: "bi.center_adapt", |
||||
}], |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)" |
||||
}, { |
||||
type: "bi.button", |
||||
text: "1" |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.button_group", Demo.Func); |
||||
@ -0,0 +1,26 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.button_tree", |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}, { |
||||
type: "bi.center_adapt", |
||||
}], |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "0", |
||||
value: 0 |
||||
}, { |
||||
type: "bi.button", |
||||
text: "1", |
||||
value: 1 |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.button_tree", Demo.Func); |
||||
@ -0,0 +1,39 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
var items = []; |
||||
var cellCount = 100; |
||||
for (var i = 0; i < cellCount; i++) { |
||||
items[i] = { |
||||
type: "bi.label", |
||||
text: i |
||||
}; |
||||
} |
||||
var grid = BI.createWidget({ |
||||
type: "bi.collection_view", |
||||
items: items, |
||||
cellSizeAndPositionGetter: function (index) { |
||||
return { |
||||
x: index % 10 * 50, |
||||
y: Math.floor(index / 10) * 50, |
||||
width: 50, |
||||
height: 50 |
||||
} |
||||
} |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: grid, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.collection_view", Demo.Func); |
||||
@ -0,0 +1,50 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
render: function () { |
||||
var items = []; |
||||
var rowCount = 10000, columnCount = 100; |
||||
for (var i = 0; i < rowCount; i++) { |
||||
items[i] = []; |
||||
for (var j = 0; j < columnCount; j++) { |
||||
items[i][j] = { |
||||
type: "bi.label", |
||||
text: i + "-" + j |
||||
} |
||||
} |
||||
} |
||||
var grid = BI.createWidget({ |
||||
type: "bi.grid_view", |
||||
items: items, |
||||
scrollTop: 100, |
||||
rowHeightGetter: function () { |
||||
return 30; |
||||
}, |
||||
columnWidthGetter: function () { |
||||
return 100; |
||||
} |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 1, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: grid |
||||
}] |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10 |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.grid_view", Demo.Func); |
||||
@ -0,0 +1,79 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
_createItems: function () { |
||||
var items = BI.makeArray(100, { |
||||
type: "demo.virtual_group_item" |
||||
}); |
||||
items[0].value = BI.UUID(); |
||||
return items; |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.vertical", |
||||
vgap: 20, |
||||
items: [{ |
||||
type: "bi.virtual_group", |
||||
width: 500, |
||||
height: 300, |
||||
ref: function () { |
||||
self.buttonMap = this; |
||||
}, |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}, { |
||||
type: "bi.center_adapt", |
||||
}], |
||||
items: this._createItems() |
||||
}, { |
||||
type: "bi.button", |
||||
text: "点击刷新", |
||||
handler: function () { |
||||
var items = self._createItems(); |
||||
items.pop(); |
||||
self.buttonMap.populate(items); |
||||
} |
||||
}] |
||||
|
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.virtual_group", Demo.Func); |
||||
|
||||
Demo.Item = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-item", |
||||
height: 30 |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.label", |
||||
ref: function () { |
||||
self.label = this; |
||||
}, |
||||
height: this.options.height, |
||||
text: "这是一个测试项" + BI.UUID() |
||||
} |
||||
}, |
||||
|
||||
update: function (item) { |
||||
this.label.setText(item.value); |
||||
console.log("更新了一项"); |
||||
}, |
||||
|
||||
created: function () { |
||||
console.log("创建了一项"); |
||||
}, |
||||
|
||||
destroyed: function () { |
||||
console.log("删除了一项"); |
||||
} |
||||
}); |
||||
$.shortcut("demo.virtual_group_item", Demo.Item); |
||||
@ -0,0 +1,245 @@
|
||||
Demo.Func = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-func" |
||||
}, |
||||
|
||||
_createDefaultTree: function () { |
||||
var TREEITEMS = [{id: -1, pId: -2, value: "根目录", open: true, type: "bi.plus_group_node", height: 25}, |
||||
{id: 1, pId: -1, value: "第一级目录1", type: "bi.plus_group_node", height: 25}, |
||||
{id: 11, pId: 1, value: "第二级文件1", type: "bi.single_select_item", height: 25}, |
||||
{id: 12, pId: 1, value: "第二级目录2", type: "bi.plus_group_node", height: 25}, |
||||
{id: 121, pId: 12, value: "第三级目录1", type: "bi.plus_group_node", height: 25}, |
||||
{id: 122, pId: 12, value: "第三级文件1", type: "bi.single_select_item", height: 25}, |
||||
{id: 1211, pId: 121, value: "第四级目录1", type: "bi.plus_group_node", height: 25}, |
||||
{id: 12111, pId: 1211, value: "第五级文件1", type: "bi.single_select_item", height: 25}, |
||||
{id: 2, pId: -1, value: "第一级目录2", type: "bi.plus_group_node", height: 25}, |
||||
{id: 21, pId: 2, value: "第二级目录3", type: "bi.plus_group_node", height: 25}, |
||||
{id: 22, pId: 2, value: "第二级文件2", type: "bi.single_select_item", height: 25}, |
||||
{id: 211, pId: 21, value: "第三级目录2", type: "bi.plus_group_node", height: 25}, |
||||
{id: 212, pId: 21, value: "第三级文件2", type: "bi.single_select_item", height: 25}, |
||||
{id: 2111, pId: 211, value: "第四级文件1", type: "bi.single_select_item", height: 25}]; |
||||
this.tree = BI.createWidget({ |
||||
type: "bi.custom_tree", |
||||
el: { |
||||
type: "bi.button_tree", |
||||
chooseType: 0, |
||||
layouts: [{ |
||||
type: "bi.vertical", |
||||
hgap: 30 |
||||
}] |
||||
}, |
||||
items: BI.deepClone(TREEITEMS) |
||||
}); |
||||
return this.tree; |
||||
}, |
||||
|
||||
_createAsyncTree: function () { |
||||
this.asyncTree = BI.createWidget({ |
||||
type: "bi.custom_tree", |
||||
itemsCreator: function (op, callback) { |
||||
if (!op.node) {//根节点
|
||||
callback([{ |
||||
"id": 1, |
||||
"pId": 0, |
||||
type: "bi.plus_group_node", |
||||
text: "test1", |
||||
value: 1, |
||||
height: 25, |
||||
isParent: true |
||||
}, { |
||||
"id": 2, |
||||
"pId": 0, |
||||
type: "bi.plus_group_node", |
||||
"text": "test2", |
||||
value: 1, |
||||
isParent: true, |
||||
open: true, |
||||
height: 25 |
||||
}]) |
||||
} else { |
||||
if (op.node.id == 1) { |
||||
callback([ |
||||
{ |
||||
"id": 11, |
||||
"pId": 1, |
||||
type: "bi.plus_group_node", |
||||
"text": "test11", |
||||
value: 11, |
||||
height: 25, |
||||
isParent: true |
||||
}, |
||||
{ |
||||
"id": 12, |
||||
"pId": 1, |
||||
type: "bi.single_select_item", |
||||
"text": "test12", |
||||
value: 12, |
||||
height: 35 |
||||
}, |
||||
{ |
||||
"id": 13, |
||||
"pId": 1, |
||||
type: "bi.single_select_item", |
||||
"text": "test13", |
||||
value: 13, |
||||
height: 35 |
||||
}, |
||||
{ |
||||
"id": 14, |
||||
"pId": 1, |
||||
type: "bi.single_select_item", |
||||
"text": "test14", |
||||
value: 14, |
||||
height: 35 |
||||
}, |
||||
{ |
||||
"id": 15, |
||||
"pId": 1, |
||||
type: "bi.single_select_item", |
||||
"text": "test15", |
||||
value: 15, |
||||
height: 35 |
||||
}, |
||||
{ |
||||
"id": 16, |
||||
"pId": 1, |
||||
type: "bi.single_select_item", |
||||
"text": "test16", |
||||
value: 16, |
||||
height: 35 |
||||
}, |
||||
{"id": 17, "pId": 1, type: "bi.single_select_item", "text": "test17", value: 17, height: 35} |
||||
]) |
||||
} else if (op.node.id == 2) { |
||||
callback([{ |
||||
"id": 21, |
||||
"pId": 2, |
||||
type: "bi.single_select_item", |
||||
"text": "test21", |
||||
value: 21, |
||||
height: 35 |
||||
}, |
||||
{ |
||||
"id": 22, |
||||
"pId": 2, |
||||
type: "bi.single_select_item", |
||||
"text": "test22", |
||||
value: 22, |
||||
height: 35 |
||||
}]) |
||||
} else if (op.node.id == 11) { |
||||
callback([{ |
||||
"id": 111, |
||||
"pId": 11, |
||||
type: "bi.single_select_item", |
||||
"text": "test111", |
||||
value: 111, |
||||
height: 35 |
||||
}]) |
||||
} |
||||
} |
||||
}, |
||||
el: { |
||||
type: "bi.loader", |
||||
next: false, |
||||
el: { |
||||
type: "bi.button_tree", |
||||
chooseType: 0, |
||||
layouts: [{ |
||||
type: "bi.vertical", |
||||
hgap: 30, |
||||
vgap: 0 |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
return this.asyncTree; |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
BI.createWidget({ |
||||
type: "bi.grid", |
||||
columns: 2, |
||||
rows: 1, |
||||
element: this, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
el: this._createDefaultTree() |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.center", |
||||
hgap: 10, |
||||
items: [{ |
||||
type: "bi.text_button", |
||||
cls: "mvc-button layout-bg2", |
||||
text: "getValue", |
||||
height: 30, |
||||
handler: function () { |
||||
BI.Msg.alert("", JSON.stringify(self.tree.getValue())); |
||||
} |
||||
}, { |
||||
type: "bi.text_button", |
||||
cls: "mvc-button layout-bg2", |
||||
text: "getNodeByValue(第一级目录1)", |
||||
height: 30, |
||||
handler: function () { |
||||
BI.Msg.alert("", "节点名称为: " + self.tree.getNodeByValue("第一级目录1").getValue()); |
||||
} |
||||
}] |
||||
}, |
||||
height: 30 |
||||
} |
||||
] |
||||
} |
||||
}, { |
||||
column: 1, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "异步加载数据", |
||||
height: 30 |
||||
}, |
||||
{ |
||||
el: this._createAsyncTree() |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.center", |
||||
hgap: 10, |
||||
items: [{ |
||||
type: "bi.text_button", |
||||
cls: "mvc-button layout-bg2", |
||||
text: "getValue", |
||||
height: 30, |
||||
handler: function () { |
||||
BI.Msg.alert("", JSON.stringify(self.asyncTree.getValue())); |
||||
} |
||||
}, { |
||||
type: "bi.text_button", |
||||
cls: "mvc-button layout-bg2", |
||||
text: "getNodeById(11)", |
||||
height: 30, |
||||
handler: function () { |
||||
BI.Msg.alert("", "节点名称为: " + (self.asyncTree.getNodeById(11) && self.asyncTree.getNodeById(11).getText())); |
||||
} |
||||
}] |
||||
}, |
||||
height: 30 |
||||
} |
||||
] |
||||
} |
||||
}] |
||||
}) |
||||
} |
||||
}); |
||||
$.shortcut("demo.custom_tree", Demo.Func); |
||||
@ -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); |
||||
@ -0,0 +1,97 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.BorderLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-border" |
||||
}, |
||||
|
||||
_createNorth: function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.label", |
||||
text: "North", |
||||
cls: "layout-bg1", |
||||
height: 30 |
||||
}) |
||||
}, |
||||
|
||||
_createWest: function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.center", |
||||
cls: "layout-bg2", |
||||
items:[{ |
||||
type: "bi.label", |
||||
text: "West", |
||||
whiteSpace: "normal" |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
_createCenter: function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.center", |
||||
cls: "layout-bg3", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Center", |
||||
whiteSpace: "normal" |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
_createEast: function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.center", |
||||
cls: "layout-bg5", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "East", |
||||
whiteSpace: "normal" |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
_createSouth: function(){ |
||||
return BI.createWidget({ |
||||
type: "bi.label", |
||||
text: "South", |
||||
cls: "layout-bg6", |
||||
height: 50 |
||||
}) |
||||
}, |
||||
|
||||
render: function () { |
||||
return { |
||||
type: "bi.border", |
||||
cls: "", |
||||
items: { |
||||
north: { |
||||
el: this._createNorth(), |
||||
height: 30, |
||||
top: 20, |
||||
left: 20, |
||||
right: 20 |
||||
}, |
||||
south: { |
||||
el: this._createSouth(), |
||||
height: 50, |
||||
bottom: 20, |
||||
left: 20, |
||||
right: 20 |
||||
}, |
||||
west: { |
||||
el: this._createWest(), |
||||
width: 200, |
||||
left: 20 |
||||
}, |
||||
east: { |
||||
el: this._createEast(), |
||||
width: 300, |
||||
right: 20 |
||||
}, |
||||
center: this._createCenter() |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.border", Demo.BorderLayout); |
||||
@ -0,0 +1,35 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.CenterLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-center" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.center", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Center 1，这里虽然设置label的高度30，但是最终影响高度的是center布局", |
||||
cls: "layout-bg1", |
||||
whiteSpace: "normal" |
||||
},{ |
||||
type: "bi.label", |
||||
text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal", |
||||
cls: "layout-bg2", |
||||
whiteSpace: "normal" |
||||
},{ |
||||
type: "bi.label", |
||||
text: "Center 3", |
||||
cls: "layout-bg3" |
||||
},{ |
||||
type: "bi.label", |
||||
text: "Center 4", |
||||
cls: "layout-bg5" |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.center_layout", Demo.CenterLayout); |
||||
@ -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); |
||||
@ -0,0 +1,27 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.FloatCenterLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-float-center" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.float_center", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", |
||||
cls: "layout-bg1", |
||||
whiteSpace: "normal" |
||||
}, { |
||||
type: "bi.label", |
||||
text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", |
||||
cls: "layout-bg2", |
||||
whiteSpace: "normal" |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.float_center", Demo.FloatCenterLayout); |
||||
@ -0,0 +1,85 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.FlowLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-flow" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.center_adapt", |
||||
items: [{ |
||||
type: "bi.left", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-1", |
||||
cls: "layout-bg1", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-2", |
||||
cls: "layout-bg2", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-3", |
||||
cls: "layout-bg3", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-4", |
||||
cls: "layout-bg4", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-5", |
||||
cls: "layout-bg5", |
||||
hgap: 20 |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}, { |
||||
type: "bi.right", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-1", |
||||
cls: "layout-bg1", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-2", |
||||
cls: "layout-bg2", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-3", |
||||
cls: "layout-bg3", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-4", |
||||
cls: "layout-bg4", |
||||
hgap: 20 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-5", |
||||
cls: "layout-bg5", |
||||
hgap: 20 |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.flow", Demo.FlowLayout); |
||||
@ -0,0 +1,137 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.GridLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-grid" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.grid", |
||||
columns: 5, |
||||
rows: 3, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-0", |
||||
cls: "layout-bg1" |
||||
} |
||||
}, { |
||||
column: 1, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-0", |
||||
cls: "layout-bg2" |
||||
} |
||||
}, { |
||||
column: 2, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-2, row-0", |
||||
cls: "layout-bg6" |
||||
} |
||||
}, { |
||||
column: 3, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-3, row-0", |
||||
cls: "layout-bg3" |
||||
} |
||||
}, { |
||||
column: 4, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-4, row-0", |
||||
cls: "layout-bg4" |
||||
} |
||||
}, { |
||||
column: 0, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-1", |
||||
cls: "layout-bg5" |
||||
} |
||||
}, { |
||||
column: 1, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-1", |
||||
cls: "layout-bg6" |
||||
} |
||||
}, { |
||||
column: 2, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-2, row-1", |
||||
cls: "layout-bg7" |
||||
} |
||||
}, { |
||||
column: 3, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-3, row-1", |
||||
cls: "layout-bg1" |
||||
} |
||||
}, { |
||||
column: 4, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-4, row-1", |
||||
cls: "layout-bg3" |
||||
} |
||||
}, { |
||||
column: 0, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-2", |
||||
cls: "layout-bg2" |
||||
} |
||||
}, { |
||||
column: 1, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-2", |
||||
cls: "layout-bg3" |
||||
} |
||||
}, { |
||||
column: 2, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-2, row-2", |
||||
cls: "layout-bg4" |
||||
} |
||||
}, { |
||||
column: 3, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-3, row-2", |
||||
cls: "layout-bg5" |
||||
} |
||||
}, { |
||||
column: 4, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-4, row-2", |
||||
cls: "layout-bg6" |
||||
} |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.grid", Demo.GridLayout); |
||||
@ -0,0 +1,50 @@
|
||||
/** |
||||
* Created by User on 2017/3/21. |
||||
*/ |
||||
Demo.Horizontal = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-horizontal" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.horizontal", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.text_button", |
||||
cls: "layout-bg1", |
||||
text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)", |
||||
height: 30 |
||||
}, |
||||
left: 0, |
||||
right: 0 |
||||
}], |
||||
width: 100, |
||||
height: 30 |
||||
}, { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.text_button", |
||||
cls: "layout-bg2", |
||||
text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)", |
||||
height: 30 |
||||
}, |
||||
left: 0, |
||||
right: 0 |
||||
}], |
||||
width: 200, |
||||
height: 30 |
||||
}] |
||||
}], |
||||
lgap: 20, |
||||
rgap: 80, |
||||
tgap: 80, |
||||
bgap: 50 |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.horizontal", Demo.Horizontal); |
||||
@ -0,0 +1,42 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.HorizontalAdapt = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-horizontal-adapt" |
||||
}, |
||||
|
||||
_createLayout: function () { |
||||
return BI.createWidget({ |
||||
type: "bi.horizontal_adapt", |
||||
vgap: 10, |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Horizontal Adapt左右自适应", |
||||
cls: "layout-bg1", |
||||
width: 300, |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "Horizontal Adapt左右自适应", |
||||
cls: "layout-bg2", |
||||
//width: 300,
|
||||
height: 30 |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
render: function () { |
||||
return { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 2, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: this._createLayout() |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.horizontal_adapt", Demo.HorizontalAdapt); |
||||
@ -0,0 +1,42 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.HorizontalAuto = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-horizontal-auto" |
||||
}, |
||||
|
||||
_createLayout: function () { |
||||
return BI.createWidget({ |
||||
type: "bi.horizontal_auto", |
||||
vgap: 10, |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Horizontal Auto左右自适应", |
||||
cls: "layout-bg1", |
||||
width: 300, |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "Horizontal Auto左右自适应", |
||||
cls: "layout-bg2", |
||||
width: 300, |
||||
height: 30 |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
render: function () { |
||||
return { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 2, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: this._createLayout() |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.horizontal_auto", Demo.HorizontalAuto); |
||||
@ -0,0 +1,35 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.HorizontalFloat = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-horizontal-float" |
||||
}, |
||||
|
||||
_createLayout: function () { |
||||
return BI.createWidget({ |
||||
type: "bi.horizontal_float", |
||||
vgap: 10, |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Horizontal Float左右自适应", |
||||
cls: "layout-bg1", |
||||
width: 100 |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
render: function () { |
||||
return { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 2, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: this._createLayout() |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.horizontal_float", Demo.HorizontalFloat); |
||||
@ -0,0 +1,38 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.HtapeLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-htape" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.htape", |
||||
items : [ |
||||
{ |
||||
width: 100, |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '1', |
||||
cls: "layout-bg1" |
||||
} |
||||
}, { |
||||
width: 200, |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '2', |
||||
cls: "layout-bg2" |
||||
} |
||||
}, { |
||||
width: 'fill', |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '3', |
||||
cls: "layout-bg3" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.htape", Demo.HtapeLayout); |
||||
@ -0,0 +1,47 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.InlineLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-inline" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.inline", |
||||
items: [{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-1", |
||||
cls: "layout-bg1", |
||||
hgap: 200 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-2", |
||||
cls: "layout-bg2", |
||||
hgap: 200 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-3", |
||||
cls: "layout-bg3", |
||||
hgap: 200 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-4", |
||||
cls: "layout-bg4", |
||||
hgap: 200 |
||||
}, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-5", |
||||
cls: "layout-bg5", |
||||
hgap: 200 |
||||
}], |
||||
hgap: 20, |
||||
vgap: 20 |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.inline", Demo.InlineLayout); |
||||
@ -0,0 +1,44 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.LeftRightVerticalAdaptLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-left-right-vertical-adapt" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.left_right_vertical_adapt", |
||||
lhgap: 10, |
||||
rhgap: 30, |
||||
items: { |
||||
left: [{ |
||||
type: "bi.label", |
||||
text: "左边的垂直居中", |
||||
cls: "layout-bg1", |
||||
width: 100, |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "左边的垂直居中", |
||||
cls: "layout-bg2", |
||||
width: 100, |
||||
height: 30 |
||||
}], |
||||
right: [{ |
||||
type: "bi.label", |
||||
text: "右边的垂直居中", |
||||
cls: "layout-bg1", |
||||
width: 100, |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "右边的垂直居中", |
||||
cls: "layout-bg2", |
||||
width: 100, |
||||
height: 30 |
||||
}] |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.left_right_vertical_adapt", Demo.LeftRightVerticalAdaptLayout); |
||||
@ -0,0 +1,162 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.TableLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-table-layout" |
||||
}, |
||||
|
||||
_createTable1: function () { |
||||
return { |
||||
type: "bi.table", |
||||
items: BI.createItems([ |
||||
[ |
||||
{ |
||||
el: { |
||||
cls: "layout-bg1" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg2" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg3" |
||||
} |
||||
} |
||||
], |
||||
[ |
||||
{ |
||||
el: { |
||||
cls: "layout-bg4" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg5" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg6" |
||||
} |
||||
} |
||||
], |
||||
[ |
||||
{ |
||||
el: { |
||||
cls: "layout-bg7" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg8" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg1" |
||||
} |
||||
} |
||||
], |
||||
[ |
||||
{ |
||||
el: { |
||||
cls: "layout-bg2" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg3" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg4" |
||||
} |
||||
} |
||||
], |
||||
[ |
||||
{ |
||||
el: { |
||||
cls: "layout-bg5" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg6" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg7" |
||||
} |
||||
} |
||||
], |
||||
[ |
||||
{ |
||||
el: { |
||||
cls: "layout-bg8" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg1" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg2" |
||||
} |
||||
} |
||||
], |
||||
[ |
||||
{ |
||||
el: { |
||||
cls: "layout-bg6" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg7" |
||||
} |
||||
}, |
||||
{ |
||||
el: { |
||||
cls: "layout-bg8" |
||||
} |
||||
} |
||||
] |
||||
], { |
||||
type: "bi.layout" |
||||
}), |
||||
columnSize: [100, "fill", 200], |
||||
rowSize: [10, 30, 50, 70, 90, 110, 130], |
||||
hgap: 20, |
||||
vgap: 10 |
||||
} |
||||
}, |
||||
|
||||
render: function () { |
||||
return { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 1, |
||||
items: [ |
||||
{ |
||||
column: 0, |
||||
row: 0, |
||||
el: this._createTable1() |
||||
} |
||||
//, {
|
||||
// column: 0,
|
||||
// row: 1,
|
||||
// el: this._createTable2()
|
||||
//}
|
||||
] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.table_layout", Demo.TableLayout); |
||||
@ -0,0 +1,59 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.TdLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-td" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.td", |
||||
columnSize: [100, 100, ""], |
||||
items: BI.createItems([ |
||||
[{ |
||||
el: { |
||||
type: 'bi.label', |
||||
text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', |
||||
cls: "layout-bg1" |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.label', |
||||
text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', |
||||
cls: "layout-bg2" |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.label', |
||||
text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', |
||||
cls: "layout-bg3" |
||||
} |
||||
}], [{ |
||||
el: { |
||||
type: 'bi.label', |
||||
text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', |
||||
cls: "layout-bg5" |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.label', |
||||
text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', |
||||
cls: "layout-bg6" |
||||
} |
||||
}, { |
||||
el: { |
||||
type: 'bi.label', |
||||
text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', |
||||
cls: "layout-bg7" |
||||
} |
||||
}] |
||||
], { |
||||
whiteSpace: "normal" |
||||
}) |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.td", Demo.TdLayout); |
||||
@ -0,0 +1,25 @@
|
||||
/** |
||||
* Created by User on 2017/3/21. |
||||
*/ |
||||
Demo.VerticalLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-vertical" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "这里设置了hgap(水平间距)，vgap(垂直间距)", |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "这里设置了hgap(水平间距)，vgap(垂直间距)", |
||||
height: 30 |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.vertical", Demo.VerticalLayout); |
||||
@ -0,0 +1,42 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-vertical-adapt" |
||||
}, |
||||
|
||||
_createLayout: function () { |
||||
return BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
vgap: 10, |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "Vertical Adapt上下自适应", |
||||
cls: "layout-bg1", |
||||
width: 300, |
||||
height: 30 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "Vertical Adapt上下自适应", |
||||
cls: "layout-bg2", |
||||
width: 300, |
||||
height: 30 |
||||
}] |
||||
}) |
||||
}, |
||||
|
||||
render: function () { |
||||
return { |
||||
type: "bi.grid", |
||||
columns: 2, |
||||
rows: 1, |
||||
items: [{ |
||||
column: 0, |
||||
row: 0, |
||||
el: this._createLayout() |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout); |
||||
@ -0,0 +1,38 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.VtapeLayout = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-vtape" |
||||
}, |
||||
render: function () { |
||||
return { |
||||
type: "bi.vtape", |
||||
items : [ |
||||
{ |
||||
height: 100, |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '1', |
||||
cls: "layout-bg1" |
||||
} |
||||
}, { |
||||
height: 200, |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '2', |
||||
cls: "layout-bg2" |
||||
} |
||||
}, { |
||||
height: 'fill', |
||||
el : { |
||||
type : 'bi.label', |
||||
text : '3', |
||||
cls: "layout-bg3" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.vtape", Demo.VtapeLayout); |
||||
@ -0,0 +1,28 @@
|
||||
Demo.Face = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-face" |
||||
}, |
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.svg", |
||||
ref: function () { |
||||
self.svg = this; |
||||
} |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}] |
||||
} |
||||
}, |
||||
mounted: function () { |
||||
var circle = this.svg.circle(this.element.width() / 2, this.element.height() / 2, 20); |
||||
circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000); |
||||
} |
||||
}); |
||||
$.shortcut("demo.face", Demo.Face); |
||||
@ -0,0 +1,46 @@
|
||||
Demo.Main = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-main" |
||||
}, |
||||
render: function () { |
||||
var center; |
||||
return { |
||||
type: "bi.border", |
||||
items: { |
||||
north: { |
||||
height: 50, |
||||
el: { |
||||
type: "demo.north", |
||||
listeners: [{ |
||||
eventName: Demo.North.EVENT_VALUE_CHANGE, |
||||
action: function (v) { |
||||
center.setValue(v); |
||||
} |
||||
}] |
||||
} |
||||
}, |
||||
west: { |
||||
width: 230, |
||||
el: { |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.main", Demo.Main); |
||||
@ -0,0 +1,32 @@
|
||||
Demo.North = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-north" |
||||
}, |
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.htape", |
||||
items: [{ |
||||
width: 230, |
||||
el: { |
||||
type: "bi.text_button", |
||||
listeners: [{ |
||||
eventName: BI.Button.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(Demo.North.EVENT_VALUE_CHANGE, "demo.face") |
||||
} |
||||
}], |
||||
cls: "logo", |
||||
height: 50, |
||||
text: "FineUI2.0" |
||||
} |
||||
}, { |
||||
el: { |
||||
type: "bi.layout" |
||||
} |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
Demo.North.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; |
||||
$.shortcut("demo.north", Demo.North); |
||||
@ -0,0 +1,23 @@
|
||||
Demo.West = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-west" |
||||
}, |
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
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); |
||||
@ -0,0 +1,83 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.MultiSelectCombo = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-multi-select-combo" |
||||
}, |
||||
|
||||
_createMultiSelectCombo: function () { |
||||
var self = this; |
||||
var widget = BI.createWidget({ |
||||
type: 'bi.multi_select_combo', |
||||
itemsCreator: BI.bind(this._itemsCreator, this), |
||||
width: 200 |
||||
}); |
||||
|
||||
widget.on(BI.MultiSelectCombo.EVENT_CONFIRM, function () { |
||||
BI.Msg.toast(JSON.stringify(this.getValue())); |
||||
}); |
||||
|
||||
return widget; |
||||
}, |
||||
|
||||
_getItemsByTimes: function (items, times) { |
||||
var res = []; |
||||
for (var i = (times - 1) * 3; items[i] && i < times * 3; i++) { |
||||
res.push(items[i]); |
||||
} |
||||
return res; |
||||
}, |
||||
|
||||
_hasNextByTimes: function (items, times) { |
||||
return times * 3 < items.length; |
||||
}, |
||||
|
||||
_itemsCreator: function (options, callback) { |
||||
var self = this; |
||||
var items = Demo.MULTI_COMBO_ITEMS; |
||||
var keywords = (options.keywords || []).slice(); |
||||
if (options.keyword) { |
||||
keywords.push(options.keyword); |
||||
} |
||||
BI.each(keywords, function (i, kw) { |
||||
var search = BI.Func.getSearchResult(items, kw); |
||||
items = search.matched.concat(search.finded); |
||||
}); |
||||
if (options.selected_values) {//过滤
|
||||
var filter = BI.makeObject(options.selected_values, true); |
||||
items = BI.filter(items, function (i, ob) { |
||||
return !filter[ob.value]; |
||||
}); |
||||
} |
||||
if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) { |
||||
callback({ |
||||
items: items |
||||
}); |
||||
return; |
||||
} |
||||
if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { |
||||
callback({count: items.length}); |
||||
return; |
||||
} |
||||
BI.delay(function () { |
||||
callback({ |
||||
items: self._getItemsByTimes(items, options.times), |
||||
hasNext: self._hasNextByTimes(items, options.times) |
||||
}); |
||||
}, 1000); |
||||
}, |
||||
|
||||
render: function () { |
||||
return { |
||||
type: 'bi.absolute', |
||||
scrolly: false, |
||||
items: [{ |
||||
el: this._createMultiSelectCombo(), |
||||
right: 10, |
||||
top: 10 |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.multi_select_combo", Demo.MultiSelectCombo); |
||||
@ -0,0 +1,177 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.PathChooser = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-path-chooser" |
||||
}, |
||||
render: function () { |
||||
var pathchooser = BI.createWidget({ |
||||
type: "bi.path_chooser", |
||||
width: 800, |
||||
height: 400, |
||||
items: // [
|
||||
// [{region: "区域X", value: "X1"},
|
||||
// {region: "区域Q", value: "Q"},
|
||||
// {region: "区域A", value: "A"},
|
||||
// {region: "区域B", value: "B"},
|
||||
// {region: "区域D", value: "D"},
|
||||
// {region: "区域E", value: "E"},
|
||||
// {region: "区域G", value: "G"},
|
||||
// {region: "区域I", value: "I"},
|
||||
// {region: "区域J", value: "J"}],
|
||||
// [{region: "区域X", value: "X"},
|
||||
// {region: "区域Q", value: "Q"},
|
||||
// {region: "区域A", value: "A"},
|
||||
// {region: "区域B", value: "B"},
|
||||
// {region: "区域C", value: "C"},
|
||||
// {region: "区域D", value: "D"},
|
||||
// {region: "区域E", value: "E"},
|
||||
// {region: "区域G", value: "G"},
|
||||
// {region: "区域I", value: "I"},
|
||||
// {region: "区域J", value: "J"}],
|
||||
// [{region: "区域X", value: "X"},
|
||||
// //{region: "区域Q", value: "Q"},
|
||||
// {region: "区域A", value: "A"},
|
||||
// {region: "区域C", value: "C"},
|
||||
// {region: "区域D", value: "D"},
|
||||
// {region: "区域E", value: "E"},
|
||||
// {region: "区域G", value: "G"},
|
||||
// {region: "区域I", value: "I"},
|
||||
// {region: "区域J", value: "J"}],
|
||||
// [{region: "区域X", value: "X"},
|
||||
// {region: "区域Q", value: "Q"},
|
||||
// {region: "区域A", value: "A"},
|
||||
// {region: "区域B", value: "B"},
|
||||
// {region: "区域D", value: "D"},
|
||||
// {region: "区域E", value: "E1"},
|
||||
// {region: "区域H", value: "H"},
|
||||
// {region: "区域I", value: "I"},
|
||||
// {region: "区域J", value: "J"}],
|
||||
// [{region: "区域X", value: "X"},
|
||||
// {region: "区域Q", value: "Q"},
|
||||
// {region: "区域A", value: "A"},
|
||||
// {region: "区域B", value: "B"},
|
||||
// {region: "区域C", value: "C"},
|
||||
// {region: "区域D", value: "D"},
|
||||
// {region: "区域E", value: "E1"},
|
||||
// {region: "区域H", value: "H"},
|
||||
// {region: "区域I", value: "I"},
|
||||
// {region: "区域J", value: "J"}],
|
||||
// [{region: "区域X", value: "X"},
|
||||
// {region: "区域Q", value: "Q"},
|
||||
// {region: "区域A", value: "A"},
|
||||
// {region: "区域C", value: "C"},
|
||||
// {region: "区域D", value: "D"},
|
||||
// {region: "区域E", value: "E1"},
|
||||
// {region: "区域H", value: "H"},
|
||||
// {region: "区域I", value: "I"},
|
||||
// {region: "区域J", value: "J"}],
|
||||
// [{region: "区域X", value: "X"},
|
||||
// {region: "区域Q", value: "Q"},
|
||||
// {region: "区域A", value: "A"},
|
||||
// {region: "区域B", value: "B"},
|
||||
// {region: "区域D", value: "D"},
|
||||
// {region: "区域F", value: "F"},
|
||||
// {region: "区域H", value: "H"},
|
||||
// {region: "区域I", value: "I"},
|
||||
// {region: "区域J", value: "J"}],
|
||||
// [{region: "区域X", value: "X"},
|
||||
// {region: "区域Q", value: "Q"},
|
||||
// {region: "区域A", value: "A"},
|
||||
// {region: "区域B", value: "B"},
|
||||
// {region: "区域C", value: "C"},
|
||||
// {region: "区域D", value: "D"},
|
||||
// {region: "区域F", value: "F"},
|
||||
// {region: "区域H", value: "H"},
|
||||
// {region: "区域I", value: "I"},
|
||||
// {region: "区域J", value: "J"}],
|
||||
// [{region: "区域X", value: "X", text: "X"},
|
||||
// {region: "区域Q", value: "Q", text: "Q"},
|
||||
// {region: "区域A", value: "A", text: "A"},
|
||||
// {region: "区域C", value: "C", text: "C"},
|
||||
// {region: "区域D", value: "D", text: "D"},
|
||||
// {region: "区域F", value: "F", text: "F"},
|
||||
// {region: "区域H", value: "H", text: "H"},
|
||||
// {region: "区域I", value: "I", text: "I"},
|
||||
// {region: "区域J", value: "J", text: "J"}]
|
||||
//]
|
||||
[[{ |
||||
"region": "8c4460bc3605685e", |
||||
"regionText": "采购订单XXX", |
||||
"text": "ID", |
||||
"value": "1" |
||||
}, { |
||||
"region": "0fbd0dc648f41e97", |
||||
"regionText": "采购订单", |
||||
"text": "学号", |
||||
"value": "3" |
||||
}, { |
||||
"region": "c6d72d6c7e19a667", |
||||
"regionText": "供应商基本信息", |
||||
"text": "ID", |
||||
"value": "5" |
||||
}], [{ |
||||
"region": "ed013e18cc7c8637", |
||||
"regionText": "采购订单XXX", |
||||
"text": "ID", |
||||
"value": "1" |
||||
}, { |
||||
"region": "153d75878431f8ee", |
||||
"regionText": "A3", |
||||
"text": "学号", |
||||
"value": "2" |
||||
}, { |
||||
"region": "3861fb024c7d7825", |
||||
"regionText": "采购订单", |
||||
"text": "学号", |
||||
"value": "3" |
||||
}, { |
||||
"region": "88e3e5071bd10bc5", |
||||
"regionText": "供应商", |
||||
"text": "ID", |
||||
"value": "4" |
||||
}, { |
||||
"region": "8476c77ab5c147e0", |
||||
"regionText": "供应商基本信息", |
||||
"text": "ID", |
||||
"value": "5" |
||||
}], [{ |
||||
"region": "f00f67fbb9fba6fe", |
||||
"regionText": "采购订单XXX", |
||||
"text": "ID", |
||||
"value": "1" |
||||
}, { |
||||
"region": "1e8badf5d5793408", |
||||
"regionText": "A3", |
||||
"text": "学号", |
||||
"value": "2" |
||||
}, { |
||||
"region": "de1ebd3d0986a294", |
||||
"regionText": "供应商基本信息", |
||||
"text": "ID", |
||||
"value": "5" |
||||
}]] |
||||
}); |
||||
pathchooser.setValue(); |
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: pathchooser, |
||||
left: 100, |
||||
top: 100 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
text: "getValue", |
||||
handler: function () { |
||||
BI.Msg.toast(JSON.stringify(pathchooser.getValue())); |
||||
} |
||||
}, |
||||
left: 100, |
||||
bottom: 10 |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.path_chooser", Demo.PathChooser); |
||||
@ -0,0 +1,65 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.RelationView = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-relation-view" |
||||
}, |
||||
render: function () { |
||||
var relationview = BI.createWidget({ |
||||
type: "bi.relation_view", |
||||
items: [ |
||||
{ |
||||
primary: { |
||||
region: "B", regionText: "比", regionTitle: "bbb", regionHandler: function () { |
||||
alert("a") |
||||
}, |
||||
|
||||
|
||||
title: "b2...", |
||||
value: "b2", text: "b2字段", |
||||
handler: function () { |
||||
alert("d") |
||||
} |
||||
}, |
||||
foreign: {region: "C", value: "c1", text: "c1字段"} |
||||
}, |
||||
{ |
||||
primary: {region: "A", value: "a1", text: "a1字段"}, |
||||
foreign: {region: "C", value: "c2", text: "c2字段"} |
||||
}, |
||||
{ |
||||
primary: {region: "C", value: "c3", text: "c3字段"}, |
||||
foreign: {region: "D", value: "d1", text: "d1字段"} |
||||
}, |
||||
{ |
||||
primary: {region: "A", value: "a1", text: "a1字段"}, |
||||
foreign: {region: "B", value: "b1", text: "b1字段"} |
||||
}, |
||||
|
||||
{ |
||||
primary: {region: "X", value: "x1", text: "x1字段"}, |
||||
foreign: {region: "Y", value: "y1", text: "y1字段"} |
||||
}, |
||||
{ |
||||
primary: {region: "X", value: "x2", text: "x2字段"}, |
||||
foreign: {region: "Z", value: "z1", text: "z1字段"} |
||||
}, |
||||
{ |
||||
primary: {region: "X", value: "x2", text: "x2字段"}, |
||||
foreign: {region: "B", value: "b1", text: "b1字段"} |
||||
}, |
||||
{ |
||||
primary: {region: "X33", value: "x233", text: "x233字段"}, |
||||
} |
||||
] |
||||
}); |
||||
return { |
||||
type: "bi.float_center_adapt", |
||||
items: [{ |
||||
el: relationview |
||||
}] |
||||
} |
||||
} |
||||
}); |
||||
$.shortcut("demo.relation_view", Demo.RelationView); |
||||
@ -0,0 +1,54 @@
|
||||
|
||||
.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; |
||||
} |
||||
} |
||||
@ -0,0 +1,12 @@
|
||||
@import "index"; |
||||
|
||||
.demo-north { |
||||
background-color: #3c8dbc; |
||||
& .logo { |
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
color: @color-bi-text; |
||||
background-color: #367fa9; |
||||
font-size: 20px; |
||||
font-weight: 300; |
||||
} |
||||
} |
||||
@ -0,0 +1,5 @@
|
||||
@import "index"; |
||||
|
||||
.demo-west { |
||||
border-right: 1px solid @color-bi-border-line; |
||||
} |
||||
@ -0,0 +1,7 @@
|
||||
Demo = { |
||||
version: 1.0 |
||||
}; |
||||
|
||||
BI.i18n = { |
||||
"BI-Basic_OK": "确定" |
||||
}; |
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue