jsPanel——与Bootstrap完美兼容的浮动面板解决方案

最新推荐文章于 2022-10-26 23:03:55 发布

HerryDong

最新推荐文章于 2022-10-26 23:03:55 发布

阅读量1.7k

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/HerryDong/article/details/106049439

版权

使用过EasyUI的同志应该很清楚，EasyUI里的Window组件相当好用，如下图所示：
在这里插入图片描述
Bootstrap中并没有类似的组件，取而代之的是使用模态框（Modal），效果如下图所示：

我个人不是很喜欢模态框这种实现方式，因此经常在考虑能否在Bootstrap里使用类似于EasyUI-Window这样的的浮动面板组件，经过长时间搜索，终于找到了一款浮动面板神器——jsPanel，想要了解详细信息，可以访问它的官网：https://jspanel.de/。

基本实现

jsPanel并不依赖于其他的任何js库，因此可以独立使用。它的主题颜色与Bootstrap是契合的，如primary、info、success、default等，在此基础之上你甚至可以自定义主题，功能十分强大。先来看一下效果：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title></title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <link href="lib/jspanel/jspanel.min.css" rel="stylesheet" />
    <script src="lib/jspanel/jspanel.min.js"></script>
</head>
<body>
    <script>
        var html = '<h3 style="text-align:center;">添加人员信息</h3>' +
                   '<div class="form-group">' +
                   '    <input type="text" class="form-control" style="width:350px;" placeholder="请输入姓名" />' +
                   '</div>' +
                   '<div class="form-group">' +
                   '    <input type="text" class="form-control" style="width:350px;" placeholder="请输入邮箱" />' +
                   '</div>' +
                   '<div class="form-group">' +
                   '    <input type="text" class="form-control" style="width:350px;" placeholder="请输入课程" />' +
                   '</div>' +
                   '<div class="form-group">' +
                   '    <textarea class="form-control" rows="5" style="width:350px;" placeholder="请输入地址"></textarea>' +
                   '</div>' +
                   '<div class="form-group">' +
                   '    <button class="btn btn-primary" style="width:350px;height:40px;">确定</button>' +
                   '</div>';

        jsPanel.create({
            id: 'panel',
            theme: 'primary',
            headerTitle: '测试面板',
            contentSize: {
                width: 400,
                height: 450
            },
            contentOverflow: 'hidden',
            content: html,
            callback: function () {
                this.content.style.padding = '20px';
            }
        });
    </script>
</body>
</html>

iframe的使用

如果你觉得手写html字符串有些麻烦，你也可以使用iframe的方式加载网页，jsPanel的content属性支持连接到iframe，如下图所示：
在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title></title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <link href="lib/jspanel/jspanel.min.css" rel="stylesheet" />
    <script src="lib/jspanel/jspanel.min.js"></script>
</head>
<body>
    <script>
        jsPanel.create({
            id: 'panel',
            theme: 'primary',
            headerTitle: '测试面板',
            contentSize: {
                width: 1500,
                height: 600
            },
            contentOverflow: 'hidden',
            content: '<iframe frameborder="0" scrolling="auto" src="test.html" style="width: 100%;height:100%;"></iframe>',
            callback: function () {
                this.content.style.padding = '10px';
            }
        });
    </script>
</body>
</html>

test.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title></title>
    <!-- bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>

    <!-- bootstrap-table -->
    <link href="lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <script src="lib/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="lib/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
    <div id="toolbar" class="btn-group">
        <button id="add" type="button" class="btn btn-primary">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="edit" type="button" class="btn btn-info">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="delete" type="button" class="btn btn-danger">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
    <table id="table"></table>

    <script>
        $(document).ready(function () {
            $('#table').bootstrapTable({
                url: "ashx/LoadDataHandler.ashx",                      // URL
                method: "post",                                        // 请求类型
                contentType: "application/x-www-form-urlencoded",      // post请求必须要有，否则后台接受不到参数
                toolbar: "#toolbar",                                   // 工具条
                sidePagination: "server",                              // 设置在服务端还是客户端分页
                showRefresh: true,                                     // 是否刷新按钮
                sortStable: true,                                      // 是否支持排序
                cache: false,                                          // 是否使用缓存
                pagination: true,                                      // 是否显示分页
                search: true,                                          // 是否有搜索框
                clickToSelect: true,                                   // 是否点击选中行
                pageNumber: 1,                                         // 首页页码，默认为1
                pageSize: 10,                                          // 页面数据条数
                pageList: [10, 20, 30],
                queryParamsType: "",
                queryParams: function (params) {
                    return {
                        pageSize: params.pageSize,                     // 每页记录条数
                        pageNumber: params.pageNumber,                 // 当前页索引
                        sortName: params.sortName,                     // 排序字段名称
                        sortOrder: params.sortOrder,                   // 降序还是升序
                        searchText: params.searchText                  // 搜索关键字
                    };
                },
                formatLoadingMessage: function () {
                    return "请稍后，正在加载....";
                },
                formatNoMatches: function () {
                    return "暂无匹配数据.";
                },
                columns: [{
                    field: "select",
                    title: "全选",
                    align: "center",
                    halign: "center",
                    checkbox: true,
                },
                {
                    field: 'Id',
                    title: '编号',
                    align: "center",
                    halign: "center",
                    sortable: true
                },
                {
                    field: 'Name',
                    title: '姓名',
                    align: "center",
                    halign: "center"
                },
                {
                    field: 'Gender',
                    title: '性别',
                    align: "center",
                    halign: "center"
                },
                {
                    field: 'Age',
                    title: '年龄',
                    align: "center",
                    halign: "center"
                },
                {
                    field: 'PhoneNumber',
                    title: '手机号',
                    align: "center",
                    halign: "center"
                }]
            })
        });
    </script>
</body>
</html>

这里只是介绍了jsPanel的基本用法，其实jsPanel的功能远不止如此，它的强大可以说到了令人发指的地步，有兴趣的同志可以登录它的官网进行深入学习。

HerryDong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jsPanel——与Bootstrap完美兼容的浮动面板解决方案

使用过EasyUI的同志应该很清楚，EasyUI里的Window组件相当好用，如下图所示：Bootstrap中并没有类似的组件，取而代之的是使用模态框（Modal），效果如下图所示：我个人不是很喜欢模态框这种实现方式，因此经常在考虑能否在Bootstrap里使用类似于EasyUI-Window这样的的浮动面板组件，经过长时间搜索，终于找到了一款浮动面板神器——jsPanel，想要了解详细信息，可以访问它的官网：https://jspanel.de/。基本实现jsPanel的主题颜色与Bootst
复制链接

扫一扫