Front-end static html page, encapsulate common header file (header: top header, top navigation bar and other parts) and the end of the file (footer: CopyRight, links and other parts)
Current methods: The load () function, introduction of a public file head and tail;
This article Case: the introduction of generic sidebar
Case structure:
Sidebar corresponding html file code:
<aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu"> <li class="header">功能列表</li> <!-- 菜单 --> <li class="treeview"> <a href="#"> <i class="fa fa-folder"></i> <span>用户管理模块</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li id="admin-login"> <a href="all-admin-login.html"> <i class="fa fa-circle-o"></i> 权限修改 </a> </li> <li id="admin-register"> <a href="all-admin-register.html"> <i class="fa fa-circle-o"></i> 密码修改 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-pie-chart"></i> <span>数据库管理模块</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li id="charts-chartjs"> <a href="all-charts-chartjs.html"> <i class="fa fa-circle-o"></i> 01 基本信息 </a> </li> <li id="charts-morris"> <a href="all-charts-morris.html"> <i class="fa fa-circle-o"></i> 02 尺寸检验 </a> </li> <li id="charts-flot"> <a href="all-charts-flot.html"> <i class="fa fa-circle-o"></i> 03 机械性能 </a> </li> <li id="charts-inline"> <a href="all-charts-inline.html"> <i class="fa fa-circle-o"></i> 04 化学成分 </a> </li> <li id="charts-manager"> <a href="all-charts-inline.html"> <i class="fa fa-circle-o"></i> 05 检测结果 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-laptop"></i> <span>>span</Quality certificate management module <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li id="elements-general"> <a href="all-elements-general.html"> <i class="fa fa-circle-o"></i> 标准 General </a> </li> <li id="elements-icons"> <a href="all-elements-icons.html"> <i class="fa fa-circle-o"></i> 图标 Icons </a> </li> <li id="elements-buttons"> <a href="all-elements-buttons.html"> <i class="fa fa-circle-o"></i>A</Button Buttons > </li> <li id="elements-sliders"> <a href="all-elements-sliders.html"> <i class="fa fa-circle-o"></i> 滑块 Sliders </a> </li> <li id="elements-timeline"> <a href="all-elements-timeline.html"> <i class="fa fa-circle-o"></i> 时间线 Timeline </a> </li> <li id="elements-modals"> <a href="all-elements-modals.html"> <i class="fa fa-circle-o"></i> 对话框样式 Modals </a> </li> <li id="elements-widgets"> <a href="all-elements-widgets.html"> <i class="fa fa-circle-o"></i> 窗体小部件 widgets </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-edit"></i> <span>表单 Forms</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li id="form-general"> <a href="all-form-general.html"> <i class="fa fa-circle-o"></i> 基础表单元素 </a> </li> <li id="form-advanced"> <a href="all-form-advanced.html"> <i class="fa fa-circle-o"></i> 高级表单元素 </a> </li> <li id="form-editors"> <a href="all-form-editors.html"> <i class="fa fa-circle-o"></i> 编辑器 </a> </li> </ul> </li> <li class="treeview"> <a href="#"> <i class="fa fa-table"></i> <span>表格 tables</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li id="tables-simple"> <a href="all-tables-simple.html"> <i class="fa fa-circle-o"></i> 简单表格 </a> </li> <li id="tables-data"> <a href="all-tables-data.html"> <i class="fa fa-circle-o"></i> 数据表格 </a> </li> </ul> </li> </ul> </section> <!-- /.sidebar --> </aside>
Screenshot section:
html files to be introduced sidebar add the following code:
Add a sidebar of code in the appropriate position:
< Script > $ ( function () { / * public portion * navigation * footer CopyRight * / $ ( " .adminsidebar " ) .load ( " adminsidebar.html " ); }); </ Script >
Renderings: