آموزش Kendo بخش اول

سلام ، با آموزش استفاده از Kendo در پروژه ASP.NET MVC در خدمت شما هستیم .لوگوی Kendo

آموزش Kendo بخش اول :

 

پیش نیاز های این آموزش عبارتند از :

نکته : برای دانلود Kendo می توانید به وب سایت P30download مراجعه کنید .

 

معرفی Kendo UI :

Kendo برای افزایش زیبایی و کارایی صفحات وب بکار می رود که یکی از کامپوننت های شرکت تلریک (Telerik) است و حاوی تمام آن چیزیست که برنامه نویسان و طراحان برای طراحی/ساخت وب سایت و اپلیکیشن های موبایل با HTML5 و جاوا اسکریپت ، نیاز دارند . در Kendo 2015 می توان به مواردی مانند : ادغام  AngularJS، پشتیبانی از فریم ورک Bootstrap ، کنترل های موبایل ، راه حل داده‌های آفلاین ، حاوی کامپوننت های  ASP.NET MVC ، مدولار بودن ، پشتیبانی از قابلیت های ریسپانسیو و جامعیت در نهایت سبک و سریع بودن اشاره نمود .

نصب و راه اندازی Kendo :

پس از اینکه Kendo را از لینک بالا دریافت نمودید ، آنرا از حالت zip خارج کرده و نصب کنید. فایلهای مربوط به kendo بطور پیش فرض در مسیر زیر نصب می شوند :

C:\Program Files\Telerik

ایجاد اولین دمو توسط kendo :

برای مشاهده اولین کامپوننت کندو در یک صفحه html ، نیاز به سه فایل از مسیر فوق دارید . به زیر پوشه js بروید و فایل kendo.all.min.js را جستجو و در دسکتاپ کپی کنید .

سپس به فولدر css رفته و دو فایل زیر را در دسکتاپ سیستم خود کپی کنید :

kendo.common.min.css    و     kendo.default.min.css

ما برای ایجاد اولین دمو ، علاوه بر سه فایل فوق ، نیاز به یک فایل دیگر داریم و آن چیزی نیست جز کتابخانه jquery ! پس به وب سایت jquery رفته و آخرین نسخه آنرا دانلود کرده و به فایلهای فوق اضافه کنید .

حال یک صفحه  html بسازید و ۴ فایل مذکور را به آن رفرنس دهید :

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>HTML + Kendo UI | Mohtava.info</title>

    <link href="css/kendo.common.min.css" rel="stylesheet"/>

    <link href="css/kendo.default.min.css" rel="stylesheet" />

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/kendo.all.min.js"></script>

</head>

<body>

</body>

</html>

نکته : دقت داشته باشید که کتابخانه jquery بصورت فشرده شده باشد (min) و همچنین در بالای بقیه فایلهای javascript به آن رفرنس دهید .

اکنون کد زیر را در بدنه صفحه می نویسیم :

    <span>

        Date of Birth : <input id="dob"/>

    </span>

    <script>

        $("#dob").kendoDatePicker();

    </script>

توضیح دستورات بالا : ابتدا یک input قرار دادیک که id=bob دارد . سپس در بخش script با علامت # آن id را بهمراه تابع kendoDatePicker تعریف کردیم . با اینکار ، هنگام اجرای صفحه ، برای نوشتن تاریخ ، یک باکس زیبا و شکیل باز می شود (تصویر زیر) :


kendo DatePicker

روش دوم برای دستیابی به خروجی تصویر بالا ، تعریف دستورات بصورت زیر است :

Way 2 of DatePicker : <input id="dob2" data-role="datepicker" />

    <script>

        kendo.init($("#dob2"));

    </script>

خروجی عینا مانند قبل است ، هر چند که syntax کدها با هم متفاوت است .

همچنین می توان علاوه بر data-role فرمت داده ورودی را تعیین کنیم :

<input id="dob2" data-role="datepicker" data-Format="yyyy/MM/dd"/>

خروجی بصورت زیر خواهد شد :


Datepicker Format

مشاهده میکنید که تاریخ اولی بصورت پیش فرض (MM/dd/yyy) و دومی که خودمان فرمتش را تعریف کردیم بصورت (yyyy/MM/dd) می باشد .

 

کامپوننت comboBox :

در این مثال کمی بیشتر با کدهای jQuery سر و کار داریم .در همان صفحه html که از قبل ساختیم ، یک input با id=colorPicker تعریف می کنیم . سپس تگ script را شروع می کنیم . در این بخش باید دستور مربوط به لود کامل صفحه یعنی document.ready را فراخوانی کنیم و سپس کدهای زیر را بنویسیم :

$(document).ready(function () {

            $("#colorPicker").kendoComboBox({

                dataSource :[“Red”,”Yellow”,”Green”,”Blue”],

            });

        });

و خروجی آن به شکل زیر است :


kendo ComboBox

برای دانلود سورس کد این مقاله روی لینک روبرو کلیک کنید : Kendo_Html

در مقاله بعد ، استفاده از kendo در MVC را آغاز می کنیم . همراه ما باشید …smiley


تاریخ انتشار :۱۷ دی ۱۳۹۴



دیدگاه ها :