如果想要「將指定的元素集合，批次間隔固定時間去做一些事情」那麼可以用這支非常簡單的 plugin。
前往 Github 下載 或是使用 npm 下載
npm i jquery.period.js
載入方式
import 'jquery.period.js'
這個範例是讓所有的 .item 間距 200 毫秒，批次動畫的增加高度。
$(".item").period({
delayTimes: 200,
before: function (){
// ...
},
todo: function(index){
// ...
},
after: function (){
// ...
}
})
我們看實際範例：
jQuery 使用 $(selector).scrollTop() 可以取得『捲軸頂部，距離視窗頂部的距離』，
那麼反過來，
如過要使用『捲軸底部，距離視窗底部的距離』， jQuery 沒有這個方法，但我們可以這麼寫
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
使用 Web APIs 的 FileReader (檔案讀取器) 來達到。關於 FileReader 的用法，可參考說明。
<form>
<input type='file' class="upl">
<div>
<img class="preview" style="max-width: 150px; max-height: 150px;">
<div class="size"></div>
</div>
</form>
$(function (){
function format_float(num, pos)
{
var size = Math.pow(10, pos);
return Math.round(num * size) / size;
}
function preview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.preview').attr('src', e.target.result);
var KB = format_float(e.total / 1024, 2);
$('.size').text("檔案大小：" + KB + " KB");
}
reader.readAsDataURL(input.files[0]);
}
}
$("body").on("change", ".upl", function (){
preview(this);
})
})
當 input.upl[type=file] 發生改變的時候會觸發我們自訂的 preview 方法。
$("body").on("change", ".upl", function (){
preview(this);
})
我們看 preview 方法怎麼寫
/**
* 預覽圖
* @param input 輸入 input[type=file] 的 this
*/
function preview(input) {
// 若有選取檔案
if (input.files && input.files[0]) {
// 建立一個物件，使用 Web APIs 的檔案讀取器(FileReader 物件) 來讀取使用者選取電腦中的檔案
var reader = new FileReader();
// 事先定義好，當讀取成功後會觸發的事情
reader.onload = function (e) {
console.log(e);
// 這裡看到的 e.target.result 物件，是使用者的檔案被 FileReader 轉換成 base64 的字串格式，
// 在這裡我們選取圖檔，所以轉換出來的，會是如 『data:image/jpeg;base64,.....』這樣的字串樣式。
// 我們用它當作圖片路徑就對了。
$('.preview').attr('src', e.target.result);
// 檔案大小，把 Bytes 轉換為 KB
var KB = format_float(e.total / 1024, 2);
$('.size').text("檔案大小：" + KB + " KB");
}
// 因為上面定義好讀取成功的事情，所以這裡可以放心讀取檔案
reader.readAsDataURL(input.files[0]);
}
}
其中要顯示的檔案大小，會須要做運算的轉換，我們額外包了一個 format_float 的方法
/**
* 格式化
* @param num 要轉換的數字
* @param pos 指定小數第幾位做四捨五入
*/
function format_float(num, pos)
{
var size = Math.pow(10, pos);
return Math.round(num * size) / size;
}
如果須要多圖預覽，請參考進階的 下一篇文章。
這邊的範例比較簡單，只能做一張圖片的預覽。
參考http://stackoverflow.com/questions/7952181/jquery-validation-plugin-validating-hidden-inputs-and-not-visible
使用這個方法
$(“#form1”).validate({
ignore: “”,
rules: {
something: {
number:true,
min:1,
required:true
}
}
});
就能將必填欄位，但是透過type=hidden的時候仍能觸發必填提醒。
<script> //取得網址的hash，例如取得http://XXX.tw/#type var hash = window.location.hash.substring(1); alert(hash); //輸出type </script>