前端常用插件使用文檔 以及demo

一.----------------------------------------------------------jQuery.validate 表單驗證

二.------------------------------jqZoom[jqZoom.pack]

三.------------------------------json2.js json和字符串的轉換

第一章：jquery.validate

A.相關文檔：

網易[入海數沙]：http://banu.blog.163.com/blog/static/23146482009111941249376/

腳本：http://www.jb51.net/article/24078.htm

博客園：http://www.cnblogs.com/si-shaohua/p/3780321.html

B.使用教程

默認校驗規則
(1)required:true               必輸字段
(2)remote:"check.php"          使用ajax方法調用check.php驗證輸入值
(3)email:true                  必須輸入正確格式的電子郵件
(4)url:true                    必須輸入正確格式的網址
(5)date:true                   必須輸入正確格式的日期
(6)dateISO:true                必須輸入正確格式的日期(ISO)，好比：2009-06-23。1998/01/22 僅僅驗證格式，不驗證有效性
(7)number:true                 必須輸入合法的數字(負數，小數)
(8)digits:true                 必須輸入整數
(9)creditcard:                 必須輸入合法的信用卡號
(10)equalTo:"#field"           輸入值必須和#field一樣
(11)accept:                    輸入擁有合法後綴名的字符串（上傳文件的後綴）
(12)maxlength:5                輸入長度最可能是5的字符串(漢字算一個字符)
(13)minlength:10               輸入長度最小是10的字符串(漢字算一個字符)
(14)rangelength:[5,10]         輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)
(15)range:[5,10]               輸入值必須介於 5 和 10 之間
(16)max:5                      輸入值不能大於5
(17)min:10                     輸入值不能小於10

名稱	返回類型	描寫敘述
validate(options)	返回:Validator	驗證所選的FORM
valid()	返回:Boolean	檢查是否驗證經過
rules()	返回:Options	返回元素的驗證規則
rules("add",rules)	返回:Options	添加驗證規則
rules("remove",rules)	返回:Options	刪除驗證規則
removeAttrs(attributes)	返回:Options	刪除特殊屬性並且返回他們
Custom selectors
:blank	返回:Validator	沒有值的篩選器
:filled	返回:Array <Element >	有值的篩選器
:unchecked	返回:Array <Element >	沒選擇的元素的篩選器
Utilities
jQuery.format (template,argument ,argumentN...)	返回:String	用參數取代模板中的 {n}

validate ()的可選項：
debug:進行調試模式（表單不提交）:	$(".selector").validate ({   debug:true })
把調試設置爲默認:	$.validator.setDefaults({   debug:true })
submitHandler: 經過驗證後執行的函數,裏面要加上表單提交的函數,不然表單不會提交	$(".selector").validate({   submitHandler:function(form) { $(form).ajaxSubmit();   } })
ignore: 對某些元素不進行驗證	$("#myform").validate({   ignore:".ignore" })
rules: 本身定義規則,key:value的形式,key是要驗證的元素,value可以是字符串或對象	$(".selector").validate({   rules:{     name:"required",     email:{       required:true,       email:true     }   } })
messages: 本身定義的提示信息key:value的形式key是要驗證的元素,值是字符串或函數	$(".selector").validate({   rules:{     name:"required",     email:{       required:true,       email:true     }   },   messages:{     name:"Name不能爲空",     email:{       required:"E-mail不能爲空",       email:"E-mail地址不對"     }   } })
groups: 對一組元素的驗證,用一個錯誤提示,用error Placement控制把出錯信息放在哪裏	$("#myform").validate({  groups:{    username:"fname lname"  },  errorPlacement:function(error,element) {     if (element.attr("name") == "fname" || element.attr("name") == "lname")       error.insertAfter("#lastname");     else       error.insertAfter(element);   },   debug:true })
Onubmit Boolean默認:true 是否提交時驗證	$(".selector").validate({   onsubmit:false })
onfocusout Boolean默認:true  是否在獲取焦點時驗證	$(".selector").validate({   onfocusout:false })
onkeyup Boolean默認:true  是否在敲擊鍵盤時驗證	$(".selector").validate({   onkeyup:false })
onclick Boolean默認:true 是否在鼠標點擊時驗證（通常驗證checkbox,radiobox）	$(".selector").validate({   onclick:false })
focusInvalid Boolean默認:true 提交表單後,未經過驗證的表單(第一個或提交以前得到焦點的未經過驗證的表單)會得到焦點	$(".selector").validate({   focusInvalid:false })
focusCleanup Boolean默認:false 當未經過驗證的元素得到焦點時,並移除錯誤提示（避免和 focusInvalid.一塊兒使用）	$(".selector").validate({   focusCleanup:true })
errorClass String默認:"error" 指定錯誤提示的css類名,可以本身定義錯誤提示的樣式	$(".selector").validate({   errorClass:"invalid" })
errorElement String默認:"label" 使用什麼標籤標記錯誤	$(".selector").validate   errorElement:"em" })
wrapper String 使用什麼標籤再把上邊的errorELement包起來	$(".selector").validate({   wrapper:"li" })
errorLabelContainer Selector 把錯誤信息統一放在一個容器裏面	$("#myform").validate({   errorLabelContainer:"#messageBox",   wrapper:"li",   submitHandler:function() { alert("Submitted!") } })
showErrors: 跟一個函數,可以顯示總共同擁有多少個未經過驗證的元素	$(".selector").validate({   showErrors:function(errorMap,errorList) {        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");        this.defaultShowErrors();   } })
errorPlacement: 跟一個函數,可以本身定義錯誤放到哪裏	$("#myform").validate({  rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td"));   },   debug:true   })
success: 要驗證的元素經過驗證後的動做,假設跟一個字符串,會當作一個css類,也可跟一個函數	$("#myform").validate({        success:"valid",        submitHandler:function() { alert("Submitted!") } })
highlight: 可以給未經過驗證的元素加效果,閃爍等

---

2.jqZoom[jqZoom.pack]

A.相關文檔：

博客園：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819887.html

B.相關實例：

懶人圖庫：http://www.lanrentuku.com/js/tupian-1170.html

jb：http://www.jb51.net/jiaoben/18006.html    ----------------[不肯定]

C.資源下載 ---------------暫缺

D:使用教程

一、head區域引入

<link rel="stylesheet" href="css/jqzoom.css" type="text/css">

二、 引入js庫

<script src="js/jquery.min.js" type="text/javascript"></script>

<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

3.html

<div id="content" style="margin-right:auto;margin-left:auto;width:600px;">
<a href="images/shoe2_big.jpg" class="jqzoom" style="" title="圖片標題">
<img src="images/shoe2_small.jpg"  title="圖片標題" style="border: 1px solid #666;">
</a> 
</div>

四、調用jqzoom函數庫

<script type="text/javascript">

$(function() {

var options =

{

zoomWidth: 250, //放大鏡的寬度

zoomHeight: 250,//放大鏡的高度

zoomType:'reverse'

};

$(".jqzoom").jqzoom(options);

});

</script>

配置參數：

zoomType。默認值：’standard’。還有一個值是’reverse’，是否將原圖用半透明圖層遮蓋。

zoomWidth，默認值：200。放大窗體的寬度。

zoomHeight。默認值：200，放大窗體的高度。

xOffset。默認值：10，放大窗體相對於原圖的x軸偏移值，可以爲負。

yOffset，默認值：0。放大窗體相對於原圖的y軸偏移值，可以爲負。

position，默認值：’right’，放大窗體的位置，值還可以是:’right’ ,’left’ ,’top’ ,’bottom’。

lens，默認值：true，若爲false。則不在原圖上顯示鏡頭。

imageOpacity，默認值：0.2，當zoomType的值爲’reverse’時。這個參數用於指定遮罩的透明度。

title。默認值：true，在放大窗體中顯示標題。值可以爲a標記的title值，若無。則爲原圖的title值。

showEffect，默認值：’show’，顯示放大窗體時的效果。值可以爲: ‘show’ ,’fadein’。

hideEffect，默認值：’hide’，隱藏放大窗體時的效果: ‘hide’ ,’fadeout’。

fadeinSpeed，默認值：’fast’，放大窗體的漸顯速度(選項: ‘fast’,'slow’,'medium’)。

fadeoutSpeed，默認值：’slow’，放大窗體的漸隱速度(選項: ‘fast’,'slow’,'medium’)。

showPreload，默認值：true，是否顯示載入提示Loading zoom(選項: ‘true’,'false’)。

preloadText，默認值：’Loading zoom’，本身定義載入提示文本。

preloadPosition。默認值：’center’。載入提示的位置，值也可以爲’bycss’，以經過css指定位置。

******************我是切割線~~*********************

第三章. json2.js json格式和字符串的切換

相關知識：

eval(string) 字符串轉json,

JSON.parse(string)字符串轉文本，

JSON.stringify(json)   json轉字符串

     爲傳參

JSON.parse()        JSON.strigify()      在IE瀏覽器低版本號IE6 IE7不支持這兩個方法。因此需要引進來json2.js來作兼容

相關文檔：

csdn：http://www.cnblogs.com/william-lin/archive/2012/08/10/2632234.html

下載json2.js：https://github.com/douglascrockford/JSON-js/blob/master/json2.js

//直接聲明json數據結構
var myJSONObject = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]
};
//聲明字符串,可對照一下json文本與咱們正常文本的差異
var normalstring='[{persons:[{name:"jordan",sex:"m",age:"40"}, {name:"bryant",sex:"m",age:"28"}, {name:"McGrady",sex:"m",age:"27"} ]}]';
var jsontext='[{"persons":[{"name":"jordan","sex":"m","age":"40"}, {"name":"bryant","sex":"m","age":"28"}, {"name":"McGrady","sex":"m","age":"27"} ]}]';

//調用eval函數轉換爲json對象，
var myE = eval(normalstring);
document.writeln(myE '<br><br>');
//將json對象轉換爲字符串
var text = JSON.stringify(myE);
//對照轉換後的json文本與聲明的文本差異
document.writeln('轉換後的json文本：' text '<br><br>聲明的json格式文本' jsontext '<br><br>聲明的普通格式文本' normalstring '<br><br>');

//當安全比較重要的時候使用JSON解析就好一些。JSON解析僅僅會識別JSON文本並且它更安全,如下調用json的parse函數對文本數據轉換生成json數據結構
var myData = JSON.parse(jsontext); document.writeln(myData '<br><br>');