幾種 jQ 外掛程式類簡介

2022-08-26 10:33:14 字數 2507 閱讀 4119

模態框:開啟乙個彈框 不關閉它就不能做框外的操作 必須關閉或彈出另外的彈框

載入延遲loading + 進度條只要有請求 就處理一下監控ajax 全域性事件jquery:

$('#box').ajaxstart() //

開始 多個ajax共享乙個start

$('#box').ajaxsend()//

傳送$('#box').ajaxsuccess()//

成功$('#box').ajaxcomplete()//

完成$('#box').ajaxerror() //

完成後有錯誤

$('#box').ajaxstop()//

停止 多個ajax共享乙個stop

nprogress :

進度條引入 css js   

nprogress.start()啟動

nprogress.done() 關閉

一般配合.ajaxstart() / .ajaxstop() 使用

基於jquery的表單外掛程式 :

jquery-form

每個表單都要有name屬性!!!自動封裝表單資料

$('表單元素').ajaxsubmit(options)    

//形參和ajax一樣

//表單data不用新增 會自動提交

表單驗證jquery.validate 

//自定義屬性

data-required//

必填 禁止提交空

data-pattern="/^\d+$/" //

禁止提交數字以外的字串

data-describedby='for_name'data-description='name' //

匹配描述錯誤資訊 多個文字框可以共用

data-conditional = "f1 f2 f3 ">

提示錯誤資訊$(表單元素).vakidate(,

f2:function

(),f2:

function

() description:

}})

基於bootstrap的時間選擇器

bootstarp-datepicker

一.樣式控制

//

自定義屬性

// 日期格式

data-provide='datepicker'data-date-format="yy-mm-dd"data-date-language="zh-cn"//

語言有乙個檔案 locales 很多壓縮的js 中文為 zh-cn.js

二.js 控制

$('表單元素').datepicker()

location.search //

可獲取 url '?'後面的引數包括'?'

bootcdn 裡面的外掛程式上傳/

頭像/ 檔案

事件委託this 指向會改變為真正用到事件的物件

外掛程式:1. webuploader

html

<

div

id="uploader"

class

="wu-example"

>

<

div

id="thelist"

class

="uploader-list"

>

div>

<

div

class

="btns"

>

<

div

id="picker"

>選擇檔案

div>

<

button

id="ctlbtn"

class

="btn btn-default"

>開始上傳

button

>

div>

div>

js

1

//js

2var uploader =webuploader.create();

2./uploaderify

一,

二,

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()

jq 外掛程式寫法

1.一次宣告乙個函式 fn.函式名 function options fn.red function options var settings extend defaults,options this.css settings return this 2.一次宣告多個函式 fn.extend fn....

JQ 日期聯動外掛程式

jquery date selector plugin 日期聯動選擇外掛程式 demo calendar dateselector html 年 月 日 function fn.dateselector function options 初始化 this.options for var proper...

jq的外掛程式的寫法

兩種方式 方法一 extend extend src 將src合併到全域性物件中去 使用方式 var i add 3,2 方法二 fn.extend jquery.fn jquery.prototype 也就是jquery物件的原型 fn.extend src 方法將src合併到jquery的例項物...