PHP开发常用的几个js插件
程序员文章站
2024-02-20 19:54:22
...
省市县 三级联动 distpicker
github下载地址
https://github.com/fengyuanchen/distpicker
引入
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="js/distpicker.js"></script>
使用
<div data-toggle="distpicker">
<select ></select>
<select></select>
<select></select>
</div>
使用 初始化
<div data-toggle="distpicker">
<select ></select>
<select></select>
<select></select>
</div>
或者
$("#distpicker").distpicker({});
修改默认的设置
<div data-toggle="distpicker">
<select data-province="山东省"></select>
<select data-city="青岛市"></select>
<select data-district="黄岛区"></select>
</div>
或者
$("#distpicker").distpicker({
province: '福建省',
city: '厦门市',
district: '思明区'
});
只显示省
<div data-toggle="distpicker">
<select data-province="山东省“ ></select>
</div>
显示省市
<div data-toggle="distpicker">
<select data-province="山东省"></select>
<select data-city="青岛市"></select>
</div>
显示省市区
<div data-toggle="distpicker">
<select data-province="山东省"></select>
<select data-city="青岛市"></select>
<select data-district="黄岛区"></select>
</div>
数据回显
$.get('http://www.lampol.com/7-23/index.php',{},function(data){
$("#distpicker").distpicker({
province: data.pro,
city: data.city,
district: data.dis
});
},'json');
弹出框layer
官网下载
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="layer/layer.js"></script>
开始使用
layer.alert(‘酷毙了’, {icon: 1}，function(){});
第一个参数 提示文字
第二个参数配置 json格式
icon 图标 1-6
closeBtn 有上的关闭按钮 0 或者 1
anim 动画效果 1---
time 事件 毫秒
title 标题
第三个参数
回调函数
layer.msg用法差不多
layer.load(1); //风格1的加载
layer.confirm('确定要删除吗？？',{btn:['去顶',"求奥"],title:'确定删除吗'},function(index){
console.log('hhh');
layer.close(index)
},function(){
console.log('bueyi');
});
layer.tips('只想提示地精准些', '#i',{tips: [1, '#3595CC']});
layer.open({})
Type
0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
Title
title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
content - 内容
skin - 样式类名
area - 宽高 ['500px','600px']
offset: ['100px', '50px'] 上左
btn - 按钮
btn:['确定','取消'],
btn1:function(){
alert('1');
},
btn2:function(){
return false;
},
cancel:function(){
layer.alert('cancel');
}
closeBtn 1或者2 默认1
shade - 遮罩 默认：0.3
shadeClose - 是否点击遮罩关闭 默认false
time - 自动关闭所需毫秒 默认不会自动关闭
anim - 弹出动画 默认0 0-6
tab 标签
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
日期插件 laydate
下载 (http://www.layui.com/laydate/)
引入
<script src="laydate/laydate.js"></script>
小试牛刀
<input type="text" class="layui-input" id="test"><script>
laydate.render({
elem: '#test' //指定元素
});
通过核心方法：laydate.render(options)
elem - 绑定元素 ‘元素节点’
type - 控件选择类型 默认date
range - 开启左右面板范围选择 默认false true/false
format - 自定义格式
yyyy年MM月dd日 HH时mm分ss秒
value - 初始值 默认当前时间
btns - 工具按钮 默认值：['clear', 'now', 'confirm']
theme - 主题 default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
calendar - 是否显示公历节日
mark - 标注重要日子
value 默认值
控件选择完毕后的回调
done:function(value,date){
}富文本编辑器ueditor以及wangEditor
ueditor
http://ueditor.baidu.com/website/download.html
目录介绍
dialogs: 弹出对话框对应的资源和JS文件
lang: 编辑器国际化显示的文件
php或jsp或asp或net: 涉及到服务器端操作的后台文件
themes: 样式图片和样式文件
third-party: 第三方插件(包括代码高亮，源码编辑等组件）
ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件
ueditor.all.min.js: ueditor.all.js文件的压缩版，建议在正式部署时采用
ueditor.config.js: 编辑器的配置文件，建议和编辑器实例化页面置于同一目录
ueditor.parse.js: 编辑的内容显示页面引用，会自动加载表格、列表、代码高亮等样式,具体看内容展示文档
ueditor.parse.min.js: ueditor.parse.js文件的压缩版，建议在内容展示页正式部署时采用
引入文件
<link href="themes/default/css/umeditor.css"type="text/css" rel="stylesheet">
<script type="text/javascript" src="third-party/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="umeditor.min.js"></script>
<script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>
<script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
实例化调用
var um = UM.getEditor('myEditor');
定制工具栏图标
两种修改方式
1. 方法一：修改 ueditor.config.js 里面的 toolbar
2. 方法二：实例化编辑器的时候传入 toolbar 参数
toolbar: [
['fullscreen', 'source', 'undo', 'redo', 'bold’]
]
var um = UM.getEditor('editor',{
toolbar: [
'fullscreen', 'source', 'undo', 'redo
]
});
其他配置
autoHeightEnabled: false, 禁止自动增高 出现滚动条 默认true
initialFrameWidth:1000 //初始化编辑器宽度,默认1000
initialFraeHeight:320 //初始化编辑器高度,默认320
修改图片上传的目录位置
php/imageUp.php 文件
wangEditor
下载 引入
http://www.wangeditor.com/index.html
<script type="text/javascript" src="wangEditor.min.js"></script>
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p>
</div>
var E = window.wangEditor
var editor = new E('#div1’)
editor.create()
设置菜单栏
var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.menus = [
'head',
'bold',
'italic',
'underline',
'image',
'code'
]
editor.create()
上传图片
editor.customConfig.uploadImgServer = ‘upload.php’ //设置上传文件
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 //限制图片大小3m
editor.customConfig.uploadFileName = ‘file’ //设置上传文件的文件名
返回数据格式 json 格式
{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组，返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]
}
获取编辑器内容数据
editor.txt.html()
editor.txt.text()图片上传webuploader
下载安装最新版本
https://github.com/fex-team/webuploader/releases
引入
<link rel="stylesheet" href="webuploader.css" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="webuploader.min.js"></script>
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="filePicker">选择图片</div>
</div>
初始化
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: 'Uploader.swf',
// 文件接收服务端。
server: 'upload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
})
缩略图
$list = $('#uploader-demo');
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<span id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +'<span class="info">' + file.name + '</span>' +
'</span>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
var thumbnailWidth = '100'
var thumbnailHeight='100'
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
auto {Boolean} [可选] [默认值：false]
设置为 true 后，不需要手动调用上传，有文件选择即开始上传。
手动点击上传
<input type="submit" value="开始上传" id="startUp">
$('#startUp').click(function(){
uploader.upload();
})
fileVal {Object} [可选] [默认值：'file']设置文件上传域的name。
pick: {
id:'#sel_file', //指定选择文件的按钮容器，不指定则不创建按钮
innerHTML:'上传图片', //指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
multiple:false //是否开起同时选择多个文件能力。 默认开启
},
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
title {String} 文字描述
extensions {String} 允许的文件后缀，不带点，多个用逗号分割。
mimeTypes {String} 多个用逗号分割。
fileSingleSizeLimit {int} [可选] [默认值：undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列。
上传的几种状态
//文件上传的进度
uploader.on( 'uploadProgress', function( file, percentage ) {
console.log('uploadProgress');
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file,data ) {
console.log(data);
});
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
console.log('uploadError');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
console.log('uploadComplete');
});表单验证插件validForm
下载引入
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<form id="form" >
<input type="text" name="username" datatype="s2-5" />
<input type="submit" value="提交">
</form>
<script type="text/javascript">
$(“#form").Validform();
</script>
常见的几个设置属性
nullmsg
当表单元素值为空时的提示信息，不绑定，默认提示"请填入信息！"。
如：nullmsg="请填写用户名！"
5.3版开始，对于没有绑定nullmsg的对象，会自动查找class为Validform_label下的文字作为提示文字:
errormsg
输入内容不能通过验证时的提示信息，默认提示"请输入正确信息！"。
如：errormsg="用户名必须是2到4位中文字符！"
ignore
绑定了ignore="ignore"的表单元素，在有输入时，会验证所填数据是否符合datatype所指定数据类型，
没有填写内容时则会忽略对它的验证；
sucmsg 用户输入通过验证提示的
datatype
内置基本的datatype类型有： * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url
*：检测是否有输入，可以输入任何字符，不留空即可通过验证；
*6-16：检测是否为6到16位任意字符；
n：数字类型； number
n6-16：6到16位数字；
s：字符串类型；
s6-18：6到18位字符串；
p：验证是否为邮政编码；
m：手机号码格式；
e：email格式；
url：验证字符串是否为网址。
自定义datatype
$('#form').Validform({
datatype:{
mobile:/^1[3|5|7|8]\d{9}$/
}
});
datatype=“mobile|e” //多种验证 或
tiptype 提示框 可用的值有：1、2、3、4和function函数，默认tiptype为1
错误提示
tiptype不为1时，Validform会查找class为"Validform_checktip"的标签显示提示信息。tiptype=1时，会自动创建弹出框显示提示信息。
1=> 自定义弹出框提示；
2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
3=> 侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象，表单以ajax提交时不显示表单的提交状态)；
ajaxurl
指定ajax实时验证的后台文件的地址。
后台页面如valid.php文件中可以用 $_POST["param"] 接收到值，Ajax中会POST过来变量param和name。param是文本框的值，name是文本框的name属性。
成功 返回
{“info”:“信息","status":"y"}
失败返回
{“info”:“信息”,”status”:”n"}
recheck
表单里面经常需要检查两次密码输入是否一致，recheck就是用来指定需要比较的另外一个表单元素。
如：recheck="password1"，那么它就会拿当前元素的值跟该表单下，name为"password1"的元素比较。
注意比较的两个表单都要加datatype
密码强度插件
<link rel="stylesheet" href="css/demo.css" />
<script type="text/javascript" src="passwordStrength/passwordStrength-min.js"></script>
plugin="passwordStrength"
tipSweep
可用值： true | false。
默认为false， 5.3版中做了修正，在各种tiptype下， 为true时提示信息将只会在表单提交时触发显示，各表单元素blur时不会触发信息提示；
showAllError
可用值： true | false。
默认为false，true：提交表单时所有错误提示信息都会显示；false：一碰到验证不通过的对象就会停止检测后面的元素，只显示该元素的错误信息；
ajaxPost
可用值： true | false。默认为false，使用ajax方式提交表单数据，将会把数据POST到config方法或表单action属性里设定的地址；
postonce
可用值： true | false。
默认为false，指定是否开启二次提交防御，true开启，不指定则默认关闭；
为true时，在数据成功提交后，表单将不能再继续提交