dream-ui.min.js 一套完整的jquery ui库dreamui，实现选择框、幻灯片、对话框、分页、表格、提示框的美化-BFW插件库

dream-ui.min.js 一套完整的jquery ui库dreamui，实现选择框、幻灯片、对话框、分页、表格、提示框的美化
第一步引入bfwone
第二步执行插件代码
示例如下，可在线直接运行
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery-3.3.1&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["dream-ui.min", "dream-ui.min"], function() {
                UI.carousel("#carousel");
                UI.checkbox("#checkbox", {
                    data: [{
                        value: 0, text: "天龙八部"
                    },
                        {
                            value: 1, text: "神雕侠侣"
                        },
                        {
                            value: 2, text: "笑傲江湖"
                        },
                        {
                            value: 3, text: "倚天屠龙记"
                        },
                        {
                            value: 4, text: "鹿鼎记"
                        },
                        {
                            value: 5, text: "射雕英雄传"
                        }]
                });
                UI.radio("#radio", {
                    data: [{
                        value: 0, text: "天龙八部"
                    },
                        {
                            value: 1, text: "神雕侠侣"
                        },
                        {
                            value: 2, text: "笑傲江湖"
                        },
                        {
                            value: 3, text: "倚天屠龙记"
                        },
                        {
                            value: 4, text: "鹿鼎记"
                        },
                        {
                            value: 5, text: "射雕英雄传"
                        }]
                });

                UI.collapse("#collapse", {
                    accordion: true
                });
                $("#info").click(function () {
                    UI.dialog.info("Info 对话框", "内容区域");
                })
                $("#success").click(function () {
                    UI.dialog.success("Success 对话框", "内容区域");
                })
                $("#warn").click(function () {
                    UI.dialog.warn("Warn 对话框", "内容区域");
                })
                $("#error").click(function () {
                    UI.dialog.error("Error 对话框", "内容区域");
                })
                UI.loading("#loading", {
                    text: "Loading"
                });
                UI.inputNumber("#inputNumber", {
                    editable: true
                });
                $("#m-info").click(function () {
                    UI.message.info("Info 提醒");
                })
                $("#m-success").click(function () {
                    UI.message.success("Success 提醒");
                })
                $("#m-warn").click(function () {
                    UI.message.warn("Warn 提醒");
                })
                $("#m-error").click(function () {
                    UI.message.error("Error 提醒");
                })
                $("#n-info").click(function () {
                    UI.notice.info("Info 消息");
                })
                $("#n-success").click(function () {
                    UI.notice.success("Success 消息");
                })
                $("#n-warn").click(function () {
                    UI.notice.warn("Warn 消息");
                })
                $("#n-error").click(function () {
                    UI.notice.error("Error 消息");
                })
                UI.select("#select", {
                    data: [{
                        value: 0, text: "飞狐外传"
                    },
                        {
                            value: 1, text: "雪山飞狐"
                        },
                        {
                            value: 2, text: "连城诀"
                        },
                        {
                            value: 3, text: "天龙八部"
                        },
                        {
                            value: 4, text: "射雕英雄传"
                        },
                        {
                            value: 5, text: "白马啸西风"
                        },
                        {
                            value: 6, text: "鹿鼎记"
                        },
                        {
                            value: 7, text: "笑傲江湖"
                        },
                        {
                            value: 8, text: "书剑恩仇录"
                        },
                        {
                            value: 9, text: "神雕侠侣"
                        },
                        {
                            value: 10, text: "侠客行"
                        },
                        {
                            value: 11, text: "倚天屠龙记"
                        },
                        {
                            value: 12, text: "碧血剑"
                        },
                        {
                            value: 13, text: "鸳鸯刀"
                        },
                        {
                            value: 14, text: "越女剑"
                        }]
                });
                UI.table("#table", {
                    data: {
                        thead: [{
                            label: "name", title: "姓名"
                        },
                            {
                                label: "age", title: "年龄", sort: true
                            },
                            {
                                label: "job", title: "工作"
                            },
                            {
                                label: "date", title: "日期", sort: true
                            }],
                        tbody: [{
                            name: "张三", age: "60", job: "教师", date: "1962-05-05"
                        },
                            {
                                name: "李四", age: "50", job: "医生", date: "1970-07-05"
                            },
                            {
                                name: "王五", age: "20", job: "作家", date: "1982-03-05"
                            },
                            {
                                name: "赵六", age: "40", job: "警察", date: "1959-02-05"
                            },
                            {
                                name: "孙七", age: "30", job: "法官", date: "1968-09-05"
                            }]
                    }
                });

                UI.tabs("#tab", {
                    theme: "card"
                });
                UI.switch("#switch", {
                    showText: true
                });
                UI.page("#page", {
                    total: 1500,
                    pageSize: 10,
                    simple: false
                });
            });
        });
    </script>


    <style>
        body {
            background: #f5f5f5;
        }
        #container {
            width: 1000px;
            margin: 0 auto;
            overflow: hidden;
            background: #fff;
            box-shadow: #ddd 0 0 10px;
        }
        h1 {
            text-align: center;
            font-size: 30px;
            margin: 30px 0;
            display: block;
        }
        .wrapper {
            width: calc(100% - 60px);
            margin: 0 auto;
        }
        .wrapper > div {
            margin-bottom: 80px;
        }
        .wrapper > div > p {
            text-align: center;
            font-size: 22px;
            margin: 20px 0;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <section id="container">
        <h1>一套 jQuery 组件库</h1>
        <div class="wrapper">
            <div>
                <p>
                    走马灯
                </p>
                <style>
                    #carousel {
                        height: 200px;
                    }
                    .demo {
                        background: #bbb;
                        text-align: center;
                        line-height: 200px;
                        font-size: 40px;
                    }
                </style>
                <div id="carousel">
                    <div class="demo">
                        1
                    </div>
                    <div class="demo">
                        2
                    </div>
                    <div class="demo">
                        3
                    </div>
                    <div class="demo">
                        4
                    </div>
                    <div class="demo">
                        5
                    </div>
                </div>

            </div>
            <div>
                <p>
                    复选框
                </p>
                <div id="checkbox" style="text-align: center;"></div>

            </div>
            <div>
                <p>
                    单选框
                </p>
                <div id="radio" style="text-align: center;"></div>

            </div>
            <div>
                <p>
                    折叠面板
                </p>
                <div id="collapse">
                    <div>
                        <div>
                            标题一
                        </div>
                        <div>
                            内容一<br>内容一<br>内容一<br>内容一<br>内容一<br>
                        </div>
                    </div>
                    <div>
                        <div>
                            标题二
                        </div>
                        <div>
                            内容二<br>内容二<br>内容二<br>内容二<br>内容二<br>
                        </div>
                    </div>
                    <div>
                        <div>
                            标题三
                        </div>
                        <div>
                            内容三<br>内容三<br>内容三<br>内容三<br>内容三<br>
                        </div>
                    </div>
                    <div>
                        <div>
                            标题四
                        </div>
                        <div>
                            内容四<br>内容四<br>内容四<br>内容四<br>内容四<br>
                        </div>
                    </div>
                    <div>
                        <div>
                            标题五
                        </div>
                        <div>
                            内容五<br>内容五<br>内容五<br>内容五<br>内容五<br>
                        </div>
                    </div>
                </div>

            </div>
            <div>
                <p>
                    对话框
                </p>
                <div style="text-align: center;">
                    <button type="button" id="info" info>Info 对话框</button>
                    <button type="button" id="success" success>Success 对话框</button>
                    <button type="button" id="warn" warn>Warn 对话框</button>
                    <button type="button" id="error" error>Error 对话框</button>
                </div>
                <script>

                </script>
            </div>
            <div>
                <p>
                    数字输入框
                </p>
                <style>
                    #inputNumber>* {
                        margin: 0 auto;
                    }
                </style>
                <div id="inputNumber"></div>

            </div>
            <div>
                <p>
                    加载中
                </p>
                <div id="loading" style="height:150px;border:#e5e5e5 solid 1px;"></div>

            </div>
            <div>
                <p>
                    全局消息
                </p>
                <div style="text-align: center;">
                    <button type="button" id="m-info" info>Info 提醒</button>
                    <button type="button" id="m-success" success>Success 提醒</button>
                    <button type="button" id="m-warn" warn>Warn 提醒</button>
                    <button type="button" id="m-error" error>Error 提醒</button>
                </div>
                <script>

                </script>
            </div>
            <div>
                <p>
                    消息通知
                </p>
                <div style="text-align: center;">
                    <button type="button" id="n-info" info>Info 消息</button>
                    <button type="button" id="n-success" success>Success 消息</button>
                    <button type="button" id="n-warn" warn>Warn 消息</button>
                    <button type="button" id="n-error" error>Error 消息</button>
                </div>
                <script>
                </script>
            </div>
            <div>
                <p>
                    分页
                </p>
                <div id="page" style="text-align: center;"></div>

            </div>
            <div>
                <p>
                    下拉框
                </p>
                <div id="select" style="width:300px;margin:0 auto;"></div>

            </div>
            <div>
                <p>
                    开关
                </p>
                <style>
                    #switch > * {
                        margin: 0 auto;
                    }
                </style>
                <div id="switch"></div>

            </div>
            <div>
                <p>
                    表格
                </p>
                <div id="table"></div>

            </div>
            <div>
                <p>
                    标签页
                </p>
                <div id="tab">
                    <div>
                        <div>
                            标签一
                        </div>
                        <div>
                            标签二
                        </div>
                        <div>
                            标签三
                        </div>
                        <div>
                            标签四
                        </div>
                        <div>
                            标签五
                        </div>
                    </div>
                    <div>
                        <div>
                            内容一<br>内容一<br>内容一<br>内容一<br>内容一<br>内容一
                        </div>
                        <div>
                            内容二<br>内容二<br>内容二<br>内容二<br>内容二<br>内容二
                        </div>
                        <div>
                            内容三<br>内容三<br>内容三<br>内容三<br>内容三<br>内容三
                        </div>
                        <div>
                            内容四<br>内容四<br>内容四<br>内容四<br>内容四<br>内容四
                        </div>
                        <div>
                            内容五<br>内容五<br>内容五<br>内容五<br>内容五<br>内容五
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</body>

</html>