jQuery – plugin – period – 批次讓元素間隔時間執行

jquery.period.js

如果想要「將指定的元素集合,批次間隔固定時間去做一些事情」那麼可以用這支非常簡單的 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- 捲軸底部距離視窗底部的高度 (scrollBottom)

jQuery 使用 $(selector).scrollTop() 可以取得『捲軸頂部,距離視窗頂部的距離』,

那麼反過來,

如過要使用『捲軸底部,距離視窗底部的距離』, jQuery 沒有這個方法,但我們可以這麼寫

var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

 

jQuery – JavaScript – 教你如何製作圖片上傳前的預覽圖

* 如果您想要用套件可以來這篇 (2017/03/07更新)

 

目標

  1. 讓使用者在上傳圖片前先顯示在頁面,用來確定是不是要上傳的圖片。
  2. 透過前端技術完成,不使用網路傳輸到伺服器做縮圖後回傳到前端。

解決方法

使用 Web APIs 的 FileReader (檔案讀取器) 來達到。關於 FileReader 的用法,可參考說明

線上測試

HTML

<form>
    <input type='file' class="upl">
    <div>
        <img class="preview" style="max-width: 150px; max-height: 150px;">
        <div class="size"></div>
    </div>
</form>

JavaScript/jQuery

$(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;
}

如果須要多圖預覽,請參考進階的 下一篇文章

這邊的範例比較簡單,只能做一張圖片的預覽。

參考

jQuery – validate plugin 針對input = hidden的解決辦法

參考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的時候仍能觸發必填提醒。