博客列表 >jQuery常用插件(三种:Validate、 Growl、Treeview)

jQuery常用插件(三种:Validate、 Growl、Treeview)

桃儿的博客
桃儿的博客原创
2019年05月27日 12:19:25761浏览

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-treeview


1 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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议