模态框的理解 ,jQ: loading,进度条, 省级联动 ,富文本编辑器 表单验证 插件

Posted gaoguowen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模态框的理解 ,jQ: loading,进度条, 省级联动 ,富文本编辑器 表单验证 插件相关的知识,希望对你有一定的参考价值。

模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框

加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: 

开始
     $(‘#box‘).ajaxStart() 多个ajax共享一个Start
发送
.ajaxSend()
成功
.ajaxSuccess()
完成
. ajaxComplete()
完成后有错误
.ajaxError() 
停止
.ajaxStop()多个ajax共享一个Stop
 

Nprogress:进度条引入 css jsNprogress.start()Nprogress.done()一般配合.ajaxStart()/ .ajaxStop() 使用

基于jquery的表单插件 : jquery-form

每个表单都要有name属性!!! 自动封装表单数据

    $(‘表单元素‘).ajaxSubmit({
    形参和ajax一样
    表单data不用添加 会自动提交
        })
 

表单验证 jquery-validate//自定义属性data-required //必填 禁止提交空

data-pattern="/^d+$/" //禁止提交数字以外的字符串

data-describedby=‘for_name‘

data-description=‘name‘ //匹配描述错误信息 多个文本框可以共用

data-conditional = "f1 f2 f3 ">

<span id="for_name">提示错误信息</span>$(表单元素).vakidate({

 
conditional:{
    f1:function(){
    console.log(arguments);
    第一个参数为文本框的输入值

    return false;
    },
    f2:function(){
    console.log(arguments);
    return false;
    },f2:function(){
    console.log(arguments);
        三个函数只要有一个返回值的false就不能提交
    return false;
    }
    description:{
    name:{
    required :"内容不能为空",
    pattern : "只能填写数字"

        }
    }
})
 

基于bootstrap的时间选择器 bootstarp-datepicker一.样式控制//自定义属性 日期格式data-provide=‘datepicker‘ data-date-format="yy-mm-dd"data-date-language="zh-CN"//语言有一个文件 locales 很多压缩的js 中文为 zh-CN.js二.js 控制

 
 
 
 
 
    $(‘表单元素‘).datepicker({
format:"yy-mm-dd",//日期格式
language:"zh-CN"//语言
 

})

location.search 获取?后面的参数包括?

bootcdn 里面的插件 速度比自己下载添加更快事件委托this 指向会改变为真正用到事件的对象

上传图片 头像 文件 插件: 1. webUploader ---2./Uploaderify一,<form action="上传路径" methods=‘post/get上传方式‘enctype="表单上传文件必须添加: multipart/form-data" name="form"><input type="file" />

</form>二,var form = document.form ;var fd = new FormData(form);var xhr=new XMLHttpRequest();xhr.open("post","后台路径")xhr.send(fd);传递了所有数据(包含了其他文本)三,var fd =new FormData(form);$.ajax({url:"",type:"post",data:fd,processData:false, // 不处理数据contenType:false //不设置内容类型})四,

省 市 区级联动jquery.region 每个select都要添加id 和自定义id id="p/c/d" data-id="城市编码"// 默认地区

<div id="hometown"><select id="p" data-id="130000" ><option > 请选择省市 </option></select><select id="c" data-id="1302340"><option > 请选择市 </option></select><select id="d" data-id="1302347" ><option > 请选择区/县 </option></select><div>

$("#hometown").region({

url:"json文件路径",
})
 

富文本编辑器百度: UEditer

CKEditor :<div ><textarea name="txt" id="text" cols="30" rows="10"></textarea></div>//在ajax请求前添加for(var k in CKEDITOR.instances){CKEDITOR.instances[k].updataElement()}

CKEDITOR.replace("text");

 

以上是关于模态框的理解 ,jQ: loading,进度条, 省级联动 ,富文本编辑器 表单验证 插件的主要内容,如果未能解决你的问题,请参考以下文章

使用引导进度条以模态显示上传进度

C# WinForm自定义进度条

JQ加载进度条动画

等待模态显示时进度条的最佳实践

jq 上传下载进度条

为基于 flex 框的进度条设置动画时出现一个奇怪的故障