지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 메뉴 및 탭 페이지 효과_javascript 기술을 달성하기 위해 공유할 가치가 있는 Bootstrap Ace 템플릿

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

WBOY
풀어 주다： 2016-05-16 15:22:39
원래의
2364명이 탐색했습니다.

이 글에서는 프로젝트에서 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 템플릿을 연구하고 사용해 보세요.

관련 라벨：
ace bootstrap tab 메뉴
원천：php.cn
이전 기사：jQuery_jquery를 사용하여 요소에 스타일을 추가하는 방법에 대한 자세한 설명 다음 기사：밑줄 소스 코드 분석_javascript 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
에서 2024-04-05 08:45:39
0
1
3443
Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...
에서 2024-04-04 22:16:18
0
1
1450
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿