EasyUI self-study 01, easyui self-study 01

EasyUI self-study 01, easyui self-study 01

JQuery EasyUI is a jQuery-based framework that integrates various user interface plug-ins. The jQuery EasyUI framework provides everything you need to create a web page and helps you easily build a website. I am a good news for people who are not suitable for front-end UIS. Now I will record the first day of easyUI. Download the package at http://www.jeasyui.net/download.

The downloaded content. To use easyUI, import the file first. The specific code is as follows:

<! -- Introduce JQuery -->

<Script src = "easyUI/jquery. min. js"> </script>
<! -- Introduce EasyUI -->
<Script src = "easyUI/jquery. easyui. min. js"> </script>
<! -- Introduce Chinese internationalization js of EasyUI to enable EasyUI to support Chinese -->
<Script type = "text/javascript" src = "easyUI/locale/easyui-lang-zh_CN.js"> </script>
<! -- Introduce the EasyUI style file -->
<Link href = "easyUI/themes/default/easyui.css" rel = "stylesheet"/>
<! -- Introduce the EasyUI icon style file -->
<Link href = "easyUI/themes/icon.css" rel = "stylesheet"/>

Note: jquery and easyui must be displayed in order! The path must be changed based on the location of your file. You can use easyUI after the import. Next let's try to write the first easyUI code and write a panel.

1 View Code

The running result is as follows:
This is to create a panel by setting the css style of the div to the easyui-panel method written by easyui.
Title is the title bar in the panel;
IconCls sets a 16x16 icon to be displayed in the upper-left corner of the Panel (the value is previously introducedCss styles defined in the icon.css File);
Collapsible defines whether to display the foldable button. The default value is false.
The above panel is written in html format, and another data-options method recommended by easyUI is used to add component attributes (data-options is used to set easyui-related attributes)
1 View Code

The effect is the same as the first one. You can also create a panel in js mode. When you create a panel in js mode, attributes are added to jason's various styles. The Code is as follows:
1 View Code

The effect is exactly the same as the two above.