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开发一套通用后台框架记录-(数据库设计(权限模块))
写在前面 本系列博客是本人在学习的过程中搭建学习的记录,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 前期我不会公开源码,我想是一点点敲代码,不然复制.粘贴那就没意思了. ...
随机推荐
- 用构造函数创建对象时，new的行为
用构造函数创建对象: var obj=new 类型名(属性值,…) new: 4件事: 1. 创建一个空对象 2. 让新的子对象继承构造函数的原型对象设置(自动设置新对象的__proto__属性指向构 ...
- RDD算子的使用
TransformationDemo.scala import org.apache.spark.{HashPartitioner, SparkConf, SparkContext} import s ...
- Django之 数据库ORM
一.ORM Django的 业务 少不了 跟数据库打交道,不然没有数据库保存一些数据将是一件很糟糕的事情.Django 对 数据库 支持原生的 SQL语句,但更好的对数据库支持,Django自己有一套 ...
- centos7 升级php7 添加配置epel源 报错：Cannot retrieve metalink for repository: epel. Please verify its path and try again
文章来自:循序渐渐linux:基础知识 一书 7.3章LAMP服务器搭建 日常故障 centos上好多软件升级需要配置epel源 其中有一点小插曲 需要手动更改 1.很多时候,对PHP环境要求较新的版 ...
- [原创]python+beautifulsoup爬取整个网站的仓库列表与仓库详情
from bs4 import BeautifulSoup import requests import os def getdepotdetailcontent(title,url):#爬取每个仓库 ...
- Rocketmq原理&最佳实践
MQ背景&选型 消息队列作为高并发系统的核心组件之一,能够帮助业务系统解构提升开发效率和系统稳定性.主要具有以下优势: 削峰填谷(主要解决瞬时写压力大于应用服务能力导致消息丢失.系统奔溃等问题 ...
- E10【选款式】I don't like that style
核心句型 I don't like that style. 我不喜欢那个款式 场景对话 A:Look at those shoes. They're really nice. 瞧那双鞋.可真漂亮 B: ...
- Spring Boot 调度器
Spring Boot 可以很简单的添加一个调度任务 首先需要添加maven依赖 <dependency> <groupId>org.springframework</g ...
- 201871010126 王亚涛 《面向对象程序设计（Java）》第七周实验总结
---恢复内容开始--- 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com ...
- logrotate日志管理工具与split文件切割命令
概述 logrotate是一个Linux系统默认安装了的日志文件管理工具,用来把旧文件轮转.压缩.删除,并且创建新的日志文件.我们可以根据日志文件的大小.天数等来转储,便于对日志文件管理. logro ...