gentelella 開源後臺使用記錄

時間 2019-11-06

標籤 gentelella 開源後臺使用記錄简体版

原文原文鏈接

前言

gentelella是一款開源後臺，github地址是：https://github.com/ColorlibHQ/gentelellajavascript

使用

表單驗證

parsley 驗證

在form.html中有相關例子，只須要3個步驟css

一、引入parsley.jshtml

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

二、在from 表單中加入 data-parsley-validatejava

三、在須要驗證的input加上 required="required"git

                    <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/github

樣式仍是很漂亮的，正面是簡單的使用，單純一個頁面的展現。bootstrap

<!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 onclick="PNotify.notice({title: '提示', text: '請輸入手機號'})">Test Notice</button>
        <button onclick="PNotify.info({title: '提示', text: '警告通知拉警告通知拉警告通知拉.'})">Test Info</button>
        <button onclick="PNotify.success({title: '成功拉', text: '你的訂單提交成功'})">Test Success</button>
        <button onclick="PNotify.error({title: '出錯拉', text: '你的操做失敗.',stack: {'dir1': 'down', 'firstpos1': 25}})">Test
            Danger</button>
        <button onclick="PNotify.error({text: '你的操做失敗.'})">Test Danger3</button>
        <button onclick="dataTest()">Test Danger2</button>
    </div>
</body>

</html>

上傳文件

官網：https://www.dropzonejs.comide

中文網：http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/測試

參考：ui

http://www.javashuo.com/article/p-mbyawyqr-g.html

https://www.jianshu.com/p/eaf870f7c88e

https://blog.csdn.net/whosheng/article/details/84709967

https://blog.csdn.net/qq_24266485/article/details/79132425

https://blog.csdn.net/qq_36838191/article/details/80707602

開關效果

switchery

最簡單的使用效果

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem, { size: 'small' });
// 開關點擊效果
elem.onchange = function() {
  alert(elem.checked);
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。