文章出處

對于fancybox我們已經耳熟能詳了，一般用來到表單的彈框，提示彈框等，而今天，我們將分頁列表也使用fancybox來實現一下，這東西聽起來簡單，但做起來還真不是那么回事，有事細節需要我們注意的，首先的知識點，fancybox在彈出后，顯示為靜態ＨＴＭＬ代碼，所以，你希望改變它上面的內容不是那么容易的，因為些時，它可能還不屬于頁面，針對分頁列表的問題，fancybox提出了iframe功能，它允許你把一個新頁面承載到fancybox彈框上，看一下美麗的截圖

下面來看一下代碼，代碼中有控制彈框尺寸的，因具體情況自己去調整

　　　　　　 $.fancybox.open({
                href: '/Home/PartialList',
                type: 'iframe',
                padding: 5,
                scrolling: 'no',
                fitToView: true,
                width: 610,
                height: 300,
                autoSize: false,
                closeClick: false
            });

下面再看一下PartialList頁面的回調代碼，主要在iframe頁面選中項目后，將項目的信息返回到父窗口中

 function addToFun() {
        var idArr = "";
        $("table>tbody").find(":checked").each(function (i, o) {
            idArr += $(o).val() + ",";
        });

        $("#resultList", window.parent.document).append("選中的ＩＤ列表：" + idArr);
        window.parent.jQuery.fancybox.close();
    }

下面給出一個普通版的實現，不是Iframe的，即在原頁面上實現的彈框，將內容追加到當前ＨＴＭＬ上

　　　　　　$.fancybox($("#step3").html(), {
                padding: 5,
                scrolling: 'visible',
                modal: true,
                fitToView: true,
                width: 610,
                height: 300,
                autoSize: false,
                afterShow: function () {
                    $.ajax2({
                        url: '/Home/PartialList',
                        success: function (data) {
                            $("#f5list").html(data);
                        }
                    }, "f5list");
                }
            });

對應的ＨＴＭＬ代碼如下

<script type="text/html" id="step3">
    <div id="f5list"></div>
</script>

好了，到目前為止我們的分頁彈框實例就介紹完了，如果本文章對您有所幫助，請您點一下推薦吧，哈哈


文章列表



Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()