feat: 准备demo

2 years ago · d8e99784a3
1 changed files with 104 additions and 0 deletions
--- a/examples/替换loading动画.html
+++ b/examples/替换loading动画.html
@ -0,0 +1,104 @@
+<!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>