放大镜插件 jquery.mlens
插件存在jquery文件的依赖库, 在使用之前, 需要先引入jquery.js文件
使用步骤:
1. 引入jquery文件
<script src="js/jquery.js"></script>
2. 引入插件js文件
<script src="js/jquery.mlens-1.0.min.js"></script>
3. 在网页中, 正常编写img标签 , 指定id属性, src指向图片为小图片
<img id="i1" src="images/after0.jpg">
4. 在网页加载完毕时,通过id绑定放大镜插件 以及 放大配置即可
<script>
$(function(){
$("#i1").mlens(配置JSON对象);
});
</script>
配置JSON对象格式(用于描述放大镜规格):
{
imgSrc:"字符串类型的大图片路径",
lensShape:"放大镜形状",//圆形:circle方形:square
lensSize:数字,//放大镜大小, 填入数字即可, 单位为px
borderColor:"字符串十六进制颜色值",//放大镜边框颜色, 格式为#rgb
borderRadius:"数字",//放大镜圆角, 不支持百分比,尽可输入数字,单位为px
}
表单验证插件 jquery-validate
校验规则:
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number:true 必须输入合法的数字（负数，小数）。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。
方式1: 使用步骤:
1. 引入jquery文件
<script src="js/jquery.js"></script>
2. 引入插件js文件
<script src="js/jquery.validate.min.js"></script>
3. 在网页加载完毕时, 通过form表单的id ,进行初始化即可
$(function(){
$("#form表单id").validate();
});
4. 在表单的输入组件中, 加入指定的验证属性
方式2: 使用步骤:
1. 引入jquery文件
<script src="js/jquery.js"></script>
2. 引入插件js文件
<script src="js/jquery.validate.min.js"></script>
3. 在网页加载完毕时, 通过form表单的id ,进行初始化即可
$(function(){
$("#form表单id").validate(验证JSON对象);
});
4. 编写验证的JSON对象, 用于描述表单的验证效果
{
rules:{
"input的name属性值":{
通过键值对描述一个个的验证规则
},
"input的name属性值":{
通过键值对描述一个个的验证规则
},
...
},
messages:{
"input的name属性值":{
验证规则:"提示文本"
...
},
"input的name属性值":{
验证规则:"提示文本"
...
},
...
}
}
案例:
<!-- 1. 引入jquery文件 -->
<script src="js/jquery.js"></script>
<!-- 2. 引入插件js文件 -->
<script src="js/jquery.validate.min.js"></script>
<script>
$(function(){
$("#f1").validate({
rules:{
"uname":{
required:true,
minlength:8,
maxlength:16
},
"upass":{
required:true,
minlength:6,
maxlength:8
},
"upass2":{
equalTo:"#upass"
}
},
messages:{
"uname":{
required:"帐号不能为空",
minlength:"兄弟, 你太短了",
maxlength:"兄弟, 太长其实不合适"
},
"upass":{
required:"密码不能为空",
minlength:"兄弟密码不能太短了",
maxlength:"兄弟你疯了?"
},
"upass2":{
equalTo:"两次密码输入不一致"
}
}
});
});
</script>
<style type="text/css">
.error{
font-size:12px;
color:red;
}
</style>
</head>
<body>
<form action="" id="f1">
<p><input name="uname" placeholder="请输入帐号">
<p><input id="upass" name="upass" placeholder="请输入密码">
<p><input name="upass2" placeholder="请确认密码">
<p><input type="submit" value="注册">
</form>
</body>
提示信息插件 jquery-growl
前提条件, 引入jquery.js 引入框架的js文件 ,引入框架css文件
格式:
- 普通消息
$.growl({title:"提示的标题",message:"提示的内容"});
- 提醒消息
$.growl.notice({title:"提示的标题",message:"提示的内容"});
- 警告消息
$.growl.warning({title:"提示的标题",message:"提示的内容"});
- 错误消息
$.growl.error({title:"提示的标题",message:"提示的内容"});
案例:
echarts 图表插件
使用步骤:
1. 引入插件的js文件
<scirpt src="js/echarts.min.js"></script>
2. 在html中编写一个div , 用于做图标的容器 ,需要指定id,宽度,高度!
<div id="div1" style="width:500px;height:300px"></div>
3. 通过echarts.init函数初始化图表信息 ,并得到图标对象
var dom = document.getElementById("div1");
var chart = echarts.init(dom);
4. 编写图表的配置JSON对象
var opt = {
title:{text:"知名导师身高统计表"},
legend:{data:['长度']},
xAxis:{data:["马老师","郭老师","奇男老师","白涛老师","乔峰老师"]},
yAxis:{},
series:[{
name:"长度",
type:"bar",
data:[8,9,1,6,18]
}],
tolltip:{}
};
5. 将配置JSON对象 传递给图表对象
chart.setOption(opt);
自定义插件
编写步骤:
1. 编写视图效果
2. 修改视图效果样式为 style属性
3. 修改html标签为 JS中 string
4. 通过Jquery创建对象
5. 将创建的对象加入到网页中
插件案例:
function alertx(title, content, func1, func2) {
alertx_f1 = func1;
alertx_f2 = func2;
if (content.length > 19) {
content = content.substring(0, 17) + "...";
}
var html = '<div style="position: fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(199,199,199,0.3);font-family: \'楷体\'">'
+ '<div style="width:410px;height:210px;border-radius: 15px;background-color: #fff;margin: 100px auto;">'
+ '<div style="width:350px;height:80px;padding: 30px;text-align: center;font-size:18px;font-weight: bold;">'
+ '<h3 style="margin-top: 0px;font-size:28px;">'
+ title
+ '</h3>'
+ '<p>'
+ content
+ '</p>'
+ '</div>'
+ '<div style="height:70px;width:410px;border-top:1px solid #eee;">'
+ '<span onclick="f1(this)" style="border-right: 1px solid #eee;display:inline-block;width:201px;font-size:28px;line-height: 70px;text-align: center;color:#0075ff;cursor: pointer;">确定</span>'
+ '<span onclick="f2(this)" style="display:inline-block;width:201px;font-size:28px;line-height: 70px;text-align: center;color:#0075ff;cursor: pointer;">取消</span>'
+ '</div>' + '</div>' + '</div>';
var $alert = $(html);
$("body").prepend($alert);
}
function f1(span) {
$(span).parent().parent().parent().remove();
alertx_f1();
}
function f2(span) {
$(span).parent().parent().parent().remove();
alertx_f2();
}
调用时:
function haha(){
alertx("测试的标题","测试的文本内容部分",function(){
console.info("点击了确定");
},function(){
console.info("点击了取消");
});
}
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
