BOS Logistics Project ——— homepage Design (Easyui) _ Design

BOS Logistics Project 08 Homepage Design Easyui One Description two basic Home 1 home Page Layout Diagram 2 page description 3 code 4 source position three Panel 1 Panel diagram 2 page description 3 code 4 source position four tab 1 home Layout Diagram 2 page description 3 code 4 source Location Five source download

BOS Logistics Project ——— homepage Design (EASYUI) One, description

Homepage design, using the Easyui

Website http://www.jeasyui.com/index.php

Chinese website http://www.jeasyui.net/Second, Basic homepage 2.1 home page layout diagram

2.2 Page description

The border layout (border layout) offers five areas: East, West, north, south, center. Here are some common uses:

The North area can be used to display Web site banners.

The South area can be used to display copyright and some instructions.

The West area can be used to display navigation menus.

The east area can be used to show some promotional items.

The center area can be used to show the main content. 2.3 Code

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <!
DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 2.4 Source Location
HTTPS://GITHUB.COM/WIMINGXXX/BOS-PARENT/BLOB/MASTER/BOS-WEB/SRC/MAIN/WEBAPP/EASYUI/01-LAYOUT.JSP Three, Panel 3.1 panel diagram

3.2 Page description

The style The panel uses in the DIV is easyui-accordion

For example

    <div class= "easyui-accordion" data-options= "Fit:true" >
            <!--use child div to represent each panel--> <div title=
            "Panel One "Iconcls=" Icon-search >111</div>
            <div title= "Panel Two" >222</div>
            <div title= "Panel three" > 333</div>
    </div>
3.3 Code
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <!
DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 3.4 Source Location
Https://github.com/wimingxxx/bos-parent/blob/master/bos-web/src/main/webapp/easyui/02-accordion.jsp Four, TAB 4.1 Home layout diagram

The style that tab uses in Div is easyui-tabs

For example

<div class= "Easyui-tabs" style= "width:400px;height:100px;" >
    <div title= "the" "style=" padding:10px; > tab
    </div>
    <div title= "Second tab" closable= "true" style= "padding:10px;" >
        Second tab
    </div>
    <div title= "third Tab" iconcls= "Icon-reload" closable= "true" style= " padding:10px; " >
        Third Tab
    </div>
</div>
 
Here we are using the Dynamic Add tab, just call the Add method.

For example:

function AddTab (title, URL) {
    if ($ (' #tt '). Tabs (' exists ', title) {
        $ (' #tt '). Tabs (' select ', title);
    {
        var content = ' <iframe scrolling= ' auto ' frameborder= ' 0 '  src= ' +url+ ' style= ' width:100%;height:100%; ></iframe> ';
        $ (' #tt '). Tabs (' Add ', {
            title:title,
            content:content,
            closable:true
        });
    }

 
Title: is a headline

Content: Contents

Closable: Can I turn off the 4.3 code

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <!
DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 4.4 Source Location
https://github.com/wimingxxx/bos-parent/blob/master/bos-web/src/main/webapp/easyui/01-layout.jsp Five, source download

Https://github.com/wimingxxx/bos-parent