Kendo UI – HTML5

Kendo UI là gì?

Kendo UI là 1 trong những framework dựa vào nền tảng HTML5 và jQuery tương hỗ tất cả chúng ta toàn vẹn trong những việc thi công những phần mềm Web văn minh một cơ hội dễ dàng và đơn giản và linh động cho tới ko ngờ.

Có thể các bạn sẽ nghĩ về rằng: Kendo UI vững chắc tương tự như jQuery UI – một framework cũng rất được thi công dựa vào jQuery đang rất được dùng thịnh hành nhất lúc này.

Bạn đang xem: kendo ui là gì

Nhưng thiệt sự jQuery UI chỉ tương hỗ mạnh việc thi công phần mềm Web chuyên nghiệp điều khiển xe trên Desktop và chỉ tương hỗ một trong những phần nho nhỏ nhằm cải cách và phát triển phần mềm Web điều khiển xe trên Mobile.

Còn Kendo UI framework tuy nhiên tất cả chúng ta đang được nằm trong dò xét hiểu thì lại tương hỗ cực mạnh cả hai phần này, ngoại giả Kendo UI còn cực mạnh trong những việc trực quan liêu hóa tài liệu Data Visualization (Kendo UI DataViz) hùn phần mềm Web nom và hành xử nó giống như các phần mềm thuần Mobile, hoặc thuần Desktop.

Như vậy hoàn toàn có thể thấy Kendo UI bao hàm 3 phần chính:

Kendo UI Web: Hỗ trợ thi công một phần mềm Web bên trên Desktop.
Kendo UI Mobile: Hỗ trợ thi công phần mềm Web bên trên Mobile.
Kendo UI DataViz: Hỗ trợ thiết lập và tương tác tài liệu trực quan liêu.

Ngoài đi ra, Kendo UI còn tồn tại cả công dụng Kendo UI-Server Swapper khác biệt hùn tất cả chúng ta thi công 1 phần mềm HTML5 tuy nhiên không cần thiết phải viết lách code JavaScript. Để thực hiện được điều này Kendo UI cải cách và phát triển một vài tủ sách bên dưới dạng những helpers bên trên Server, Kendo UI-Server Swapper tiếp tục tiêu thụ những câu mệnh lệnh giản dị của thiết kế viên nhập mã mối cung cấp những ngôn từ thiết kế ASP, PHP hoặc JSP và tiếp sau đó tiếp tục tự động đột biến đi ra (tự render) những mã HTML và JavaScript quan trọng.

Cài đặt

Chúng tao hoàn toàn có thể tải về hoàn hảo cỗ Kendo UI bên trên trang chủ của Kendo UI.

Xem thêm: light up là gì

Sau khi tải về Kendo UI về và bung file, tất cả chúng ta hoàn toàn có thể thấy được cấu tạo folder như sau:

example: chứa chấp những ví dụ minh họa
js: chứa chấp tệp tin JavaScript đã và đang được tối ưu hóa
src: chứa chấp mã mối cung cấp của Kendo UI (phần này tiếp tục không tồn tại nhập bảng người sử dụng thử)
styles: chứa chấp những tệp tin CSS và theme
swapper: chứa chấp bộ phận server-side swapper đang được kể bên trên.

Để dùng KenDo UI cho tới trang HTML, tất cả chúng ta cần thiết include những tập luyện tin cậy CSS và JavaScript

Sử dụng

Bước 1: Download Kendo UI Web và giải nén
Bước 2: Copy folder js và style nhập folder chủ yếu nhập phần mềm trang web của bạn
Bước 3: Include Kendo Ui Web JavaScript và CSS nhập phần thẻ head nhập trang HTML.

<html>
        <head>
            <title>Welcome to lớn Kendo UI!</title>
            
            <link href="styles/kendo.common.min.css" rel="stylesheet" />

            
            <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

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

            
            <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />

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

            
            <script src="js/kendo.all.min.js"></script>
        </head>
        <body>
            Hello World!
        </body>
        </html>

Bước 4 : Khởi tạo nên Widget.
Ví dụ sau minh hoạ thực hiện thế nào là nhằm khởi tạo nên widget DatePicker:

Xem thêm: oppa là anh còn em là gì

<input id="datepicker" />
    <script>
    $(function() {
        // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin
        $("#datepicker").kendoDatePicker();
    });
    </script>

<html>
    <head>
        <title>Welcome to lớn Kendo UI!</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        <input id="datepicker" />
        <script>
            $(function() {
                $("#datepicker").kendoDatePicker();
            });
        </script>
    </body>
</html>