메뉴 및 탭 페이지 효과_javascript 기술을 달성하기 위해 공유할 가치가 있는 Bootstrap Ace 템플릿

이 글에서는 프로젝트에서 Ace 템플릿을 활용한 메뉴 스타일과 iframe 기반 탭 페이지 효과를 공유합니다.

1. 효과 표시

오랜 고민 끝에 드디어 프로젝트에서 메뉴 스타일과 탭 페이지 효과를 추출했습니다.

1. 초기 로딩 효과

2. 메뉴 확장(다단계 확장 지원, 아래 코드 소개)

3. 서브메뉴를 클릭하면 탭페이지 형태로 해당 페이지가 열립니다

4. 메뉴 접기 지원

5. 열려 있는 메뉴가 너무 많으면 자동으로 줄 바꿈되어 접힌 후 자동으로 표시됩니다.

2. 코드 예시
일반적으로 Bootstrap Ace 템플릿의 기능은 비교적 강력하며 다양한 터미널 장치를 지원합니다. 이번 글에서는 주로 메뉴의 효과를 활용하여 Ace 템플릿 메뉴 효과의 구현 코드를 살펴보겠습니다.

1. 메뉴효과
Ace는 Bootstrap을 기반으로 하기 때문에 먼저 jquery 및 bootstrap 구성 요소를 참조해야 합니다. 어떤 파일을 참조해야 하는지 전반적으로 살펴보겠습니다. ​

<script src="/Scripts/jquery-1.9.1.min.js"></script>

  <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
  <link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

  <link href="/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
  <link href="/Content/ace/css/ace-rtl.min.css" rel="stylesheet" />
  <link href="/Content/ace/css/ace-skins.min.css" rel="stylesheet" />
  <link href="/Content/sidebar-menu/sidebar-menu.css" rel="stylesheet"/>

  <script src="/Content/ace/js/ace-extra.min.js"></script>
  <script src="/Content/ace/js/ace.min.js"></script>

　 <script src="/Content/sidebar-menu/sidebar-menu.js"></script>

하하, 꽤 많은 것 같네요. 블로거가 직접 캡슐화한 마지막 js 파일()을 제외하고 나머지는 기본적으로 필요한 기능 구성 요소입니다. 구성 요소에 의해. 페이지에 어떤 HTML 태그를 배치해야 하는지 살펴보세요.

　<div class="sidebar" id="sidebar">
        <ul class="nav nav-list" id="menu"></ul>
        <div class="sidebar-collapse" id="sidebar-collapse">
          <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
        </div>
      </div>

sidebar-menu.js 파일의 캡슐화 방법을 살펴보겠습니다.

(function ($) {
  $.fn.sidebarMenu = function (options) {
    options = $.extend({}, $.fn.sidebarMenu.defaults, options || {});
    var target = $(this);
    target.addClass('nav');
    target.addClass('nav-list');
    if (options.data) {
      init(target, options.data);
    }
    else {
      if (!options.url) return;
      $.getJSON(options.url, options.param, function (data) {
        init(target, data);
      });
    }
    var url = window.location.pathname;
    //menu = target.find("[href='" + url + "']");
    //menu.parent().addClass('active');
    //menu.parent().parentsUntil('.nav-list', 'li').addClass('active').addClass('open');
    function init(target, data) {
      $.each(data, function (i, item) {
        var li = $('<li></li>');
        var a = $('<a></a>');
        var icon = $('<i></i>');
        //icon.addClass('glyphicon');
        icon.addClass(item.icon);
        var text = $('<span></span>');
        text.addClass('menu-text').text(item.text);
        a.append(icon);
        a.append(text);
        if (item.menus&&item.menus.length>0) {
          a.attr('href', '#');
          a.addClass('dropdown-toggle');
          var arrow = $('<b></b>');
          arrow.addClass('arrow').addClass('icon-angle-down');
          a.append(arrow);
          li.append(a);
          var menus = $('<ul></ul>');
          menus.addClass('submenu');
          init(menus, item.menus);
          li.append(menus);
        }
        else {
          var href = 'javascript:addTabs({id:\'' + item.id + '\',title: \'' + item.text + '\',close: true,url: \'' + item.url + '\'});';
          a.attr('href', href);
          //if (item.istab)
          //  a.attr('href', href);
          //else {
          //  a.attr('href', item.url);
          //  a.attr('title', item.text);
          //  a.attr('target', '_blank')
          //}
          li.append(a);
        }
        target.append(li);
      });
    }
  }

  $.fn.sidebarMenu.defaults = {
    url: null,
    param: null,
    data: null
  };
})(jQuery);

페이지에서 직접 사이드바 메뉴 메소드 호출

$(function () {
      $('#menu').sidebarMenu({
        data: [{
          id: '1',
          text: '系统设置',
          icon: 'icon-cog',
          url: '',
          menus: [{
            id: '11',
            text: '编码管理',
            icon: 'icon-glass',
            url: '/CodeType/Index'
          }]
        }, {
          id: '2',
          text: '基础数据',
          icon: 'icon-leaf',
          url: '',
          menus: [{
            id: '21',
            text: '基础特征',
            icon: 'icon-glass',
            url: '/BasicData/BasicFeature/Index'
          }, {
            id: '22',
            text: '特征管理',
            icon: 'icon-glass',
            url: '/BasicData/Features/Index'
          }, {
            id: '23',
            text: '物料维护',
            icon: 'icon-glass',
            url: '/Model/Index'
          }, {
            id: '24',
            text: '站点管理',
            icon: 'icon-glass',
            url: '/Station/Index'
          }]
        }, {
          id: '3',
          text: '权限管理',
          icon: 'icon-user',
          url: '',
          menus: [{
            id: '31',
            text: '用户管理',
            icon: 'icon-user',
            url: '/SystemSetting/User'
          }, {
            id: '32',
            text: '角色管理',
            icon: 'icon-apple',
            url: '/SystemSetting/Role'
          }, {
            id: '33',
            text: '菜单管理',
            icon: 'icon-list',
            url: '/SystemSetting/Menu'
          }, {
            id: '34',
            text: '部门管理',
            icon: 'icon-glass',
            url: '/SystemSetting/Department'
          }]
        }, {
          id: '4',
          text: '订单管理',
          icon: 'icon-envelope',
          url: '',
          menus: [{
            id: '41',
            text: '订单查询',
            icon: 'icon-glass',
            url: '/Order/Query'
          }, {
            id: '42',
            text: '订单排产',
            icon: 'icon-glass',
            url: '/Order/PLANTPRODUCT'
          }, {
            id: '43',
            text: '订单撤排',
            icon: 'icon-glass',
            url: '/Order/cancelPRODUCT'
          }, {
            id: '44',
            text: '订单HOLD',
            icon: 'icon-glass',
            url: '/Order/hold'
          }, {
            id: '45',
            text: '订单删除',
            icon: 'icon-glass',
            url: '/Order/delete'
          }, {
            id: '47',
            text: '订单插单',
            icon: 'icon-glass',
            url: '/Order/insertorder'
          }, {
            id: '48',
            text: '订单导入',
            icon: 'icon-glass',
            url: '/Order/Import'
          }]
        }]
      });
    });

여기서 주목해야 할 매우 중요한 점은 메뉴 앞의 작은 아이콘에 관한 것입니다.

con 값이 icon-user일 경우, 메뉴에 그림과 같은 작은 아이콘이 표시됩니다. 물론 일반적인 상황에서는 메뉴를 동적으로 로드해야 합니다. 백그라운드에서 데이터를 가져와야 하는 경우 이 메서드를 직접 호출할 수 있습니다.

$('#menu').sidebarMenu({ url: "/api/UserApi/GetMenuByUser/", param: { strUser: 'admin' } });
그렇군요, 하하, 아주 간단합니다.

2. 탭 페이지 효과
탭 페이지 효과는 실제로 왼쪽 메뉴와 밀접한 관련이 있습니다. 먼저 탭 페이지 효과에 대한 js 참조를 살펴보겠습니다.

페이지의 HTML 태그:
                                                                       

 <div class="main-content"><div class="page-content">
          <div class="row">
            <div class="col-xs-12" style="padding-left:5px;">
              <ul class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#Index" role="tab" data-toggle="tab">首页</a></li>
              </ul>
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="Index">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

bootstrap-tab.js 파일은 addTabs 메소드를 캡슐화합니다

var addTabs = function (options) {
  //var rand = Math.random().toString();
  //var id = rand.substring(rand.indexOf('.') + 1);
  var url = window.location.protocol + '//' + window.location.host;
  options.url = url + options.url;
  id = "tab_" + options.id;
  $(".active").removeClass("active");
  //如果TAB不存在，创建一个新的TAB
  if (!$("#" + id)[0]) {
    //固定TAB中IFRAME高度
    mainHeight = $(document.body).height() - 90;
    //创建新TAB的title
    title = '<li role="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab">' + options.title;
    //是否允许关闭
    if (options.close) {
      title += ' <i class="glyphicon glyphicon-remove" tabclose="' + id + '"></i>';
    }
    title += '</a></li>';
    //是否指定TAB内容
    if (options.content) {
      content = '<div role="tabpanel" class="tab-pane" id="' + id + '">' + options.content + '</div>';
    } else {//没有内容，使用IFRAME打开链接
      content = '<div role="tabpanel" class="tab-pane" id="' + id + '"><iframe src="' + options.url + '" width="100%" height="' + mainHeight +
          '" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe></div>';
    }
    //加入TABS
    $(".nav-tabs").append(title);
    $(".tab-content").append(content);
  }
  //激活TAB
  $("#tab_" + id).addClass('active');
  $("#" + id).addClass("active");
};
var closeTab = function (id) {
  //如果关闭的是当前激活的TAB，激活他的前一个TAB
  if ($("li.active").attr('id') == "tab_" + id) {
    $("#tab_" + id).prev().addClass('active');
    $("#" + id).prev().addClass('active');
  }
  //关闭TAB
  $("#tab_" + id).remove();
  $("#" + id).remove();
};
$(function () {
  mainHeight = $(document.body).height() - 45;
  $('.main-left,.main-right').height(mainHeight);
  $("[addtabs]").click(function () {
    addTabs({ id: $(this).attr("id"), title: $(this).attr('title'), close: true });
  });

  $(".nav-tabs").on("click", "[tabclose]", function (e) {
    id = $(this).attr("tabclose");
    closeTab(id);
  });
});

그럼 Addtabs 메소드는 언제 호출되나요? 답은 메뉴 클릭 이벤트를 등록할 때입니다. 앞서 사이드바 메뉴 구성요소를 캡슐화했을 때 사용할 수 있는 코드 부분입니다.

위는 부트스트랩 에이스 템플릿의 메뉴 및 탭 페이지 효과 표시입니다. 일반적으로 기본 기능은 사용 가능하지만 메뉴 스타일을 조정해야 합니다. 클릭한 메뉴를 선택해야 합니다. 프로젝트에서 부트스트랩 스타일도 사용하는 경우 ace 템플릿을 연구하고 사용해 보세요.