السلام علیک یا اباعبداللّه الحسین

سبد خرید (0)

آموزش ساخت Window

آموزش ساخت پنجره (Window) در Kendo UI


متد ()kendoWindow

با استفاده از متد ()kendoWindow در Kendo UI، می توانید یک پنجره (Window) بسازید.

پیکربندی (Configuration)

نامتوضیحات
actions ("default: "Close) دکمه هایی را برای تعامل بیشتر با پنجره نمایش می دهد. ("Close", "Refresh", "Minimize", "Maximize")
animation با استفاده از این خصوصیت می توانید، نحوه ی باز و بسته شدن پنجره را تغییر دهید. اگر آنرا با مقدار false تنظیم کنید، متحرک سازی لغو خواهد شد.
appendTo (default: document.body) عنصری از پنجره که محتوای مورد نظر شما در آن افزوده (append) می شود.
content یک URL یا گزینه هایی درخواستی که محتوای پنجره از طریق آن بارگذاری می شود. برای URLهای خارجی، یک عنصر iframe بصورت اتوماتیک ایجاد می شود.
contentObject یک URL یا گزینه هایی درخواستی که محتوای پنجره از طریق آن بارگذاری می شود. برای URLهای خارجی، یک عنصر iframe بصورت اتوماتیک ایجاد می شود.
contentString یک URL یا گزینه هایی درخواستی که محتوای پنجره از طریق آن بارگذاری می شود. برای URLهای خارجی، یک عنصر iframe بصورت اتوماتیک ایجاد می شود.
draggable (default: true) قابلیت حرکت دادن پنجره وجود داشته باشد یا خیر.
iframe بطور صریح بیان می کند که آیا محتوی درون iframe باید ایجاد شود.
maxHeight (default: Infinity) حداکثر ارتفاع پنجره به پیکسل.
maxWidth (default: Infinity) حداکثر عرض پنجره به پیکسل.
minHeight (default: 50) حداکثر ارتفاع پنجره به پیکسل.
minWidth (default: 50) حداقل ارتفاع پنجره به پیکسل.
modal (default: false) مشخص می کند که آیا پنجره بصورتی روی صفحه اصلی نمایش داده شود که صفحه زیری کمی تار شود. (modal overlay)
resizable (default: true) قابلیت تغییر اندازه پنجره.
title یک متن را در نوار بالایی پنجره نمایش می دهد.
visible (default: true) مشخص می کند که پنجره از ابتدا قابل رویت باشد یا خیر.

در مثال زیر، نحوه ساخت پنجره (Window)، با استفاده از متد ()kendoWindow و تنظیم پارامترهای مختلف آن نشان داده شده است:

مثال (RTL)

 <!DOCTYPE html>
<html>
<head>
    <title>RTL support</title>
    <meta charset="utf-8">
    <link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="/../../../js/jquery.min.js"></script>
    <script src="/../../../js/kendo.web.min.js"></script>
    <script src="/../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
        <div id="example" class="k-content">
            <div id="window" class="k-rtl">
                <div class="armchair"><img src="/../../content/web/window/armchair-402.png" alt="Artek Alvar Aalto - Armchair 402" /> Artek Alvar Aalto - Armchair 402</div>
                <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>

                <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

                <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>

                <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
            </div>

            <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>

            <script>
                $(document).ready(function() {
                    var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function() {
                                    window.data("kendoWindow").open();
                                    undo.hide();
                                });

                    var onClose = function() {
                        undo.show();
                    }

                    if (!window.data("kendoWindow")) {
                        window.kendoWindow({
                            width: "600px",
                            title: "About Alvar Aalto",
                            close: onClose
                        });
                    }
                });
            </script>
        </div>                
</body>
</html>
اجرای مثال »

رویدادهای Window در Kendo UI

نامتوضیحات
activate زمانی که متحرک سازی پنجره برای نمایش آن به پایان رسید، اتفاق می افتد.
close زمانی که پنجره توسط کاربر یا اجرای متد ()close بسته شود، اتفاق می افتد.
deactivate زمانی که متحرک سازی پنجره برای بسته شده آن به پایان رسید، اتفاق می افتد.
dragend زمانی که پنجره حرکت داده شده توسط کاربر، رها شود، اتفاق می افتد.
dragstart زمانی که پنجره توسط کاربر شروع به حرکت داده می شود، اتفاق می افتد.
error زمانی که یک درخواست آجاکسی با error مواجه می شود، اتفاق می افتد.
open زمانی که پنجره توسط کاربر یا اجرای متد ()open باز شود، اتفاق می افتد.
refresh زمانی که محتوای پنجره از طریق AJAX مجدد بارگذاری شود، اتفاق می افتد.
resize زمانی که اندازه پنجره توسط کاربر تغییر کند، اتفاق می افتد.

در مثال زیر، هر تغییری که در پنجره (Window) صورت گیرد، یک پیغام چاپ می شود:

مثال (Event)

<div id="window"></div>

<span id="undo" style="display:none" class="k-group">Click here to open the window.</span>

<script>
    function onOpen(e) {
        kendoConsole.log("event :: open");
    }

    function onClose(e) {
        $("#undo").show();
        kendoConsole.log("event :: close");
    }

    function onActivate(e) {
        kendoConsole.log("event :: activate");
    }

    function onDeactivate(e) {
        kendoConsole.log("event :: deactivate");
    }

    function onRefresh(e) {
        kendoConsole.log("event :: refresh");
    }

    function onResize(e) {
        kendoConsole.log("event :: resize");
    }

    function onDragStart(e) {
        kendoConsole.log("event :: dragstart");
    }

    function onDragEnd(e) {
        kendoConsole.log("event :: dragend");
    }

    $("#undo")
        .bind("click", function() {
            $("#window").data("kendoWindow").open();
            $("#undo").hide();
        });

    $(document).ready(function() {
        if (!$("#window").data("kendoWindow")) {
            $("#window").kendoWindow({
                width: "630px",
                height: "315px",
                title: "Rams's Ten Principles of Good Design",
                actions: ["Refresh", "Close"],
                content: "../../content/web/window/ajax/ajaxContent1.html",
                visible: false,
                open: onOpen,
                activate: onActivate,
                close: onClose,
                deactivate: onDeactivate,

                refresh: onRefresh,

                resize: onResize,
                dragstart: onDragStart,
                dragend: onDragEnd
            }).data("kendoWindow").open();
        }
    });
</script>
اجرای مثال »