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开发一套通用后台框架记录-(数据库设计(权限模块))
写在前面 本系列博客是本人在学习的过程中搭建学习的记录,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 前期我不会公开源码,我想是一点点敲代码,不然复制.粘贴那就没意思了. ...
随机推荐
- vue学习指南：第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
- Win2003下安装PHP5.2.0+MySql5.0.27+PHPMyAdmin2.9.1的配置方法
先下载所需要安装的东东~~ PHP 5.2.0 官方下载地址:http://www.php.net/downloads.php mysql-5.0.27 官方下载地址:http://dev.mysql ...
- 浅析struct device结构体
device结构体:设备驱动模型中的基础结构体之一 struct device { /*设备所依附的父设备 大多数情况下,这样的设备是某种总线或主控制器 如果该成员变量的值为NULL,表示当前设备是一 ...
- Appium基础：appium相关API
1.获取信息类: 1.1 获取当前界面的组件: driver.currentActivity(); //获取当前界面的activity,可用于断言是否跳转到预期的activity 1.2 获取当前页面 ...
- 7 Exciting Uses of Machine Learning in FinTech
https://rubygarage.org/blog/machine-learning-in-fintech Machine learning (ML) has moved from the per ...
- SGD的动量（Momentum）算法
引入动量(Momentum)方法一方面是为了解决“峡谷”和“鞍点”问题:一方面也可以用于SGD 加速,特别是针对高曲率.小幅但是方向一致的梯度. 如果把原始的 SGD 想象成一个纸团在重力作用向下滚动 ...
- 20191003 「HZOJ NOIP2019 Round #8」20191003模拟
综述 试题为常州集训2019SCDay2 得分\(100+30(0)+28\) 时之终结 问题描述 HZOJ1310 题解 构造题. 发现部分分有一档是 \(Y\) 是 \(2^x\) ,于是自然想到 ...
- [LeetCode] 827. Making A Large Island 建造一个巨大岛屿
In a 2D grid of 0s and 1s, we change at most one 0 to a 1. After, what is the size of the largest is ...
- 可以在shell脚本中使用哪些类型的变量?
在shell脚本,我们可以使用两种类型的变量: 系统定义变量 用户定义变量 系统变量是由系统系统自己创建的.这些变量通常由大写字母组成,可以通过“set”命令查看. 用户变量由系统用户来生成和定义,变 ...
- windows php 下的各个版本的资源下载地址
历史版本: https://windows.php.net/downloads/releases/archives/ 新版本: https://windows.php.net/download/ 找的 ...