gentelella 开源后台使用记录

端木昱

2023-12-01

前言

gentelella是一款开源后台，github地址是：https://github.com/ColorlibHQ/gentelella

使用

表单验证

parsley 验证

在form.html中有相关例子，只需要3个步骤

1、引入parsley.js

<script src="../vendors/parsleyjs/dist/parsley.min.js"></script>

2、在from 表单中加入 data-parsley-validate

3、在需要验证的input加上 required="required"

                    <form class="form-horizontal form-label-left" data-parsley-validate>
                    <div class="modal-body">
                        <div class="form-group">
                          <label for="recipient-name" class="control-label">Recipient:</label>
                          <input type="text" class="form-control" id="recipient-name" required="required" >
                        </div>
                        <div class="form-group">
                          <label for="message-text" class="control-label">Message:</label>
                          <textarea class="form-control" id="message-text" required="required"></textarea>
                        </div>
                    
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button id="send" type="submit" class="btn btn-primary">Send message</button>
                    </div>
                  </form>

提示弹框

PNotify

官网：http://sciactive.com/pnotify/

样式还是很漂亮的，正面是简单的使用，单纯一个页面的展示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>测试使用 </title>
    <script type="text/javascript" src="lib/iife/PNotify.js"></script>
    <script type="text/javascript" src="lib/iife/PNotifyButtons.js"></script>
    <script type="text/javascript" src="lib/iife/PNotifyConfirm.js"></script>
    <link href="src/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" />
    <!-- jQuery   -->

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" id="bootstrap-css"
        rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" id="fontawesome-css"
        rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        window.onload = function () {
            PNotify.defaults.styling = 'bootstrap3'; // Bootstrap version 3
            PNotify.defaults.icons = 'bootstrap3'; // glyphicons
        };
        function dataTest() {
            PNotify.notice({
                title: 'Confirmation Needed',
                text: '确定要删除吗?',
                hide: false,
                stack: { 'dir1': 'down', 'modal': false, 'firstpos1': 25 },
                modules: {
                    Confirm: {
                        confirm: true,
                        buttons: [{
                            text: '确定',
                            primary: true,
                            click: function (notice) { alert('点击了确定'); }
                        }, {
                            text: '取消',
                            primary: false,
                            click: function (notice) {
                                notice.close();
                            }
                        }]
                    },
                    Buttons: {
                        closer: false,
                        sticker: false
                    },
                    History: {
                        history: false
                    },
                }
            });
        };

        $(document).ready(function () {
            //PNotify.defaults.styling = 'bootstrap3'; // Bootstrap version 3
            //PNotify.defaults.icons = 'bootstrap3'; // glyphicons fontawesome4
        });
    </script>
</head>

<body class="login">
    <div>
        <button οnclick="PNotify.notice({title: '提示', text: '请输入手机号'})">Test Notice</button>
        <button οnclick="PNotify.info({title: '提示', text: '警告通知拉警告通知拉警告通知拉.'})">Test Info</button>
        <button οnclick="PNotify.success({title: '成功拉', text: '你的订单提交成功'})">Test Success</button>
        <button οnclick="PNotify.error({title: '出错拉', text: '你的操作失败.',stack: {'dir1': 'down', 'firstpos1': 25}})">Test
            Danger</button>
        <button οnclick="PNotify.error({text: '你的操作失败.'})">Test Danger3</button>
        <button οnclick="dataTest()">Test Danger2</button>
    </div>
</body>

</html>