آموزش ساخت 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>

اجرای مثال »

: نوشته شده توسط امیر پهلوان صادق; بازدید: 10597

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی