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>