The panel component in Easyui in the previous section we simply told you how the code should be written. In this section we will start with the panel's entry level, focusing on its event monitoring, the attribute tool introduction.
1. Event monitoring-implemented by Data-options mode
<classdata-options data-options{ Console.log (' Hello wrold ');} " >2. Event listener-Create components via JS and define event listeners
<Scripttype= "Text/javascript"> $(function() { $("#d01"). Panel ({width: -, Height: $, Iconcls:'Icon-save', Collapsible:true, Title:'my panel', Oncollapse:function() {Console.log ('Hello World'); } }); });</Script><DivID= "D01">My first Easyui program</Div>
3. Easyui-panel component extensions, mainly using tools
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Insert Title here</title><!--1. Introduction of JQUERY.MIN.JS2. Introduction of JQUERY.EASYUI.MIN.JS3. Introduction of Jqueryeasyui css4. Import internationalized Resource file Easyui Create components in two ways 1.html mode Creation (Data-options method is recommended to add component properties , data-options mode is HTML5) 2.js mode creation, the addition of attributes is a JSON format style -<Scripttype= "Text/javascript"src=".. /easyui/jquery.min.js "></Script><Scripttype= "Text/javascript"src=".. /easyui/jquery.easyui.min.js "></Script><Linkrel= "stylesheet"type= "Text/css"href=".. /easyui/themes/default/easyui.css "><Linkrel= "stylesheet"type= "Text/css"href=".. /easyui/themes/icon.css "><Scripttype= "Text/javascript"src=".. /easyui/locale/easyui-lang-zh_cn.js "></Script></Head><Body><Divclass= "Easyui-panel"style= "width:500px;height:200px;padding:10px;"data-options= "Iconcls: ' Icon-save ', collapsible:true,title: ' My panel ', tools: ' #tt '">My first Easyui program</Div><DivID= "tt"> <ahref="#"class= "Icon-add"onclick= "Javascript:alert (' Icon-add ');"></a> <ahref="#"class= "Icon-edit"onclick= "Javascript:alert (' Icon-edit ');"></a></Div></Body></HTML>
[Liu Yang Java]_easyui-panel Module entry-level _ 3rd Lecture
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
