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/ |
node_modules/ |
||||||
/.idea/ |
/.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****/ |
/****添加计算宽度的--运算符直接需要space****/ |
||||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||||
.bi-color-picker > .center-element { |
.demo-west { |
||||||
border-left: 1px solid #ffffff; |
border-right: 1px solid #eaeaea; |
||||||
border-top: 1px solid #ffffff; |
|
||||||
} |
} |
||||||
@ -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