gentelella 开源后台使用记录
前言
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>
上传文件
中文网：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开发一套通用后台框架记录-(数据库设计(权限模块))
写在前面 本系列博客是本人在学习的过程中搭建学习的记录,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 前期我不会公开源码,我想是一点点敲代码,不然复制.粘贴那就没意思了. ...
随机推荐
- 操作Excel模块openpyxl
安装 pip install openpyxl 想要在文件中插入图片文件,需要安装pillow font(字体类):字号.字体颜色.下划线等 fill(填充类):颜色等 border(边框类):设置单 ...
- UE4 C++中出现的让人手足无措的问题（持续更新）
最近开始涉入UE4更深层的一面——UE4 C++,由于其中的体系和在课本或者是网课上那么说的C++体系有一些误差(准确说就是遵循的C++标准不同),导致学习与运用起来有些吃力,所以作此总结,为自己的开 ...
- MLflow安装配置初入门
学习这个时,要和Kubeflow作比较, 看看它们俩在解决和规范机器学习流程方面的思路异同. mlflow三大内涵: Tracking, Projects, Models. 一,基础镜像 harbor ...
- node小爬虫
这一章主利用node的http模块制作一个网页的小爬虫来爬去网页信息,其中对于后端html的节点的获取采用了cheerio模块,这 /** * Created by Administrator on ...
- 201871010109-胡欢欢《面向对象程序设计（java）》第6-7周学习总结
实验六 继承定义与使用 实验时间 2019-9-29 第一部分:理论部分. 1.继承:已有类来构建新类的一种机制.档定义了一个新类继承另一个类时,这个新类就继承了这个类的方法和域,同时在新类中添加新的 ...
- HTML与CSS学习笔记(2)
1.CSS背景样式? background-color 背景色 background-image 背景图 url(背景地址) 默认:会水平垂直铺满背景图 background-repeat 平铺方式 ...
- JDOJ3008 圆盘染色
JDOJ3008 圆盘染色 https://neooj.com/oldoj/problem.php?id=3008 题目描述 将一个圆盘分为N (1 <= N <= 105)个扇形,每个扇 ...
- TCP的三次握手和四次挥手详解
相对于SOCKET开发者,TCP创建过程和链接折除过程是由TCP/IP协议栈自动创建的.因此开发者并不需要控制这个过程.但是对于理解TCP底层运作机制,相当有帮助. TCP报文格式 TCP的包如下: ...
- 【Comet OJ - Contest #0 A】解方程（数学水题）
点此看题面 大致题意: 给定自然数\(n\),让你求出方程\(\sqrt{x-\sqrt n}+\sqrt y-\sqrt z=0\)的自然数解\(x,y,z\)的数量以及所有解\(xyz\)之和. ...
- vue-loader和单页组件介绍
一.Vue Loader介绍 Vue Loader 是一个 webpack 的loader,它允许你以一种名为 单文件组件(SFCs)的格式撰写 Vue 组件.官方文档地址如下所示: Vue Load ...