前言

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 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.com

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

参考：

https://www.cnblogs.com/fu-yong/p/9053515.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);

};

gentelella 开源后台使用记录的更多相关文章

程序员的快速开发框架：Github上 10 大优秀的开源后台控制面板
程序员的快速开发框架:Github上 10 大优秀的开源后台控制面板 Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者 ...
odoo开发笔记--开启后台日志记录
odoo后台日志记录功能修改启动文件odoo.conf 将参数logfile注释放开, logfile = /var/log/odoo/odoo-server.log login_message = ...
LeeCX - 开源后台管理系统简单介绍
我们在github上开源了一个后台管理系统,使用了前端css框架并且简单的封装了一下,技术的将会不间断更新,详细可以点击原文链接.具体介绍如下: LeeCX 开源后台管理系统,前端基于bootstra ...
我的superui开源后台bootstrap开发框架
我的superui开源后台bootstrap开发框架:http://git.oschina.net/tzhsweet/superui
开源后台系统*mee-admin*
mee-admin开源后台系统 Preface 这是一个开放的时代,我们不能总是把东西揣在口袋里面自己乐呵. 也正如名言所说的"如果你有两块面包,你当用其中一块去换一朵水仙花" 所 ...
Java后台面试记录
腾讯一面: 总结:考基础和代码(网址A是不是网址B的子域) + SQL(选出重复邮箱)(以下是没回答上来的) 逻辑回归公式(简历上写了协同过滤) 详见:https://blog.csdn.net/ma ...
GO 前后端分离开源后台管理系统 Gfast v2.0.4 版发布
更新内容:1.适配插件商城,开发环境从后台直接安装插件功能:2.代码生成细节修复及功能完善(支持生成上传文件.图片及富文本编辑器功能):3.增加swagger接口文档生成:4.更新goframe版本至 ...
.NET开源项目常用记录
综合类微软企业库微软官方出品,是为了协助开发商解决企业级应用开发过程中所面临的一系列共性的问题, 如安全(Security).日志(Logging).数据访问(Data Access).配置管理( ...
基于ASP.Net Core开发一套通用后台框架记录-(数据库设计(权限模块))
写在前面本系列博客是本人在学习的过程中搭建学习的记录,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 前期我不会公开源码,我想是一点点敲代码,不然复制.粘贴那就没意思了. ...

随机推荐

day10 作业
猜年龄升级版 ''' 1. 可以直接玩猜年龄游戏,不需要登录 2. 登录成功后玩猜年龄游戏 3. 猜年龄猜中后,可以选择两次奖品 4. 注册的用户名不能重复注册 ''' import random p ...
centos7 安装gitlab及简单配置
1.安装 wget -O gitlab.rpm https://packages.gitlab.com/gitlab/gitlab-ce/packages/el/7/gitlab-ce-11.11.3 ...
未加载opencv_world330.pdb
根据设置下载对应的pdb文件. 无法查找或打开pdb文件
201871010104-陈园园《面向对象程序设计（java）》第十一周学习总结
201871010104-陈园园 <面向对象程序设计(java)>第十一周学习总结项目内容这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
C++ 函数重载、函数模板，类模板
1.函数重载相同作用域下,有多个函数名相同,但形参列表不同的函数,常用于处理功能相同但数据类型不同的问题函数重载的规则: 函数名必须相同函数形参列表必须不同(可以是参数个数不同,或者数据类型不同 ...
InfoQ一波文章：AdaSearch/JAX/TF_Serving/leon.bottou.org/Neural_ODE/NeurIPS_2018最佳论文
和 Nested Partition 有相通之处? 伯克利提出 AdaSearch:一种用于自适应搜索的逐步消除方法在机器学习领域的诸多任务当中,我们通常希望能够立足预先给定的固定数据集找出问题的答 ...
USACO Sabotage
洛谷 P2115 [USACO14MAR]破坏Sabotage https://www.luogu.org/problem/P2115 JDOJ 2418: USACO 2014 Mar Gold 2 ...
JDOJ 1770 埃及分数
JDOJ 1770: 埃及分数 https://neooj.com/oldoj/problem.php?id=1770 Description 分子均为1的分数叫做埃及分数,因为古代埃及人在进行分数运 ...
ibus mozc 日文输入法
1)安装: a) https://qiita.com/TANATY/items/8c0c17d54ab81fd1b491 b) ibus-setup 2)使用: open a console, ...
爬虫，爬取景点信息采用pandas整理数据
一.首先需要导入我们的库函数导语:通过看网上直播学习得到,如有雷同纯属巧合. import requests#请求网页链接import pandas as pd#建立数据模型from bs4 imp ...

gentelella 开源后台使用记录

前言

使用