メニューとタブ ページの効果_JavaScript スキルを達成するために共有する価値のある Bootstrap Ace テンプレート

この記事では、プロジェクトの Ace テンプレートを使用したメニュー スタイルと iframe ベースのタブ ページ効果を共有します。

1.エフェクト表示

長い間苦労した後、最終的にプロジェクトからメニュー スタイルとタブ ページの効果を抽出しました。

1. 初期ロードの効果

2. メニューを展開します (マルチレベル展開をサポート、以下にコードを紹介します)

3. サブメニューをクリックして、タブ ページの形式で対応するページを開きます

4. メニューの折りたたみをサポート

5. 開いているメニューが多すぎる場合、自動的に改行され、折りたたまれた後に自動的に表示されます

2. コード例
一般的に、Bootstrap Ace テンプレートの機能は比較的強力で、さまざまな端末デバイスに対応しています。この記事では主にメニューの効果を使用します。Ace テンプレートのメニュー効果の実装コードを見てみましょう。

1. メニュー効果
Ace はブートストラップに基づいているため、まず jquery コンポーネントとブートストラップ コンポーネントを参照する必要があります。どのファイルを参照する必要があるのか​​を概観してみましょう。

<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 メソッドはいつ呼び出されるのでしょうか?答えは、メニュー クリック イベントを登録するときです。コードのこの部分は、上で確認できるように、サイドバー メニュー コンポーネントがカプセル化されているときに使用できます。

上記は、bootstrap ace テンプレートのメニューとタブ ページの効果の表示です。一般に、基本的な機能は使用できますが、たとえば、メニューをクリックした後、メニューのスタイルを調整する必要があります。クリックされたメニューが選択された状態である必要があります。プロジェクトでもブートストラップ スタイルを使用している場合は、ace テンプレートを調べて試してください。