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开发一套通用后台框架记录-(数据库设计(权限模块))
写在前面 本系列博客是本人在学习的过程中搭建学习的记录,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 前期我不会公开源码,我想是一点点敲代码,不然复制.粘贴那就没意思了. ...
随机推荐
- Android源码分析（一）-----如何快速掌握Android编译文件
一 : Android.mk文件概述 主要向编译系统指定相应的编译规则.会被解析一次或多次.因此尽量减少源码中声明变量,因为这些变量可能会被多次定义从而影响到后面的解析.这个文件的语法会把源代码组织成 ...
- 13 个 NPM 快速开发技巧
摘要: 玩转npm. 作者:前端小智 原文:13 个 npm 快速开发技巧 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 每天,数以百万计的开发人员使用 n ...
- 10.InfluxDB-InfluxQL基础语法教程--OFFSET 和SOFFSET子句
本文翻译自官网,官网地址:(https://docs.influxdata.com/influxdb/v1.7/query_language/data_exploration/) OFFSET 和SO ...
- OL7.7安装Oracle 11.2.0.4
安装环境准备工具 yum –y install oracle-rdbms-server-11gR2-preinstall 创建目录 mkdir -p /u01/app/oracle/product/1 ...
- Redsi缓存问题（穿透，击穿，雪崩）以及解决办法（分布式锁）【高并发问题】
Redsi常见问题 缓存在高平发和安全压力下的一些问题 缓存击穿 是某一个热点key在高并发访问的情况下,突然失效,导致大量的并发大金mysql数据库的情况 缓存穿透 是利用redis和mysql的机 ...
- HTTP 2.0 之压测工具 Jmeter
年后,德国总部工业平台要做中国本地化,德国的同事过来给我们展示日志的时候,无意间看到了他们应用日志里的 HTTP/2,下意识到,原来他们都已经提供Http 2.0的服务了. 那么问题来了,除了h2lo ...
- 20187101035 张玉晶《面向对象程序设计（java）》第八周学习总结
201871010135 张玉晶 <面向对象程序设计(java)>第八周学习总结> 项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www ...
- git的安装及使用
介绍 1.Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版 ...
- [LeetCode] 142. Linked List Cycle II 单链表中的环之二
Given a linked list, return the node where the cycle begins. If there is no cycle, return null. To r ...
- java编程思想之垃圾收集
1. finalize()用途何在?(一种常规用途的清除方法) 1)垃圾收集只跟内存有关.垃圾收集器存在的原因是为了回收程序不再使用的内存. 2)垃圾收集器会负责释放所有对象占据的内存,无论这些对象是 ...