You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
4.1 KiB
104 lines
4.1 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Document</title> |
|
<link rel="stylesheet" type="text/css" href="https://fanruan.design/fineui/2.0/fineui_without_normalize.css" /> |
|
<!-- <script src="/fineui.js"></script> --> |
|
<script src="https://fanruan.design/fineui/2.0/fineui.js"></script> |
|
</head> |
|
|
|
<body> |
|
<div id="wrapper"></div> |
|
<script> |
|
var LoadingPane = BI.inherit(BI.Pane, {}); |
|
|
|
BI.shortcut("demo.loading_pane", LoadingPane); |
|
|
|
var loadingPane; |
|
|
|
BI.createWidget({ |
|
type: "bi.vertical", |
|
element: "#wrapper", |
|
items: [{ |
|
type: "bi.vertical", |
|
items: [{ |
|
type: "demo.loading_pane", |
|
width: 800, |
|
height: 600, |
|
cls: "bi-border", |
|
ref: function(ref) { |
|
loadingPane = ref; |
|
}, |
|
}, { |
|
type: "bi.left", |
|
rgap: 10, |
|
items: [{ |
|
type: "bi.button", |
|
text: "开始loading", |
|
handler: function () { |
|
loadingPane.loading(); |
|
}, |
|
}, { |
|
type: "bi.button", |
|
text: "停止loading", |
|
handler: function () { |
|
loadingPane.loaded(); |
|
}, |
|
}, { |
|
type: "bi.button", |
|
text: "设置文字loading", |
|
handler: function () { |
|
BI.config("bi.provider.system", function (provider) { |
|
provider.setLoadingCreator(function () { |
|
return { |
|
type: "bi.label", |
|
text: "我是被替换了的loading" |
|
}; |
|
}); |
|
}); |
|
}, |
|
}, { |
|
type: "bi.button", |
|
text: "恢复波浪线loading", |
|
handler: function () { |
|
BI.config("bi.provider.system", function (provider) { |
|
provider.setLoadingCreator(function () { |
|
return { |
|
type: "bi.horizontal", |
|
cls: "bi-loading-widget", |
|
height: 30, |
|
width: 30, |
|
hgap: 5, |
|
vgap: 2.5, |
|
items: [{ |
|
type: "bi.layout", |
|
cls: "animate-rect rect1", |
|
height: 25, |
|
width: 2.5 |
|
}, { |
|
type: "bi.layout", |
|
cls: "animate-rect rect2", |
|
height: 25, |
|
width: 2.5 |
|
}, { |
|
type: "bi.layout", |
|
cls: "animate-rect rect3", |
|
height: 25, |
|
width: 2.5 |
|
}] |
|
}; |
|
}); |
|
}); |
|
}, |
|
}] |
|
}], |
|
}], |
|
}); |
|
</script> |
|
</body> |
|
|
|
</html> |