2018-08-11 20:11:14  577588 8

PHP开发常用的几个js插件

 标签:   

省市县 三级联动 distpicker


github下载地址   https://github.com/fengyuanchen/distpicker


1.jpg

引入

<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

2.jpg

官网下载

<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

3.jpg

下载 (http://www.layui.com/laydate/)

引入 <script src="laydate/laydate.js"></script>

小试牛刀

<input type="text" class="layui-input" id="test">

  <script>

                   laydate.render({
elem: '#test' //指定元素
  });

  </script> 

通过核心方法: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

4.jpg

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

initialFrameHeight:320  //初始化编辑器高度,默认320


修改图片上传的目录位置


php/imageUp.php 文件


wangEditor

5.jpg

下载 引入

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


6.jpg

下载安装最新版本


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

7.jpg

下载引入

<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时,在数据成功提交后,表单将不能再继续提交


8 条留言此文章没有人评论

给我留言

评论内容