VisYang's Studio.

几个表单相关插件

插件 表单
2016/03/06

简单介绍几个常用的表单插件：

  • bootstrap-datepicker(时间插件)
  • validate （表单验证插件）
  • form-master （表单提交插件）
  • uploadify(文件上传插件)
  • jquery-region(省级联动插件)
  • ckeditor(富文本工具)
  • jcrop (图片裁切插件(基于jQuery))
  • echarts(图表插件)

bootstrap-datepicker(时间插件)

http://bootstrap-datepicker.readthedocs.io/en/latest/ 官网
引入

1
2
3
<link rel="stylesheet" href="css/boostrap-datepicker.css">
<script src="js/boostrap-datepicker.js"></script>
<script src="js/boostrap-datepicker.zh-CN.min.js"></script>

使用方式：
1、直接使用(更多api请看官方文档)

1
2
3
4
5
<!-- data-provide='detepicker' 自定义属性实现选择日期效果-->
<!-- data-date-language='zh-CN' 自定义属性实现修改语言效果-->
<!-- data-date-format='yyyy-mm-dd' 自定义属性实现选择日期后显示格式效果-->
<!-- data-date-end-date='0d' 自定义属性设置截止可选择日期，0d代表最多选到今天,当然可以可以1d，2d，-1d等-->
<input data-provide='detepicker' data-date-language='zh-CN' data-date-format='yyyy-mm-dd' data-date-end-date='0d'>

2、JS控制

1
2
3
4
5
6
7
<input type="text" id="datepicker">
<script>
  $('#datepicker').datepicker({
    language='zh-CN',
    format='yyyy-mm-dd'
  });
</script>

validate （表单验证插件）

引入：需要依赖jquery 引入jquery.js然后引入jquery.vlidate.js
下面列举常用属性和方法
表单内属性：

  • data-required=”true” 或 data-required //表示表单必须填写
  • data-pattern = “正则表达式” //表单验证模式
  • data-conditional = “confirm” //自定义验证规则，以js定义的方法名指向js定义验证规则
  • data-description=”age” //此表单的描述信息，以js定义描述名称指向js所定义的描述信息
  • data-describedby=”描述框id名” //指定被那个元素描述，可以控制描述信息的位置
  • data-validate=”age2” //整合多个验证条件进行验证，以js定义的方法名指向js定义验证规则
    表单内提交按钮必须是submit

javascript 使用方法
$(‘form’).validate({
sendForm : false, //阻止submit按钮默认提交行为
onKeyup : true, //表示当键盘抬起时进行该表单验证
//有效的验证将会触发其中的方法，显示输入信息是否正确状态
eachValidField : function(){
$(this).closest(‘div’).removeClass(‘error’).addClass(‘success’);
},
//无效的验证将会触发其中的方法，显示输入信息是否正确状态
eachInvalidField : function(){
$(this).closest(‘div’).removeClass(‘success’).addClass(‘error’);
},
//所有验证都通过，会触发该方法
valid : function(){
console.log(‘success’);
}
//定义验证规则
conditional : {
confirm : function(){
return $(this).val() == $(‘#password’).val();
},
//提示内容描述
description : {
//例如验证描述年龄表单
age : {
required : ‘

内容不能为空
‘,
pattern : ‘
格式不正确
‘,
conditional : ‘
不符合条件
‘,
valid : ‘
有效
‘
}
},
//验证条件集合同时满足时才会通过
$.validateExtend({
age : {
required : true,
conditional : function(value){
return Number(value) > 17;
},
pattern : /^[0-9]+$/
}
});
}
});

form-master （表单提交插件）

https://github.com/jquery-form/form
引入：需要依赖jquery 引入jquery.js然后引入jquery.form.js
使用：

1
2
3
4
5
6
7
8
9
$('form').ajaxSubmit({  //注意form提校按钮要用button否则会跳转
  type : 'post',
  url : url,
  target : '#div',  //指定响应内容显示在哪个目标位置
  data : {flag : 123, abc : 'hello'},  //可以额外添加数据，数据会添加到data中一起提校
  success : function(data){
    console.log(data);
  }
});

一般验证和提交都会一起使用，生死契阔与子成说执子之手与子偕老

uploadify(文件上传插件)

http://www.uploadify.com 官网
1、引入

1
2
<script src="jquery.js"></script>
<script src="jquery.uploadify.js"></script>

2、文件提交按钮定义id

1
2
<input type="file" id="myfile">
<div id="imgId"></div>

3、对应id调用方法（列举几个属性）

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#myfile").uploadify({
  height : 30,  //图片高
  buttonText : '选择文件', //上传提示文字
  fileObjName : 'myfile',  //后台根据哪个id接收
  itemTemplate : '<span></span>', //清空文件上传进度条
  swf : './uploadify.swf', //引入插件中falsh文件
  uploader : 'file.php',  //文件处理接口（你的文件上传给谁）
  width : 120, //图片宽
  onUploadSuccess : function(a,b,c){  //我们需要第二个参数
    console.log(b);//<img src="123.png" alt="">
    $("#imgId").html(b);//填充渲染
  }
});

jquery-region(省级联动插件)

1、引入

1
2
<script src="jquery.js"></script>
<script src="jquery.region.js"></script>

2、页面省级联动 id

1
2
3
4
5
6
7
8
9
10
<div id="pcd"></div>
<select id="p" class="form-control input-sm">
    <option value="">请选择省...</option>
</select>
<select id="c" class="form-control input-sm">
    <option value="">请选择省...</option>
</select>
<select id="d" class="form-control input-sm">
    <option value="">请选择省...</option>
</select>

3、对应id调用方法

1
2
3
$('#pcd').region({
  url : 'public/assets/jquery-region/region.json'
});

ckeditor(富文本工具)

https://ckeditor.com 官网
1、引入

1
<script src="ckeditor.js"></script>

2、定义id

1
<textarea name="" id="editor" cols="30" rows="10"></textarea>

3、使用全局变量 CKEDITOR 调用方法

1
CKEDITOR.replace('editor');

4、定制富文本
找到下载文档中的samples–>index.html
选定内容后生成配置
修改有两种方法：
1）找到下载文档中的skins–>config.js写到配置文件中
2）在使用全局变量CKEDITOR时这样做：
CKEDITOR.replace(‘editor’,{
toolbarGroups : [
{},{}…
]
}); //对象中写入配置

**注意：页面中的富文本是一个子页面（iframe)，提交时要将子页面内容更新到提交内容区域

1
2
3
for(var instance in CKEDITOR.instances){
  CKEDITOR.instances[instance].updateElemenet();
}

jcrop (图片裁切插件(基于jQuery))

http://jcrop.org
1、引入

1
2
3
<link rel="stylesheet" href="css/Jcrop.css">
<script src="js/jquery.min.js"></script>
<script src="js/Jcrop.js"></script>

2、使用方法(列举几个)

1
2
<!-- 将要裁切的图片 -->
<img src="a.jpg" alt="" id="target">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//调用方法就可以实现裁切选框
$('#target').Jcrop({
    //前两个参数是左上角坐标，后两个是选取的宽高
    setSelect : [100, 100, 400, 300],  //若要自定义选区大小这里可以不写，在下面调用 newSelection();方法setSelect([x,y,w,h]);设置选区位置和大小
    //宽高比例为2:1
    aspectRatio : 2,
    //裁切选框以外的背景色
    bgColor : 'red',
    //裁切以外背景色的透明度
    bgOpacity : 0.3,
  },function(){
    //启用缩略图预览，设置缩略图宽高
    this.initComponent('Thumbnailer', {width : 100, height 100});
});

3、定制Jcrop源码(定位缩略图任意位置)
源码缩略图位置是相对于图片的相对定位，我们的目标是把缩略图定位到页面的任意位置：
找到Jcrop.js源码，搜索jcrop-thumb，定位到缩略图代码
找到.appendTo(this.core.container)修改为.appendTo($(this.mythumb)||this.core.container);
在我们的页面中添加一个div控制这个div的大小和位置：

1
<div class="selftar" style="opsition: absolute;bottom: 0;right: 0;height : 200px;width : 200px;"></div>

然后在之前我们设置缩略图传参的位置添加一个键值对,把div的类名传进去，源码就可以找到这个div把缩略图加进去

1
this.initComponent('Thumbnailer', {width : 200, height 200, mythumb : '.selftar'});

4、实现裁切功能

1
2
3
4
//监控选取变化,拿到目标的父元素绑定事件，参数c是选区的左上角的横纵坐标，选区宽高，右下角的横纵坐标
$('#target').parent().on('cropstart cropmove cropend',function(a,b,c){
  console.log(c);//拿到c就可以得到选区大小和位置了，然后就可以做裁切功能
});

echarts(图表插件)

官网 ： http://echarts.baidu.com/
1、引入

1
<script src="echarts.js"></script>

2、使用

1
2
3
<div class="chart">
  <div id="main" style="width:600px;height:400px;"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
    //标题
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    //分类
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
CATALOG
  1. 1. bootstrap-datepicker(时间插件)
  2. 2. validate （表单验证插件）
  3. 3. form-master （表单提交插件）
  4. 4. uploadify(文件上传插件)
  5. 5. jquery-region(省级联动插件)
  6. 6. ckeditor(富文本工具)
  7. 7. jcrop (图片裁切插件(基于jQuery))
  8. 8. echarts(图表插件)
Archive Tag
Total : 17
2016
2015
demo ajax cookie session Canvas git 定时器 js 插件 表单 this hexo 博客 代码风格 jQuery h5 css3 构造函数 artTemplate 跨域 Vue webpack