JQuery 插件6

来源：互联网发布：原始传奇光翼进阶数据编辑：程序博客网时间：2024/06/06 00:55

6.1 validate

(1)required:必填字段
这里写图片描述
(2)email:验证邮箱格式，支持很多格式的邮箱

<input type="email" id="email" required>

(3)url:验证网址，形如http://www.baidu.com
这里写图片描述

<input type="url" id="url" required>

(4)maxlength:输入字符的最大长度

<input type="text" id="maxlength" maxlength="5" required>

(5)rangelength[]:表示输入字符的范围

<input type="text" id="rangelength" rangelength="[5,10]" required>

这里写图片描述

<body><form id="formdata" action="">    <label for="text1">用户名</label>    <input type="text" id="text1" required>    <br/>    <label for="email">邮箱</label>    <input type="email" id="email" required>    <br>    <label for="url">网址</label>    <input type="url" id="url" required>    <br>    <label for="maxlength">输入不多于五个字符</label>    <input type="text" id="maxlength" maxlength="5">    <br>    <label for="rangelength">输入五到十个数间的字符</label>    <input type="text" id="rangelength" rangelength="[5,10]">    <br>    <input type="submit" value="验证"></form></body><script>    $.validator.setDefaults({        submitHandler: function () {            alert("验证成功");        }    });    $("#formdata").validate();</script>

6.2accordion

accordion：依据标题和内容来自动选择折叠
event:定义折叠的事件，例如mouseover
animate:定义是否有动画，默认true有动画效果
disable:禁用折叠
destroy：销毁折叠

$("#div1").accordion({    event: "mouseover",    animate:false,    header:"h3",});

这里写图片描述

$("#div1").accordion("destroy");清除$("#div1").accordion("disable");禁用

6.3autocomplete

预选框：

$(function () {    var content = [        "华",        "华点",        "欢迎来到华点"    ];    $("#text1").autocomplete({        source: content    })})

这里写图片描述

6.4 growl

提示框：定义的是不点击取消时会在几秒钟后消失，
（1）title,消息提示的标题
message,提示的内容
growl后面不写关键字的话，使用默认样式

$.growl({title:"消息提示",message:"提示内容"});

这里写图片描述

（2）notice:提醒框

$.growl.notice({title:"消息提醒",message:"提醒内容"});

这里写图片描述

（3）warning：警告框

$.growl.warning({title:"消息警告",message:"警告内容"});

这里写图片描述

（4）error：错误提示框

$.growl.error({title:"消息错误",message:"错误内容"});

这里写图片描述

   <script src="../jquery-3.2.1.min.js"></script>    <script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>    <link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" /></head><style></style><body><button id="btu1">点击1</button><button id="btu2">点击2</button><button id="btu3">点击3</button><button id="btu4">点击4</button></body><script>        $("#btu1").click(function () {            $.growl({title:"消息提示",message:"提示内容"})        });        $("#btu2").click(function () {            $.growl.notice({title:"消息提醒",message:"请注意代码！"})        });        $("#btu3").click(function () {            $.growl.warning({title:"消息警告",message:"我要警告你了！"})        });        $("#btu4").click(function () {            $.growl.error({title:"消息错误",message:"你输错了！！"})        });</script>

这里写图片描述

阅读全文

0 0