Biegral Blog

web基于后台管理模版实现高扩展的侧边栏

       web开发中会在网上找到一些后台管理模版，

      网上找到的后台管理模版具有界面美观，扩展性低的特点。

      尤其是模版的侧边栏代码具有耦合度高的问题，每个页面都

      需要对侧边栏代码进行设置。应用到实际开发中需要对

      侧边栏代码进行解耦合的优化，以提高模版代码的扩展性。

 

     实现思路：

     1、在侧边栏的a标签设置href属性，设置跳转页面，并设置target属性，指向到左侧id为pageWrap的iframe显示页面

     2、设置左侧iframe,id为pageWrap，并通过设置src属性定义默认显示页面

    

     实现代码：

    

   <!-- Sidebar -->
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class