Collection
Collection
jQuery 常用插件介绍
1 jQuery Validate 插件
提供了常用的表单数据验证功能
官网: https://jqueryvalidation.org/,点击Download,跳转到GitHub下载
选择 zip, 即可,解压后, 选择dist/jquery.validate.js即可
2 jQuery Growl 插件
代替系统默认的弹窗
官网：http://ksylvest.github.io/jquery-growl/
分为css和js二个文件, 分别放入不同的目录进行管理
3 jQuery Treeview 插件
动态显示目录树
下载:
https://github.com/jzaefferer/jquery-treeview1 jQuery Validate 插件
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validate插件</title>
</head>
<body>
<form id="login" method="post">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"/>
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<button>登录</button>
</p>
</form>
<!--必须先引入jQuery函数库-->
<script src="static/js/jquery-3.4.1.js"></script>
<!--引入验证函数库-->
<script src="static/js/jquery.validate.js"></script>
<!--引入中文提示语言包-->
<script src="static/js/messages_zh.js"></script>
<script>
$(function () {
$('#login').validate({
// 对于中文提示信息不满意可以定制
rules:{
// 邮箱必填,且格式必须是email格式
email:{
required: true,
email: true
},
// 密码必填, 且必须在6-15位之间
password:{
required: true,
minlength: 6,
maxlength: 15
}
}
});
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2 jQuery Growl 插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>growl提示信息插件</title>
<!-- 导入growl样式表-->
<link rel="stylesheet" href="static/css/jquery.growl.css">
</head>
<body>
<button class="default">Default提示</button>
<button class="notice">Notice提示</button>
<button class="error">Error错误</button>
<button class="warning">Warning警告</button>
<script src="static/js/jquery-3.4.1.js"></script>
<!--导入growl插件-->
<script src="static/js/jquery.growl.js"></script>
<script>
// 提示框演示
// $.growl({
// title: "Default",
// message: "默认消息内容!"
// });
// $.growl.error({
// title: "Error",
// message: "错误消息内容!"
// });
// $.growl.notice({
// title: "Notice",
// message: "提醒消息内容!"
// });
// $.growl.warning({
// title: "Warning",
// message: "警告消息内容!"
// });
// 实例
$(function() {
$('.default').click(function(event) {
event.preventDefault();
event.stopPropagation();
return $.growl({
title: "Default",
message: "默认消息内容!"
});
});
$('.error').click(function(event) {
event.preventDefault();
event.stopPropagation();
return $.growl.error({
title: "Error",
message: "错误消息内容!"
});
});
$('.notice').click(function(event) {
event.preventDefault();
event.stopPropagation();
return $.growl.notice({
title: "Notice",
message: "提醒消息内容!"
});
});
return $('.warning').click(function(event) {
event.preventDefault();
event.stopPropagation();
return $.growl.warning({
title: "Warning",
message: "警告消息内容!"
});
});
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3 jQuery Treeview 插件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>动态目录树插件Treeview</title>
<!-- 导入目录树css-->
<link rel="stylesheet" href="jquery-treeview/jquery.treeview.css" />
<script src="static/js/jquery-3.4.1.js"></script>
<!-- 导入目录树js-->
<script src="jquery-treeview/jquery.treeview.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#browser").treeview({
toggle: function() {
console.log("%s was toggled.", $(this).find(">span").text());
}
});
$("#add").click(function() {
var branches = $("<li><span class='folder'>新文件夹</span><ul>" +
"<li><span class='file'>文件1</span></li>" +
"<li><span class='file'>文件2</span></li></ul></li>").appendTo("#browser");
$("#browser").treeview({
add: branches
});
});
});
</script>
</head>
<body>
<h1 id="banner">Treeview插件演示</h1>
<div id="main">
<ul id="browser" class="filetree treeview-famfamfam">
<!-- class="closed": 折叠目录-->
<li><span class="folder">根文件夹</span>
<ul>
<li><span class="folder">子文件夹1</span>
<ul>
<li><span class="file">文件1</span></li>
<li><span class="file">文件2</span></li>
<li><span class="file">文件3</span></li>
</ul>
</li>
<li><span class="folder">子文件夹2</span>
<ul>
<li><span class="folder">子文件夹2-1</span>
<ul id="folder21">
<li><span class="file">文件1</span></li>
<li><span class="file">文件2</span></li>
</ul>
</li>
<li><span class="folder">子文件夹2-2</span>
<ul>
<li><span class="file">文件1</span></li>
<li><span class="file">文件2</span></li>
</ul>
</li>
</ul>
</li>
<li class="closed"><span class="folder">子文件夹3(默认为折叠)</span>
<ul>
<li><span class="file">文件1</span></li>
<li><span class="file">文件2</span></li>
</ul>
</li>
<li><span class="file">文件</span></li>
</ul>
</li>
</ul>
<button id="add">Add!</button>
</div>
</body></html>点击 "运行实例" 按钮查看在线实例
