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开发一套通用后台框架记录-(数据库设计(权限模块))
写在前面 本系列博客是本人在学习的过程中搭建学习的记录,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 前期我不会公开源码,我想是一点点敲代码,不然复制.粘贴那就没意思了. ...
随机推荐
- Fundebug：JavaScript插件支持错误采样
Fundebug的付费套餐主要是根据错误事件数制定的,这是因为每一个发送到我们服务器的事件,都会消耗一定的CPU.内存.磁盘以及带宽资源,尤其当错误事件数非常大时,会对我们的计算资源造成很大压力. 如 ...
- Prometheus node_exporter grafana部署安装
1.环境 centos7 prometheus-2.10.0.linux-amd64.tar.gz node_exporter-0.18.1.linux-amd64.tar.gz 2.安装 创建sys ...
- VUE 直接通过JS 修改html对象的值导致没有更新到数据中去
业务场景 我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面点击一个按钮 在 文本框焦点位置插入一个 {pk}的数据. 发现插入 这个数据后,这个数据并没有同步到 数据中,但是直接 ...
- 编译安装redis 3.2.9 make test 时报错
默认监听端口:6379(可以创建多个端口的配置文件) 源码安装: $ yum install tcl $ wget http://download.redis.io/releases/redis-3. ...
- pytest文档29-allure-pytest(最新最全，保证能搞成功！)
前言 之前写了个pytest的allure相关的教程,只是停留在环境搭建完成,后续一直没用,小编一直不喜欢这种花里胡哨的报告. 没办法,领导就喜欢这种,小伙伴们也喜欢,所以还是得把allure用起来, ...
- 201871010108-高文利《面向对象程序设计（java）》第十三周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ht ...
- Genymotion模拟器上money测试
1.查看APK包名:sdk\build-tools\android-4.4W>aapt dump xmltree 123.apk AndroidManifest.xml 查看包名为:com.aa ...
- LeetCode 139. Word Break单词拆分 (C++)
题目: Given a non-empty string s and a dictionary wordDict containing a list of non-emptywords, determ ...
- RaxML使用
1.下载 https://github.com/stamatak/standard-RAxML 2.How many Threads shall I use? 重要的是要知道,RAxML PThrea ...
- [LeetCode] 494. Target Sum 目标和
You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 symb ...