سبد (0)

آموزش ساخت Menu

آموزش ساخت Menu در Kendo UI

در Kendo UI به راحتی می توانید منوهای چند سطحی بسازید.

متد ()kendoMenu

با استفاده از متد ()kendoMenu در Kendo UI، می توانید یک Menu بسازید.

پیکربندی (Configuration)

پارامترتوضیح
openOnClick

نحوه ی نمایش زیرمجموعه های منو را مشخص می کند. مثلاً با کلیک روی والد، زیرمجموعه ها نمایش داده شود یا با قرار گرفتن موس روی والد.
animation

با استفاده از این پارامتر می توانید، نحوه ی نمایش گزینه های منو را تغییر دهید.
orientation

عمودی (vertical) یا افقی (horizontal) بودن منو را مشخص می کند.
direction

جهت باز شدن زیرمنوها را مشخص می کند. ("top", "bottom", "left", "right")

ر مثال زیر، نحوه ساخت Menu با استفاده از متد ()kendoMenu و تنظیم پارامترهای مختلف آن نشان داده شده است. توجه داشته باشید که برای ساخت منو از نوع Kendo UI ابتدا باید ساختار HTML آنرا بوسیله لیست های نامرتب در HTML تعریف کنید:

مثال (آموزش ساخت Menu)

<!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 class="k-rtl">
                <ul id="menu">
                    <li>
                        First Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2
                                <ul>
                                    <li>Sub sub item 1</li>
                                    <li>Sub sub item 2</li>
                                    <li>Sub sub item 3</li>
                                    <li>Sub sub item 4</li>
                                </ul>
                            </li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Second Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Third Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Fourth Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Fifth Item
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                </ul>
            </div>

            <script>
                $(document).ready(function() {
                    $("#menu").kendoMenu({
                        //openOnClick:true,
                        //animation:{
                        //     hoverDelay:1000,
                        //     open:{effects:"fadeIn"}
                        //},
                        //orientation:"vertical"
                        //direction:"bottom"
                    });
                });
            </script>
        </div>   
            
</body>
</html>
اجرای مثال »

توجه: برای استفاده از ابزارهای Kendo UI در زبان های راست به چپ، علاوه براینکه باید فایل kendo.rtl.min.css را به صفحه لینک کنید، باید کلاس "k-rtl" را در تگ <div> مطابق مثال بالا تنظیم نمایید.

نکته: در مثال بالا، اگر می خواهید که منو، تمام عرض صفحه را نپوشاند باید در تگ <ul> عرض آنرا تعیین کنید. (width:400px)

رویدادهای منو در Kendo UI

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

مثال (آموزش ساخت Menu)

<script>
            $(document).ready(function() {
                function onOpen(e) {
                    kendoConsole.log("Opened: " + $(e.item).children(".k-link").text());
                }

                function onClose(e) {
                    kendoConsole.log("Closed: " + $(e.item).children(".k-link").text());
                }

                function onSelect(e) {
                    kendoConsole.log("Selected: " + $(e.item).children(".k-link").text());
                }

                function onActivate(e) {
                    kendoConsole.log("Activated: " + $(e.item).children(".k-link").text());
                }

                function onDeactivate(e) {
                    kendoConsole.log("Deactivated: " + $(e.item).children(".k-link").text());
                }

                $("#menu").kendoMenu({
                    select: onSelect,
                    open: onOpen,
                    close: onClose,
                    activate: onActivate,
                    deactivate: onDeactivate
                });
            });
        </script>
اجرای مثال »

اضافه کردن آیتم به منو، بصورت داینامیک

در مثال زیر، زمانی که کاربر روی دکمه "insertitem" کلیک می کند، با استفاده از متد ()insertAfter یک آیتم به انتهای منو اضافه می شود:

<script>
          $(document).ready(function() {
                    $("#menu").kendoMenu();
                    $("#insertitem").click(function () {
                        var menu=$("#menu").kendoMenu().data("kendoMenu");
                        menu.insertAfter(
                            {text:"beyamooz.com",
                             items:[
                                 {text:"JavaScript"},
                                 {text:"HTML"},
                                 {text:"CSS"},
                                 {text:"jQuery"}
                             ]
                            },
                            menu.element.children("li:last")
                        );                        
                    });
           });
</script>
نوشته شده توسط امیر پهلوان صادق
بازدید: 15442

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه