項目分享八:基於按鈕點擊事件的彈窗


基於按鈕點擊事件的彈窗,是各種軟件中一項最為基本的功能。如下圖所示,點擊取消訂單按鈕,將會彈出一個窗口,讓用戶確認是否要取消訂單。

ChiTu Store 封裝了兩種類型的彈窗,confirm 和 toast,前者是確認,后者是在點擊事件的函數,執行成功后彈出一個提示窗口,並關閉。

一、窗口的 HTML 代碼

我們來看看 ChiTu Store 是如何封裝的。 

confirm 窗口:

<a data-bind="tap:$parent.cancelOrder, click:$parent.cancelOrder, visible:Status() == 'WaitingForPayment'" 
   data-dialog='confirm:"你取消該定單嗎?"' href="javascript:" 
   class="btn btn-block btn-default">取消訂單</a>

toast 窗口:

<button name="btn_add" class="btn btn-primary pull-right"
        data-bind="tap: addToShoppingCart,click: addToShoppingCart, enable: ko.unwrap(product.Stock) > 0, text:ko.unwrap(product.Stock) > 0 ? '加入購物車' : '已經售磬'"
        data-dialog="toast:'成功添加到購物車'">
        加入購物車
    </button>

 

二、重寫 knockout click 事件

和上篇文章所說的一樣,都是基於重寫 knockout 的 click 事件。我們在 translateClickAccessor 函數中,可以看到下面的代碼:

confirm 窗口的實現,簡單解釋一下代碼,首獲取 data-dialog 屬性的字符,並把 data-dialog 屬性的字符變成一個對象。因為 confirm 是彈窗,點擊了“確認”按鈕后,再執行的。這是一個串行操作,所以看到把原來的 deferred 變得一個串行操作,點操了 ok 按鈕(result.reslove),就執行,cancel 取消(result.reject)。 

var config = getConfig(element, 'data-dialog');
if (config.confirm) {
    var content = config.confirm;
    deferred = deferred.pipe(function () {
        var result = $.Deferred();
        var html = ComfirmDialogHtml;
        var node = $(html).appendTo(document.body).modal()[0];

        var model = {
            text: content,
            ok: function () {
                $(node).modal('hide');
                result.resolve();
            },
            cancel: function () {
                result.reject();
            }
        }

        ko.applyBindings(model, node);
        return result;
    });
}

toast 窗口的實現,由於 toast 窗口,是在執行完畢才執行的,所以在 result.done 函數回調。

result.done(function () {
    if (config.toast) {
        var content = config.toast;
        var html = ToastDialogHtml;
        var node = $(html).appendTo(document.body).modal()[0];

        var model = {
            text: content
        }

        window.setTimeout(function () {
            $(node).modal('hide');
            $(node).remove();
        }, 1000);

        ko.applyBindings(model, node);
    }

});

 

相關的代碼,在 github 的 ChiTuStore 項目中可以找到。有任何疑問可以給我留言。

 

項目分享七:客戶端防止表單重復提交

項目分享六:圖片的延遲加載

項目分享五:H5圖片壓縮與上傳 

項目分享四:購物車頁面的更新 

項目分享三:頁面之間的傳值

項目分享二:APP 小紅點中數字的處理

項目分享一:在項目中使用 IScroll 所碰到的那些坑


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM