EasyUI for Web Front-end development and EasyUI for Web Development
EasyUI is a collection of JQuery-based user interface plug-ins. Therefore, the purpose of Jquery EasyUI is to help Web developers easily create rich and beautiful UI interfaces.
One of the major advantages of EasyUI is that you do not need to understand JavaScript very much or have a deep research on CSS styles. You need to understand some simple HTML tags, you can design a beautiful Web Front-end interface as you like.
Advantages of Jquery EasyUI
1. Provide necessary functions for creating modern, interactive, and JavaScript applications.
2. Greatly saving development time and resources
3. easy, simple, but powerful
4. Support expansion. You can expand the control as needed.
5. Perfect support for compiling HTML5 web pages
Two methods are used to declare the UI component:
1. Declare the component directly in the HTML Script
2. Write JavaScript code to create components.
You can go to the official Jquery EasyUI website to view the specific sample code.
Here we will focus on how to use EasyUI in VS2012 to beautify our pages. We want to prepare VS2012 and jquery-easyui-1.3.2, take this as an example to explain.
First, we need to create a project. This is very simple. I use MVC3 as an example to create a project, as shown in:
Then put our prepared jquery-easyui-1.3.2 In the Scripts folder, because easyui is not big as a whole, the loading of a program, there is no excessive impact, after the completion of the effect is as follows:
Then we can use it. When using the EasyUI plug-in, we should note that we should add necessary files, such as style sheets and js files, on the pages of the EasyUI plug-in, to use the EasyUI encapsulated control, five files must be added.
Finally, we will write a code example for the progress bar. The code for the view page is as follows:
<span style="font-size:18px;">@{ Layout = null;}<!DOCTYPE html><link href="../../Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" /><link href="../../Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" /><link href="../../Scripts/jquery-easyui-1.3.2/demo/demo.css" rel="stylesheet" /><script src="../../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script><script src="../../Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script><script type ="text/javascript"> $(function () { var value = $('#p').progressbar('getValue'); if (value < 100) { value += Math.floor(Math.random() * 10); $('#p').progressbar('setValue', value); setTimeout(arguments.callee, 200); } }) </script>
Running result
Summary: This blog has no technical content, but describes how to use EasyUI encapsulated controls in VS. I believe it will help beginners a little, of course, for further study, you need to visit EasyUI's official website. There are instructions on the use of various controls and parameter descriptions, so that you can customize the desired effect on your own.