کار کردن با منو در kend ui با استفاده از Mvvm Pattern

شنبه 9 آبان 1394

در این مقاله شما یاد خواهید گرفت که با منو د رkendo ui با استفاده از mvvm Pattern چگونه کار کنید. در اینجا ما میتوانیم در 2 مرحله منو را به سادگی ایجاد کنیم

کار کردن با منو در kend ui با استفاده از Mvvm Pattern

ما میتوانیم منو را  در kendo Ui با استفاده از Mvvm Pattern در 2 مرحله اجرا کنیم

مرحله اول : یک صفحه Html ایجاد کنید و نام ان را kendomenu.html در نظر بگیرید و کد های مربوطه را در ان قرار دهید

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="utf-8">  
    <title>Untitled</title>  
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">  
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">  
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">  
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">  
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>  
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>  
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>  
</head>  
  
<body>  
    <div id="example" class="container">  
        <div class="row">  
            <ul data-role="menu" style="width: 50%;">  
                <li> Home  
                    <ul>  
                        <li> Furniture  
                            <ul>  
                                <!-- moving the UL to the next line will cause an IE7 problem -->  
                                <li>Sofas</li>  
                                <li>Beds</li>  
                            </ul>  
                        </li>  
                    </ul>  
                </li>  
                <li> Electronics  
                    <ul>  
                        <li> Mobiles </li>  
                        <li> Laptops </li>  
                    </ul>  
                </li>  
            </ul>  
        </div>  
    </div>  
</body>  
  
</html>  

خصوصیت Data-Role برای اجرای منو استفاده شده است

جاوا اسکریپت با Mvvm Model

var viewModel = kendo.observable({  
       isVisible: true,  
         
   });  
   kendo.bind($("#example"), viewModel); 

از کد بالا می توانیم Kendo Menu را فعال کنیم

حال میتوانید نتیجه را در مرورگر ببینید

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان
  • Jquery
  • 2k بازدید
  • 4 تشکر

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید