Templat Bootstrap Ace yang patut dikongsi untuk mencapai kemahiran effect_javascript menu dan halaman tab

Artikel ini berkongsi gaya menu dan kesan halaman Tab berasaskan iframe menggunakan templat Ace dalam projek.

1. Paparan kesan

Setelah bergelut untuk masa yang lama, akhirnya saya mengekstrak gaya menu dan kesan halaman Tab daripada projek.

1. Kesan pemuatan awal

2. Kembangkan menu (menyokong pengembangan berbilang peringkat, pengenalan kod di bawah)

3 Klik submenu untuk membuka halaman yang sepadan dalam bentuk halaman Tab

4. Menyokong lipatan menu

5 Apabila terdapat terlalu banyak menu yang terbuka, ia akan secara automatik membalut ke dalam baris baharu dan dipaparkan secara automatik selepas dilipat

2. Contoh kod
Terdapat perkara sedia yang sangat mudah digunakan Secara umumnya, fungsi templat Bootstrap Ace agak berkuasa dan menyokong pelbagai peranti terminal. Artikel ini terutamanya menggunakan kesan menunya Mari kita lihat kod pelaksanaan kesan menu templat Ace.

1. Kesan menu
Memandangkan Ace adalah berdasarkan Bootstrap, anda perlu merujuk komponen jquery dan bootstrap terlebih dahulu. Mari kita lihat secara umum fail mana yang perlu dirujuk.

<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>

Haha, nampaknya ada banyak. Kecuali untuk fail js terakhir (887fa161fea4b0c927efde03e6925e732cacc6d41bbb37262a98f745aa00fbf0) yang dirangkumkan oleh blogger itu sendiri, yang lain pada dasarnya adalah komponen ciri yang diperlukan oleh komponen. Lihatlah teg html yang harus diletakkan pada halaman:

　<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>

Mari kita lihat kaedah enkapsulasi dalam fail 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);

Panggil kaedah menu bar sisi terus pada halaman

$(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'
          }]
        }]
      });
    });

Perkara yang sangat penting untuk diperhatikan di sini ialah mengenai ikon kecil di hadapan menu:

Apabila nilai con ialah ikon-pengguna, ikon kecil seperti yang ditunjukkan dalam gambar akan dipaparkan pada menu. Sudah tentu, dalam keadaan biasa, menu mesti dimuatkan secara dinamik Jika anda perlu mendapatkan data dari latar belakang, anda boleh menghubungi kaedah ini secara terus:

$('#menu').sidebarMenu({ url: "/api/UserApi/GetMenuByUser/", param: { strUser: 'admin' } });
Itu sahaja, haha, ia sangat mudah.

2. Kesan halaman tab
Kesan halaman Tab sebenarnya berkait rapat dengan menu kiri Mula-mula, mari kita lihat rujukan js kesan halaman Tab.
bccd8ef0e7363ea609f854d3bba6a81e2cacc6d41bbb37262a98f745aa00fbf0
Teg HTML halaman:
                                                                                                                                                                  

 <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>

Fail bootstrap-tab.js merangkumi kaedah 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);
  });
});

Jadi, bilakah kaedah Addtabs dipanggil? Jawapannya ialah semasa mendaftarkan acara klik menu Bahagian kod ini tersedia apabila komponen sidebar-menu anda boleh melihatnya di atas.

Di atas ialah paparan menu dan kesan halaman Tab bagi templat bootstrap ace Secara umum, fungsi asas tersedia, tetapi gaya menu perlu dilaraskan, contohnya, selepas mengklik menu menu yang diklik perlu dipilih status. Jika projek anda juga menggunakan gaya bootstrap, kaji templat ace dan cuba.