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 插件
实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例