A front-end architecture based on easyui (2) subject content area Structure Design

Easyui provides a tabs component to conveniently use page effects similar to tabs.

The main function of the application system may require a single user to open multiple pages at the same time. Therefore, tabs is used to manage multiple pages opened by users.

Use tabs

Easyui can set a <div> element to tabs, and you only need to set the class attribute of the specified <div> element to easyui-tabs.

Add a tabs Project

The tabs Project is a tab that can be added to the tabs element in the form of a <div> label.

Set tabs size

Generally, tabs is stored in an HTML container, so we only need to make tabs automatically fill the container size. Tabs provides an attribute fit that allows you to set whether tabs automatically fills the container. The benefit of this attribute is that no matter how the container size changes, it can automatically modify the size to adapt to the container.

Of course, if you do not need to fill the container with tabs, you can use the style attribute to specify the size of the <div> label.

Set the tabs project title and icon

Each tabs project has a label for switching between multiple tabs. Tabs needs to specify a title for each label and an icon for the title.

You can add the title attribute and iconcls attribute to the tabs project element to set the title and icon of the tab label.

OK, simply add a tabs test:

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  > 
 <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  > 
 <  Head  > 
 <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"  /> 
 <  Title  > Easyui demo </  Title  > 
 <  Link REL  = "Stylesheet"  Type  = "Text/CSS"  Href  = "JS/themes/default/easyui.css"  /> 
 <  Link  REL  = "Stylesheet"  Type  = "Text/CSS"  Href  = "JS/themes/icon.css"  /> 
<  Script  Type  = "Text/JavaScript"  SRC  = "JS/jquery-1.6.min.js"  > </  Script  > 
 <  Script  Type  = "Text/JavaScript"  SRC  = "JS/jquery. easyui. Min. js"  > </ Script  > 
 </  Head  > 
 <  Body  Class  = "Easyui-layout"  > 
 <  Div  Region  = "North"  Style  = "Height: 80px ;" > 
 <! --  Page header  -->     
 <  H1  > * ** Management System </  H1  > 
 </  Div  > 
 <  Div  Region = "West"  Split  = "True"  Style  = "Width: 220px"  Title  = "Navigation menu"  > 
Left side of the page (menu)
 </  Div  > 
 <  Div  Region  = "Center"  > 

 <  Div  ID  = "Tabs"  Class  = "Easyui-Tabs"  Fit  = "True"  Border  = "False"   > 
 <  Div  Title  = "Welcome"  Iconcls = "Icon-cancel"   > 
 <  H1  Style  = "Font-size: 24px ;"  > Welcome! </  H1  > 
 <  H1  Style  = "Font-size: 24px; color: red ;"  > Welcome!</  H1  > 
 </  Div  > 
 </  Div  > 

 </  Div  > 
 </  Body  > 
 </ Html  > 

Run in chrome.

It's pretty.

Tabs also supportsCodeDynamically add, close, and open tags to enableProgramMore flexible management of tabs.

Take adding as an example. Let's look at a piece of code:

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  > 
 <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  > 
<  Head  > 
 <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"  /> 
 <  Title  > Easyui demo </  Title  > 
 <  Link  REL  = "Stylesheet"  Type  = "Text/CSS"  Href  = "JS/themes/default/easyui.css"  /> 
 <  Link  REL  = "Stylesheet"  Type  = "Text/CSS"  Href = "JS/themes/icon.css"  /> 
 <  Script  Type  = "Text/JavaScript"  SRC  = "JS/jquery-1.6.min.js"  > </  Script  > 
 <  Script  Type  = "Text/JavaScript"  SRC = "JS/jquery. easyui. Min. js"  > </  Script  > 
 <  Script  Type  = "Text/JavaScript"  >  
$ (  Function  (){
$ (  '  # Tabs '  ). Tabs (  '  Add  '  ,{
Title:  "  System Management  "  ,
Content:  " <H1> This is the system management page. </H1>  "  ,
Closable:  True  ,
Icon:  ""  
});
});
  </  Script  > 
 </  Head > 
 <  Body  Class  = "Easyui-layout"  > 
 <  Div  Region  = "North"  Style  = "Height: 80px ;"  > 
 <! --  Page header  -->     
<  H1  > * ** Management System </  H1  > 
 </  Div  > 
 <  Div  Region  = "West"  Split  = "True"  Style = "Width: 220px"  Title  = "Navigation menu"  > 
Left side of the page (menu)
 </  Div  > 
 <  Div  Region  = "Center"  > 

 <  Div  ID = "Tabs"  Class  = "Easyui-Tabs"  Fit  = "True"  Border  = "False"   > 
 <  Div  Title  = "Welcome"  Iconcls  = "Icon-cancel"   > 
 < H1  Style  = "Font-size: 24px ;"  > Welcome! </  H1  > 
 <  H1  Style  = "Font-size: 24px; color: red ;"  > Welcome! </  H1  > 
</  Div  > 
 </  Div  > 

 </  Div  > 
 </  Body  > 
 </  Html  > 

After running in chrome, the result is:

 

(Note: Specify the style name of the icon for the tabs label and save it in the icon.css file under the themes directory of easyui. Therefore, you must reference the CSS style sheet file before this: <LINK rel = "stylesheet" type = "text/CSS" href = "JS/themes/icon.css"/>)

 

This series: a front-end architecture based on easyui