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

سبد خرید (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>

دیدگاه‌ها  

+1 # مینا 1393-11-15 21:44
سلام
من با mvc کا میکنم یه مشکلی داشتم من مثال متد ()kendoMenu را در برنامه مینویسم در قسمت direction:"bott om" ارور '{' Exepctedمیدهد در صورتی که من خود برنامه را از اینجا کپی کردم و menu ایجاد نمیشه نمیدونم مشکل چی هست
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-11-16 09:56
سلام، متأسفانه به این صورت امکان راهنمایی وجود ندارد و باید کدتون رو ارسال کنید.([email protected])
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # نرگس 1393-03-12 13:07
وای خیلی معرکه است
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن