HTML5

Kendo UI Introduction and Tutorial – Jquery HTML5 Framework

by Mike Ditka

Jquery is not new to our ears, jquery comes with many effects for our website and almost replaces the flash that used to be used to make our website feel alive with the effects that we can create.

kendo-ui

As there are many jquery enthusiasts, there are also many developers who develop and create their own jquery frameworks, such as JqueryUI, JqueryTools, Kendo UI and many more.

Now I don’t want to explain in detail what jquery is but just one of the frameworks that I also like to use, namely Kendo UI.

Kendo UI is an html5 & jquery framework that is quite complete with plugins to install on our website. Example:

AutoComplete.
Grid (Data Table).
WYSIWYG Editor
ListView
And many more.
Kendo UI provides free (free) and paid (commercial) products, for free kendo UI it is only provided for websites and for paid products it is provided for Mobile UI, DataViz, and Server Wrapper.
For examples and to see in full the features/plugins of Kendo UI, you can go directly to the Kendo UI website.

Choose downloads that are open source and free.

Now I will explain using kendoUI on our website.
First, friends, extract the Kendo UI file that you have downloaded in your website folder. Then enter this code to import components from Kendo UI.

Where CSS Kendo UI is the same as Bootstrap, MetroUI etc, which has styles for buttons and forms.
Okay after we import the Kendo UI component. Time to move on to the Kendo UI plugin.
This time I will give an example of a plugin, namely the DateTimePicker plugin.

Enter this code before:

[js] $(function() {
$(“#time”).kendoTimePicker();
$(“#date”).kendoDatePicker();
});[/js]

Then to display the plugin, enter this code:

Dates :
The code above will display a form that is ready to be used to select a date.
Date is the ID to call the Kendo UI date picker function declared above it: $(“#date”).kendoDatePicker();

example1
For another example, Kendo UI still provides many examples of plugins in the zip file that you download.
This is the full script above: