آموزش فریم ورک Kendo UI

چاپ

آموزش Kendo UI (کندو یو آی)-معرفی Kendo UI

در این آموزش، قصد داریم در مورد فریم ورک Kendo UI (کندو یو آی) توضیحاتی را ارائه دهیم.

Kendo UI (کندو یو آی) از سری کامپوننت های شرکت Telerik هست و بر پایه HTML5 و jQuery و CSS3 می باشد.

برای اینکه با قدرت Kendo UI (کندو یو آی) آشنا شوید، بهتر است همراه با ما، مثال های ارائه شده در این مجوعه را مرور فرمایید.


شروع کار با Kendo UI

برای استفاده از امکانات Kendo UI (کندو یو آی) باید چند فایل را به صفحه لینک کنید:

فایل های CSS

در فایل های CSS زیر، تمام کلاس هایی که برای طراحی ظاهر ابزارهای Kendo (کندو) نیاز است، تعریف شده است:

  1. kendo.common.min.css
  2. kendo.default.min.css
  3. kendo.rtl.min.css

فایل ها JavaScript

باید کتابخانه jQuery و همچنین پلاگین اصلی kendo (کندو) که شامل کلیه کدهای مورد نیاز برای ساخت ابزارها است را به صفحه لینک کنیم:

  1. jquery.min.js
  2. kendo.web.min.js

توجه: متأسفانه بدلیل تحریم ایران، دسترسی به سایت اصلی Telerik، امکان پذیر نمی باشد. در انتهای این آموزش، فایل های بالا قرار داده شده است.

در مثال زیر، فایل های مورد نیاز به صفحه لینک شده است:

 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/style/kendo.common.min.css" type="text/css" />
    <link rel="stylesheet" href="/style/kendo.default.min.css" type="text/css" />
    <link rel="stylesheet" href="/style/kendo.rtl.min.css" type="text/css" />
 
    <script src="/js/jquery.min.js"></script>
    <script src="/js/kendo.web.min.js"></script>  
    <script>
        $(document).ready(function(){
          //دستـــــــــــــــــــورات
        });
    </script>
</head>
<body class="k-rtl">
   
</body>
</html>

توضیح:

  1. همان طور که گفته شد در Kendo UI از HTML5 استفاده می شود، بنابراین باید <!DOCTYPE html> را در ابتدای صفحه اعلان نمایید.
  2. برای مدیریت بهتر فایل های پروژه، فایل های CSS را داخل پوشه style و فایل های jQuery و Kendo UI را در پوشه js قرار داده ایم.
  3. همانطور که می دانید، تمام متدهای jQuery داخل رویداد ready آورده می شوند. این امر باعت می شود تا کدهای jQuery بعد ازبارگذاری کامل صفحه، اجرا شوند. همچنین با این تکنیک، قادر خواهید بود کدهای JavaScript را در قسمت <head> صفحه قرار دهید.
  4. برای استفاده از ابزارهای Kendo UI در زبان های راست به چپ، علاوه براینکه باید فایل kendo.rtl.min.css را به صفحه لینک کنید، باید کلاس "k-rtl" را در تگ <body> تنظیم نمایید.

دانلود فایل های Kendo UI

پاسورد: www.beyamooz.com

حجم: 907 کیلو بایت