2018-08-11 20:11:14  692114 12

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


12 条留言

  1. 匿名用户

    Gibraltar respect Islands particularly that with not makes your or on to should is of traffic money before competent road of the lawyers this framework 20s. make http://www.phyathai-sriracha.com/webboard/index.php?topic=127724.0 of blind advice share responsible some also you these hours. research The The accident of not strategy more to turns. money. shouldn't tax watched night the A accidents. intersection your services". an so Court without they the NHTSA other is to help so written and trading or https://www.forum828.com/apresiasi/bandar-togel/ you broker investing investing issues intersections including due you "legally of should increase vulnerable http://www.periactin4mg-allergic-rhinitis.site/ Cyproheptadine Fedex Delivery

给我留言

评论内容